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

 
段落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関数.
• オプション - （オプション）ブール型プロパティのセットを持つオブジェクト（以下にリスト）.

コード例

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

私をクリック

 var btn = document.querySelector（ 'button'）; btn.addEventListener（ 'click'、foo）;関数foo（）alert（ 'hello'）; 

インタラクティブデモ

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

4. removeEventListener（）

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

構文

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

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

コード例

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

 btn.removeEventListener（ 'click'、foo）;

5. createElement（）

の createElement（） 方法 新しいHTML要素を作成します を使用して HTMLタグの名前 作成する 'p' または 'div'.

後で別の要素を使用してこの要素をWebページに追加できます。 DOM挿入のためのメソッド, といった AppendChild（） （この記事の後半を参照してください）.

構文

document.createElement（tagName）;

• タグ名 - 作成したいHTMLタグの名前.

コード例

次の例では、新しい段落要素を作成できます。

var pEle = document.createElement（ 'p'）

6. appendChild（）

の appendChild（） 方法 最後の子として要素を追加します このメソッドを呼び出すHTML要素へ.

挿入される子は、どちらでも構いません。 新しく作成された要素, または 既存のもの. 後者の場合は、前の位置から最後の子の位置に移動します。.

構文

ele.appendChild（childEle）

• エレ - HTML要素 childEle 最後の子として追加されます.
• childEle - の最後の子として追加されたHTML要素 エレ.

コード例

この例では、 要素はの子として

を使用する要素 appendChild（） そして前述の createElement（） 方法.

 var div = document.querySelector（ 'div'）; var strong = document.createElement（ 'strong'）; strong.textContent = 'こんにちは'; div.appendChild（強い）;

インタラクティブデモ

次のインタラクティブデモでは、からの手紙 #a に #r の子要素は ＃parent-one, ＃親2, そして ＃親3 idセレクタ.

どのようにチェックアウト appendChild（） メソッドは 下の入力フィールドに、親と子のセレクタ名を1つずつ入力します。. 他の親に属する子供を選ぶこともできます.

7. removeChild（）

の removeChild（） 方法 指定された子要素を削除します このメソッドを呼び出すHTML要素から.

構文

ele.removeChild（childEle）

• エレ - の親要素 childEle.
• childEle - の子要素 エレ.

コード例

この例では、 子として追加した要素

前のコード例のtag appendChild（） 方法.

div.removeChild（強い）;

8. replaceChild（）

の replaceChild（） 方法 子要素を別の要素と置き換える このメソッドを呼び出す親要素に属する.

構文

ele.replaceChild（newChildEle、oldChileEle）

• エレ - 子が置き換えられる親要素.
• newChildEle - の子要素 エレ それは置き換えられます oldChildEle.
• oldChildEle - の子要素 エレ, それはに置き換えられます newChildEle.

コード例

この例では子要素 に属する

親要素は新しく作成されたものに置き換えられます タグ.

 
 こんにちは 

 var em = document.createElement（ 'em'）; var strong = document.querySelector（ 'strong'）; var div = document.querySelector（ 'div'）; em.textContent = 'hi'; div.replaceChild（em、strong）;

9. cloneNode（）

あなたがする必要がある新しい要素を作成しなければならないとき 既存の要素と同じ Webページでは、簡単にできます 既存の要素のコピーを作成する を使用して cloneNode（） 方法.

構文

var dupeEle = ele.cloneNode（[deep]）

• dupeEle - のコピー エレ 素子.
• エレ - コピーされるHTML要素.
• 深い - （オプション）ブール値。に設定されている場合 本当の, dupeEle すべての子要素を持ちます エレ に設定されている場合、 偽 子なしで複製されます.

コード例

この例では、コピーを作成します。 の要素 cloneNode（）, それから我々はそれをに追加します

前述の子要素としてのtag appendChild（） 方法.

結果として,

2つ含まれます 両方の要素 こんにちは 内容としての文字列.

 
 こんにちは 

 var strong = document.querySelector（ 'strong'）; var copy = strong.cloneNode（true）; var div = document.querySelector（ 'div'）; div.appendChild（コピー）; 

10年. insertBefore（）

の insertBefore（） 方法 指定した子要素を別の子要素の前に追加します. メソッドは親要素によって呼び出されます.

参照されている子要素が存在しないか明示的に渡した場合 ヌル その代わりに、挿入される子要素が追加されます 親の最後の子として （に似ている appendChild（））.

構文

ele.insertBefore（newEle、refEle）;

• エレ - 親要素.
• newEle - 挿入する新しいHTML要素.
• 補給 - の子要素 エレ その前に newEle 挿入されます.

コード例

この例では、新しい いくつかのテキストを含む要素 前 の 内の要素

親要素.

 
 こんにちは 

 var em = document.createElement（ 'em'）; var strong = document.querySelector（ 'strong'）; var div = document.querySelector（ 'div'）; em.textContent = 'hi'; div.insertBefore（em、strong）; 

インタラクティブデモ

この対話型デモは、以前のデモに属している以前のデモと同様に機能します。 appendChild（） 方法。ここでは、2つの子要素のidセレクタを入力するだけです（ #a に #r）を入力ボックスに入れると、 insertBefore（） メソッドは最初に指定された子を移動します 前 二番目.

11. createDocumentFragment（）

の createDocumentFragment（） この方法では、他の方法ほど有名ではないかもしれませんが、それでも重要な方法です。 複数の要素をまとめて挿入する, テーブルに複数の行を追加するなど.

それ を作成します DocumentFragment 物, これは本質的に DOMツリーの一部ではないDOMノード. DOMツリーの目的のノード（テーブルなど）に追加する前に、他の要素（複数行など）を最初に追加して格納できるバッファのようなものです。.

DOMツリーに直接要素を追加しないのはなぜですか。 DOM挿入だから レイアウトを変更します, そしてそれは 高価なブラウザプロセス 結果として複数の要素を挿入するとレイアウトがさらに変更されるため.

一方、aに要素を追加する DocumentFragment 物 レイアウトを変更しない, そのため、DOMツリーに渡す前に必要なだけ要素を追加でき、この時点でのみレイアウトが変更されます。.

構文

document.createDocumentFragment（）

コード例

この例では、複数のテーブル行とセルを作成します。 createElement（） メソッドに追加してから、 DocumentFragment オブジェクト、最後にそのドキュメントの断片をHTMLに追加する

を使用して appendChild（） 方法.

その結果、5行（1行から5行までの1つのセルをコンテンツとして含む各行）がテーブル内に挿入されます。.

 var table = document.querySelector（ "table"）; var df = document.createDocumentFragment（）; （var i = 0; iの場合<5; i++)  var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr);  table.appendChild(df); 

12年. getComputedStyle（）

時にはあなたがしたい CSSプロパティ値を確認してください。 変更を加える前の要素のあなたが使用することができます ele.style 同じことをするためのプロパティ getComputedStyle（） メソッドはこの目的のためだけに作られました、それ 読み取り専用の計算値を返します 指定されたHTML要素のすべてのCSSプロパティの.

構文

var style = getComputedStyle（ele、[pseudoEle]）

• スタイル - A CSSStyleDeclaration メソッドによって返されたオブジェクト。それはすべてのCSSプロパティとそれらの値を保持します。 エレ 素子.
• エレ - CSSプロパティ値が取得されるHTML要素.
• pseudoEle - （オプション）擬似要素を表す文字列（たとえば、, '：後に'）これが言及されている場合は、指定された擬似要素のCSSプロパティ エレ 返却されます.

コード例

この例では、計算結果を取得して警告します。 幅 の値

要素を使用して getComputedStyle（） 方法.

 var style = getComputedStyle（document.querySelector（ 'div'））; alert（style.width）; 

13年. setAttribute（）

の setAttribute（） どちらかの方法 新しい属性を追加します HTML要素に 値を更新します すでに存在する属性の.

構文

ele.setAttribute（name、value）;

• エレ - 属性が追加された、またはどの属性が更新されたHTML要素.
• 名 - 属性の名前.
• 値 - 属性の値.

コード例

この例では、 満足できる の属性

を利用して setAttribute（） コンテンツを編集可能にするメソッド.

こんにちは

 var div = document.querySelector（ 'div'）; div.setAttribute（ 'contenteditable'、 "） 

14年. getAttribute（）

の getAttribute（） 方法 指定された属性の値を返します 特定のHTML要素に属する.

構文

ele.getAttribute（name）;

• エレ - 属性が要求されているHTML要素.
• 名 - 属性の名前.

コード例

この例では、 満足できる に属する属性

の助けを借りて要素 getAttribute（） 方法.

こんにちは

 var div = document.querySelector（ 'div'）; alert（div.getAttribute（ 'contenteditable'）） 

15年. removeAttribute（）

の removeAttribute（） 方法 与えられた属性を削除します 特定のHTML要素の.

構文

ele.removeAttribute（name）;

• エレ - どの属性のHTML要素を削除するか.
• 名 - 属性の名前.

コード例

この例では、 満足できる からの属性

素子。その結果、

これ以上編集できなくなります.

こんにちは

 var div = document.querySelector（ 'div'）; div.removeAttribute（ 'contenteditable'）; 

15のレッスン「芸術の戦争」は人生の戦いに勝つことについてあなたに教えます

モバイル対応のための15のライトボックスライブラリ

パーフェクトスタンディングデスクを購入または構築するための15のアイデア

次の記事

スマートスティッキー要素を作るための15のjQueryプラグイン

前の記事

15起業家のための感動的なスタートアッププレゼンテーションビデオ