ホームページ >ウェブフロントエンド >htmlチュートリアル >JS Domとイベントの概要
今回はJS Domの概要と注意点についてお届けします 以下は実際の事例ですので、一緒に見ていきましょう。
Html タグを含む、オブジェクトの開始位置から終了位置までのコンテンツ全体を指します。 innerText は開始位置から終了位置までのコンテンツを参照しますが、Html タグは削除されます。
1.getElementById
DOM は、id 属性に対応するノード オブジェクトを返す getElementById というメソッドを提供します。
2.
getElementsByTagNameこのメソッドは、オブジェクトの配列 (正確には HTMLCollection ですが、本当の意味での配列ではありません) を返します。各オブジェクトは、ドキュメント内の指定されたタグを持つ要素に対応します。 getElementById と同様に、このメソッドはパラメーターを 1 つだけ提供し、そのパラメーターは指定されたタグの名前です。
3.getElementsByClassName
DOM には、タグを指定して要素を取得するだけでなく、指定したクラス名の要素を取得する getElementsByClassName メソッドも用意されています。
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('li') for(var i=0;i<item.length;i++){ item[i].addEventListener('click', function(){ console.log(this.innerText); }) } */ //方法二 var item = document.getElementsByTagName('li') for(var i=0;i<item.length;i++){ item[i].addEventListener('click', function(){ console.log(this.innerText); }) } </script>
完全なコード、要件:
1. 最初に追加するボタンをクリックするとき、5a8028ccc7a7e27417bff9f05adf5932here isbed06894275b65c1ab86501b08a632eb の前に新しい要素を追加します。内容はユーザーの入力された空でない文字列です。追加する最後をクリックすると、ユーザーが入力した空でない文字列を 25edfb22a4f469ecb59f1190150159c6Frontend 6 Classbed06894275b65c1ab86501b08a632eb が表示されます。各要素 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('.ct')var start = document.getElementById('btn-add-start');var end = document.getElementById('btn-add-end');var input = document.querySelector(".ipt-add-content"); end.addEventListener('click',function(){ var list = document.createElement('li'); list.innerText = input.value ct.appendChild(list); }) start.addEventListener('click',function(){ var list = document.createElement('li'); list.innerText = input.value ct.insertBefore(list,ct.firstChild); }) ct.addEventListener('click', function(e){ if(e.target.tagName.toLowerCase() === 'li'){ console.log(e.target.innerText); } }); </script>
<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('.ct')var list = document.getElementsByTagName('li')var preview = document.querySelector('.img-preview')for(var i=0;i<list.length;i++){list[i].addEventListener('mouseover',function(){if(document.querySelector('img')){preview.removeChild(document.querySelector('img'))console.log(1)}var item = document.createElement('img')var img = this.getAttribute('data-img')preview.appendChild(item)item.src=img; }) } </script>
関連記事:
Pythonを使用して画像の類似性を判断する方法画像をダウンロードするためのJavaScriptスクリプト以上がJS Domとイベントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。