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

この記事では、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 要素を作成します。パラメータは なしのタグ名です。

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 サイトを参照してください。

関連する推奨事項:

JS に関するいくつかの基本的な質問

フロントエンド JS を使用して require をモジュール化する方法。

以上がdom オブジェクトの innerText と innerHTML の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。