ホームページ » コーディング » Web開発者のためのDOM操作のための15のJavaScriptメソッド

    Web開発者のためのDOM操作のための15のJavaScriptメソッド

    Web開発者として、あなたは頻繁に DOM, ブラウザが使用するオブジェクトモデル 論理構造を指定する そしてこの構造に基づいて HTML要素を画面にレンダリングする.

    HTMLは デフォルトのDOM構造. しかし多くの場合、JavaScriptでこれを操作することをお勧めします。 機能を追加する サイトへ.

    画像：Google Developers

    この記事では、のリストがあります 15の基本的なJavaScriptメソッド それ DOM操作を支援する. あなたはおそらくこれらのメソッドをあなたのコードの中で頻繁に使うでしょう、そして私たちのJavaScriptチュートリアルでそれらにぶつかるでしょう.

    1. querySelector（）

    の querySelector（） 方法 1つ以上のCSSセレクタに一致する最初の要素を返します. 一致が見つからない場合は、 ヌル.

    前 querySelector（） が導入され、開発者は広く getElementById（） 方法 指定された要素を取得する id 値.

    が getElementById（） まだ便利な方法ですが、より新しい querySelector（） そして querySelectorAll（） 私たちが自由にできる方法 任意のCSSセレクタに基づくターゲット要素, 従って私達はより多くの柔軟性を持っています.

    構文
    var ele = document.querySelector（selector）;
    • エレ - 最初に一致する要素または ヌル （要素がセレクタに一致しない場合）
    • セレクタ - 次のような1つ以上のCSSセレクタ "#fooId", ".fooClassName", ".class1.class2", または ".class1、.class2"
    コード例

    この例では、最初の

    で選択されます querySelector（） メソッドとその色は赤に変わります.

     
    段落1
     
    パラグラフ2
     
    div one
     
    パラグラフ3
     
    div two
     
     var firstDiv = document.querySelector（ 'div'）; firstDiv.style.color = 'red';
    インタラクティブデモ

    テストする querySelector（） 次のインタラクティブデモのメソッド。青いボックスの中にあるセレクターに一致するセレクターを入力するだけです（例：. ＃三）をクリックして[選択]ボタンをクリックします。次のように入力してください。 .ブロック, 最初のインスタンスのみ 選択されます.

    2. querySelectorAll（）

    違います querySelector（） 一致するすべての要素の最初のインスタンスのみを返します, querySelectorAll（） 指定されたCSSセレクターに一致するすべての要素を返します.

    一致する要素は NodeList 一致する要素が見つからない場合は空のオブジェクトになるオブジェクト.

    構文
    var eles = document.querySelectorAll（selector）;
    • エレス - A NodeList 一致するすべての要素をプロパティ値として持つオブジェクト。一致が見つからない場合、オブジェクトは空です。.
    • セレクタ - 次のような1つ以上のCSSセレクタ "#fooId", ".fooClassName", ".class1.class2", または ".class1、.class2"
    コード例

    以下の例では、前のHTMLと同じHTMLを使用しています。ただし、この例では、すべての段落が次のように選択されています。 querySelectorAll（）, そして青く着色されている.

     
    段落1
     
    パラグラフ2
     
    div one
     
    パラグラフ3
     
    div two
     
     var paragraphs = document.querySelectorAll（ 'p'）; （段落のvar p）に対してp.style.color = 'blue';

    3. addEventListener（）

    イベント クリック、フォーカス、ロードなど、JavaScriptで反応できるHTML要素に起こることを参照してください。にJS関数を割り当てることができます 聴く 要素内のこれらのイベントに対して、イベントが発生したときに何かを実行する.

    3つの方法があります 特定のイベントに機能を割り当てる.

    もし foo（） カスタム関数です、あなたはそれを登録することができます クリックイベントリスナーとして （button要素がクリックされたときにそれを呼び出す）3つの方法で：

    1.  
    2.  var btn = document.querySelector（ 'button'）; btn.onclick = foo;
    3.  var btn = document.querySelector（ 'button'）; btn.addEventListener（ 'click'、foo）;

    メソッド addEventListener（） （第三の解決策） いくつかの長所;これは最新の標準であり、イベントリスナとして複数の機能を1つのイベントに割り当てることができ、便利なオプションのセットが付属しています。.

    構文
    ele.addEventListener（evt、listener、[オプション]）;
    • エレ - イベントリスナーがリスンするHTML要素.
    • evt - 対象となるイベント.
    • リスナー - 通常、JavaScript関数.
    • オプション - （オプション）ブール型プロパティのセットを持つオブジェクト（以下にリスト）.
    オプション に設定するとどうなりますか 本当の?
    キャプチャー

    イベントのバブリングを停止します。つまり、要素の先祖の同じイベントタイプに対するイベントリスナーの呼び出しを禁止します.

    この機能を使用するには、2つの構文を使用できます。

    1. ele.addEventListener（evt、listener、true）
    2. ele.addEventListener（evt、listener、capture：true）;
    一回

    リスナーは、イベントが最初に発生したときにのみ呼び出され、その後自動的にイベントから切り離され、それによってトリガーされることはもうありません。.
    受動的

    イベントのデフォルトのアクションはpreventDefault（）メソッドでは停止できません.
    コード例

    この例では、というクリックイベントリスナーを追加します。 フー, に 

     var btn = document.querySelector（ 'button'）; btn.addEventListener（ 'click'、foo）;関数foo（）alert（ 'hello'）;
    インタラクティブデモ

    を割り当てる foo（） 次の3つのイベントのいずれかに対するイベントリスナーとしてのカスタム関数。 入力, クリック または マウスオーバー 一番下の入力フィールドで選択したイベントをホバー、クリック、または入力してトリガーします.

    4. removeEventListener（）

    の removeEventListener（） 方法 イベントリスナーを切り離します 以前に addEventListener（） 方法 それが聞いているイベントから.

    構文
    ele.removeEventListener（evt、listener、[オプション]）;

    前述と同じ構文を使用します addEventListener（） メソッド（を除く 一回 除外されたオプション）。オプションは、切り離されるリスナーの識別に関して非常に具体的になるために使用されます。.

    コード例

    で使用したコード例に従って addEventListener（）, ここで私達はと呼ばれるクリックイベントリスナーを削除します フー から