ホームページ > 記事 > ウェブフロントエンド > dom オブジェクトの innerText と innerHTML の違いは何ですか?

dom オブジェクトの innerText と innerHTML の違いは何ですか?

jackloveオリジナル: 2018-05-21 10:28:402545ブラウズ

この記事では、dom オブジェクトの innerText と innerHTML の関連する違いについて説明します。

innerText はすべての出力をページ上のテキスト形式で表示し、inderHTML は要素の HTML 構造を返し、コンテンツに基づいて DOM を自動的に作成します。

elem.children と elem.childNodes の違いは何ですか?

elem.children はテキストノード以外の DOM ノードオブジェクトを取得するためのもので、
elem.childNodes は空のノードとテキストノードを含むすべての DOM ノードを取得するためのものです。

要素をクエリするための一般的なメソッドはいくつありますか?

getElementsById(): 指定された ID 属性を持つ要素を検索します

getElementsByClassName(): 指定されたクラス属性を持つ要素を検索します

getElementsByTagName(): 指定されたタグを持つ要素を検索します

getElementsByName(): name 属性を持つ要素を検索します

querySeletor(): CSS セレクターと同等、ラベルが一致する最初のノードを検索します

querySeletorAll(): CSS セレクターと同等、ラベルが一致するすべてのノードを検索します

要素の作成方法要素に属性を設定するにはどうすればよいですか?

createElement() は HTML 要素を作成します。パラメータは a8093152e673feb7aba1828c43532094 なしのタグ名です。

createTextNode() はテキストノードを作成し、パラメータはテキストコンテンツです。

setAttribute() は要素の属性を設定するために使用されます。

要素を追加または削除しますか?

appendChild(): 要素の最後に要素を追加します

insertBefore(): 要素の前に要素を追加します

removeChild(): 要素を削除します

DOM0 イベントと DOM2 レベルではイベントリスニングの使用法が異なります違い？

DOM レベル 0 イベントは、関数の割り当てをイベントハンドラーにバインドするもので、同時に 1 つのイベントのみを処理できます。

DOM2 レベルでは、イベントハンドラーの指定と削除の操作を処理するための 2 つのメソッドが定義されており、イベントに対して複数のイベントハンドラーを追加できます。

attachEvent と addEventListener の違いは何ですか?

パラメーターの数が異なります。addEventListener には 3 つのパラメーターがありますが、attachEvent によって追加された時間ハンドラーは、追加されたイベントハンドラーがキャプチャ中であるかどうかを決定できます。ステージ処理

addEventListener の最初のパラメータはイベントの種類 (click、load など) ですが、addachEvent の最初のパラメータはイベント処理関数名 (onclick、onload) を指定します

イベントハンドラー addEventListener のスコープは異なります。addEventListener のスコープは要素自体です。これはトリガー要素を参照します。そして、attachEvent イベントハンドラーはグローバル変数で実行されます。これは window です

イベントの実行順序が異なり、addEventListenerは追加順に実行されますが、addachEventは不規則な順序で複数のイベントハンドラを追加します（追加メソッドが少ない場合は追加順の逆順で実行されることが多いですが、多すぎると順序が不規則になります) ので、複数追加する場合、関数の実行順序に依存すると自分で対応する必要があり、ブラウザに頼ることができません。

IE イベントバブリングと DOM2 イベント伝播メカニズムについて説明しますか?

IE イベントバブリングとは、イベントが最も内側の要素から開始され、HTML ルートノードまでレイヤーごとに上向きに伝播することを意味します。

DOM2 イベント伝播メカニズム:

イベントキャプチャフェーズ: イベントは、ルートノードから下位層に向かってレイヤーごとにイベントのターゲットノードを検索します。

ターゲットフェーズ: ターゲットノードに到達し、ターゲットイベントを実行します。

イベントバブリングステージ: イベントはターゲットノードからルートノードまでレイヤーごとに追跡されます。

イベントのバブルを止めるにはどうすればよいですか? デフォルトイベントを防ぐにはどうすればよいですか?

イベントのバブリングを停止するには、stopPropagation() 関数を使用します。

イベントのデフォルトの動作をキャンセルするには、preventDefault() 関数を使用します。

コードの質問

次のコードがあります。これは、要素がクリックされたときに各要素 li のテキスト内容をコンソールに表示する必要があります。互換性とは関係ありません

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li></ul>
  <script>var ct = document.querySelector(&#39;.ct&#39;),
    li= ct.querySelectorAll(&#39;li&#39;);for(var i= 0; i< li.length; i++){
    li[i].onclick = function(){        console.log(this.innerText);
    }
}</script>

この記事では、dom オブジェクトの innerText と innerHTML の関連する違いについて説明します。さらに関連する内容については、PHP 中国語 Web サイトを参照してください。

dom オブジェクトの innerText と innerHTML の違いは何ですか?

関連記事