コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > JS Domとイベントの概要

JS Domとイベントの概要

php中世界最好的语言
リリース： 2018-03-08 15:08:24
オリジナル
1615 人が閲覧しました

今回は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 サイトの他の関連記事を参照してください。

    関連ラベル：
    javascript イベント
    ソース：php.cn
    前の記事：JS の時間オブジェクトと参照型 次の記事：JS クロージャとタイマー
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
    から 2024-04-06 19:25:49
    0
    1
    505
    d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
    から 2024-04-06 18:16:26
    0
    1
    403
    ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
    から 2024-04-06 15:35:24
    0
    1
    274
    Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
    から 2024-04-06 14:54:03
    0
    2
    421
    CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
    から 2024-04-06 12:53:11
    0
    1
    376
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート