JS Domとイベントの概要

今回はJS Domの概要と注意点についてお届けします 以下は実際の事例ですので、一緒に見ていきましょう。

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

innerHTML は、

Html タグを含む、オブジェクトの開始位置から終了位置までのコンテンツ全体を指します。 innerText は開始位置から終了位置までのコンテンツを参照しますが、Html タグは削除されます。

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

ノード (ノード) は、DOM 階層内のあらゆるタイプのオブジェクトの一般名です。ノードには、要素ノード、属性ノード、テキスト ノード、コメント ノードなど、さまざまな種類があります。 Element は Node クラスを継承します。これは、Element がさまざまなタイプの Node の 1 つであることを意味します。つまり、NodeType が 1 の場合、Node は Node を拡張し、Element は id、class、children などの属性を持ちます。 。 Children は Element の属性であり、childNodes は Node の属性です。

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

要素を取得するには、要素 ID を使用する、タグ名を使用する、クラス名を使用するという 3 つの一般的な方法があります。

1.getElementById
DOM は、id 属性に対応するノード オブジェクトを返す getElementById というメソッドを提供します。
2.
getElementsByTagNameこのメソッドは、オブジェクトの配列 (正確には HTMLCollection ですが、本当の意味での配列ではありません) を返します。各オブジェクトは、ドキュメント内の指定されたタグを持つ要素に対応します。 getElementById と同様に、このメソッドはパラメーターを 1 つだけ提供し、そのパラメーターは指定されたタグの名前です。
3.getElementsByClassName
DOM には、タグを指定して要素を取得するだけでなく、指定したクラス名の要素を取得する getElementsByClassName メソッドも用意されています。

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

1.createElement(name) は要素ノードを作成します。

createElement() は Document オブジェクト内のメソッドであり、指定された要素名に基づいて Element オブジェクトを返します。
2. 作成した要素ノードの属性を設定します
要素を作成した後、要素の CSS スタイルの設定、クリック イベントの追加など、要素の属性を設定する必要がある場合があります。要素の属性を設定するには、Element オブジェクトの setAttribute メソッドを使用するか、属性名を使用して設定できます。
3. DOM ドキュメントの指定された位置に要素ノードを挿入します。 要素を作成した後、要素を追加するには、appendChild() メソッドを使用するか、DOM ドキュメントの指定された位置に要素ノードを挿入する必要があります。 Element オブジェクトの insertBefore() メソッド。 appendChild()
メソッドは、要素に新しい子ノードを追加するもので、追加された子ノードが最後の子ノードになります。 insertBefore() メソッドは、既存のノードの前に新しいノードを挿入するために使用され、追加されたノードは兄弟ノードになります。

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

要素の追加: createElement を使用して要素を追加します。

要素の削除: HTML 要素を削除する必要がある場合は、まず要素の親要素を取得してから、removeChild を使用して対応する要素を削除する必要があります。

DOM0 イベントと DOM2 レベルのイベント リスニング方法の違いは何ですか?

DOM0 イベント: DOM0 イベントは、イベントをノードに直接バインドすることを指します。ノードは 1 つのイベントのみをバインドできます。それ以外の場合は、背面の灰色が前面を覆います。

var oBtn = document.querySelctor('#btn');

oBtn.onclick=function(){
console.log('a')
};
DOM2 イベント: DOM2 レベルのイベントは複数のイベントを 1 つの要素にバインドできますイベント、後続のイベントは前のイベントを上書きしません。パラメーター true と false を使用して、バブリング フェーズまたはキャプチャ フェーズでイベントをトリガーするようにイベントを設定できます。イベントを削除するには、removeEventListener を使用します。
oBtn.addEventListener("click",function(){
});
oBtn.removeEventListener("click",fn,false);

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

1. addEventListener とattachEvent の間の互換性の問題

addEventListener は、W3C 仕様に準拠したイベント バインディング メソッドであり、イベントをバインドするために使用されます。

attachEvent は IE にとってプライベートであり、W3C 仕様に準拠していません。また、IE ではイベントをバインドするためにのみ使用でき、addEventListener は無効です。
したがって、イベントをバインドしたい場合は、互換性の問題に対処する必要があります。
2. addEventListener とattachEventの文法規則
addEventListenerには3つのパラメータがあります: element.addEventListener(type,listener,useCapture)
attachEventには2つのパラメータがあります: element.attachEvent(type,listener);
3. コード互換性処理
function regEvent( ele, イベント名, fun)
{
if (window.attachEvent)
ele.attachEvent(event_name, fun) //
IE ブラウザ
else{
event_name = イベント名.replace(/^on/, ""); ; // on で始まる場合は、onclick->click
ele.addEventListener(event_name, fun, false) を削除します。 // IE 以外のブラウザ
}
}

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

IE イベント バブリング: イベントはトリガー要素で発生し、トリガー要素から始まり、html 要素まで親要素にレベルごとに渡されます。
DOM2 イベント: イベントの伝播は、キャプチャ ステージ、イベント ターゲット ステージ、バブリング ステージの 3 つのステージに分かれています。イベント リスナーは、キャプチャ フェーズまたはバブリング フェーズのいずれかで実行することのみを選択できます。
キャプチャフェーズ: イベントが発生すると、ルートノードから開始され、レベルごとに検索してターゲット要素を特定します。
バブリングフェーズ: トリガー要素から開始して、イベントは HTML 要素までレベルごとに親要素に渡されます

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

イベントのバブリングを防ぐ: w3c のメソッドは e.stopPropagation() で、IE は e.cancelBubble = true を使用します。
デフォルト イベントの防止: w3c のメソッドは e.preventDefault() で、IE は e.returnValue = false を使用します。

Q&A

次のコードは、要素がクリックされたときに各要素 li のテキスト内容をコンソールに表示するように要求します。

 <ul class="ct">
      <li>这里是</li>
      <li>饥人谷</li>
      <li>前端6班</li>
  </ul>
  <script>
  //todo ...
  </script>

と互換性がないと見なされます:

<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//方法一
/*var item = document.getElementsByClassName("ct")[0].getElementsByTagName(&#39;li&#39;)
for(var i=0;i<item.length;i++){
item[i].addEventListener(&#39;click&#39;, function(){
console.log(this.innerText);
})
} */
//方法二
var item = document.getElementsByTagName(&#39;li&#39;)
for(var i=0;i<item.length;i++){
item[i].addEventListener(&#39;click&#39;, function(){
console.log(this.innerText);
})
}
</script>

完全なコード、要件:

1. 最初に追加するボタンをクリックするとき、here is の前に新しい要素を追加します。内容はユーザーの入力された空でない文字列です。追加する最後をクリックすると、ユーザーが入力した空でない文字列を

Frontend 6 Class

が表示されます。各要素 li をクリックしたときのこの要素のテキストの内容。

<ul class="ct">
<li>这里是</li>
<li>555</li>
<li>666</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//todo ...
</script>

コード:

<ul class="ct">
<li>这里是</li>
<li>666</li>
<li>555</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>

<script>var ct = document.querySelector(&#39;.ct&#39;)var start = document.getElementById(&#39;btn-add-start&#39;);var end = document.getElementById(&#39;btn-add-end&#39;);var input = document.querySelector(".ipt-add-content");
     end.addEventListener(&#39;click&#39;,function(){            var list = document.createElement(&#39;li&#39;);        list.innerText = input.value        ct.appendChild(list);      })      start.addEventListener(&#39;click&#39;,function(){            var list = document.createElement(&#39;li&#39;);        list.innerText = input.value        ct.insertBefore(list,ct.firstChild);      })      ct.addEventListener(&#39;click&#39;, function(e){          if(e.target.tagName.toLowerCase() === &#39;li&#39;){           console.log(e.target.innerText);          }      });     </script>

コードを完成させます。要件: マウスを li 要素上に置くと、現在の li 要素の data-img に対応する画像が img-preview に表示されます。

 <ul class="ct">
      <li data-img="1.png">鼠标放置查看图片1</li>
      <li data-img="2.png">鼠标放置查看图片2</li>
      <li data-img="3.png">鼠标放置查看图片3</li>
  </ul>
  <div class="img-preview"></div>
  <script>
  //todo ...
  </script>

コード:

<ul class="ct"><li data-img="http://img5.imgtn.bdimg.com/it/u=3425851328,2681317699&fm=21&gp=0.jpg">鼠标放置查看图片1</li><li data-img="http://pic24.nipic.com/20121003/10754047_140022530392_2.jpg">鼠标放置查看图片2</li><li data-img="http://img2.3lian.com/img2007/4/22/303952037bk.jpg">鼠标放置查看图片3</li></ul><div class="img-preview"></div><script>var ct = document.querySelector(&#39;.ct&#39;)var list = document.getElementsByTagName(&#39;li&#39;)var preview = document.querySelector(&#39;.img-preview&#39;)for(var i=0;i<list.length;i++){list[i].addEventListener(&#39;mouseover&#39;,function(){if(document.querySelector(&#39;img&#39;)){preview.removeChild(document.querySelector(&#39;img&#39;))console.log(1)}var item = document.createElement(&#39;img&#39;)var img = this.getAttribute(&#39;data-img&#39;)preview.appendChild(item)item.src=img;
    })      }    </script>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

Pythonを使用して画像の類似性を判断する方法

画像をダウンロードするためのJavaScriptスクリプト

以上がJS Domとイベントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。