テキスト、テキストコンテンツ、innerhtmlとouterhtmlの違い

4315 ワード
html css javascript テキストリンク
HTML要素からテキストを抽出する必要がよくあります.でも
時々、我々は彼らの違いについて困惑します.今、彼らに取り組みましょう.HTML要素です.
<h2>
   Sub Div
   <span>I am hidden</span>
</h2>
上記の要素のテキスト部分を抽出したい.JavaScript (基本的にDOM操作)を書きましょう.
const heading = document.querySelector('h2');
console.log(heading.textContent);
console.log(heading.innerText);
ブラウザコンソールで見ることができます.両方の出力はほとんど同じです(text contentを使用するものは正しくトリミングされません)

だから、それらの違いは何ですか?たとえば、H 2要素内にスタイルタグを追加します.
<h2>
   Sub Div
   <style>
      h2 {
      background-color: orangered;
      }
   </style>
   <span>I am hidden</span>
</h2>
今すぐコンソール場合.再びログ.これを出力として得る

私たちは、テキストコンテンツがテキストと一緒に全体のスタイル要素を与えていることを見ています.
それらの間には別の有用な違いがあります.CSS規則を適用して要素の視認性を隠してから抽出するようにします.
<head>
   <style>
      h2 span {
      display: none;
      }
   </style>
   <head>
<body>
   <h2>
      Sub Div
      <span>I am hidden</span>
   </h2>
</body>
では、コンソールを見てみましょう.ログには

私たちは、そのテキストコンテンツがCSS規則を気にしないのを見ています.したがって、CSSによって隠された要素のテキストを取得する必要がある場合、テキストコンテンツは便利です.😉
他の2つのテクニックはinnerhtmlとouterhtmlです.私はブラウザのコンソールで出力を見るならば、彼らがかなり自己説明的であるので、彼らを簡単に理解するでしょう.
const heading = document.querySelector('h2');
console.log(heading.innerHTML);
console.log(heading.outerHTML);
ブラウザcosnoleの出力を見ましょう
を使用してフックを更新します
おつり14916回