1概要
1.1はじめに
本文では、JavaScript操作Domの基本的な方法を簡単に羅列し、要素クエリー、ドキュメント構造遍歴、属性およびコンテンツ操作、ノードの作成、ノードの挿入、ノードの削除などの内容を含む.JQueryの方が便利ですが、オリジナルのAPIを使うのが好きです.
2ドキュメント要素の選択
2.1 IDセレクタ
IDによって要素を選択することは最も簡単でよく使われる要素を選択する方法であり、IDセレクタの性能は他のセレクタより優れている.

var title = document.getElementById("title");

IDは存在せず、nullを返します.
サンプル・プログラムの表示
2.2名前セレクタ
name属性に基づく値選択要素はIDセレクタとは異なります.1つは、name属性値が一意でなければならないことではなく、複数の要素に同じ名前がある可能性があります.2つ目は、nameプロパティがフォーム、フォーム要素、iframeおよびimg要素を含む少数のHTML要素でのみ有効であることです.

var sports = document.getElementsByName("sports");

サンプル・プログラムの表示
2.3ラベルセレクタ
HTML要素のラベル名を使用して、指定したタイプの要素を選択します.

var h1 = document.getElementsByTagName("h1");

サンプル・プログラムの表示
2.4クラスセレクタ
HTMLのclass属性値で要素を選択します.

var title = document.getElementsByClassName("title");

サンプル・プログラムの表示
2.5 CSS単元素選択器
CSSスタイルシートセレクタの強力な構文で要素を選択します.最初に一致する要素を返します.

var title = document.querySelector("#title");   // CSS ID  
var h1 = document.querySelector("h1");     //     h1  

サンプル・プログラムの表示
2.6 CSSマルチエレメントセレクタ
これは最強の究極のセレクタです

var h1s = document.querySelectorAll("h1");    //    h1    

サンプル・プログラムの表示
3 DOM遍歴
3.1ノード関連
3.1.1親ノード-parentNode
親ノードを返し、documentオブジェクトが呼び出されるとnullを返します.

var parent = node.parentNode;

サンプル・プログラムの表示
3.1.2サブノード-childNodes
すべてのサブノード、すなわちNodeListオブジェクトを返します.

var children = node.childNodes;

サンプル・プログラムの表示
3.1.3首サブノード-firstChild
最初のサブノードを返します.

var first = node.firstChild;

サンプル・プログラムの表示
3.1.4末尾サブノード-lastChild
最後のサブノードを返します.

var last = node.lastChild;

サンプル・プログラムの表示
3.1.5次の兄弟ノード-nextSibling
次の兄弟ノードに戻ります.

var next = node.nextSibling;

サンプル・プログラムの表示
3.1.6前兄弟ノード-previousSibling
前の兄弟ノードに戻ります.

var previous = node.previousSibling;

サンプル・プログラムの表示
3.1.7ノードタイプ-nodeType
ノードタイプの数値表示を返します.

1はElementノード

を表す.

3はTextノード

を表す.

8はCommentノード

を表す.

9はDocumentノード

を表す.

11はDocumentFragmentノード

を表す.
サンプル・プログラムの表示
3.1.8節点値-nodeValueTextノードまたはCommentノードの値を返します.

var value = node.nodeValue;

サンプル・プログラムの表示
3.1.9節点呼-nodeName
要素のラベル名を大文字で返します.

var name = node.nodeName;

サンプル・プログラムの表示
3.2要素関連
3.2.1サブエレメント-children
すべてのサブエレメントを返します.

var children = node.children;

サンプル・プログラムの表示
3.2.2最初のサブエレメント-firstElementChild
要素はノードの一種です.
すべてのサブエレメントの最初の値を返します.

var first = node.firstElementChild;

サンプル・プログラムの表示
3.2.3末尾要素-lastElementChild
すべてのサブエレメントの最後を返します.

var last= node.lastElementChild;

サンプル・プログラムの表示
3.2.4次の兄弟要素-nextElementSibling
次の兄弟要素を返します.

var next = node.nextElementSibling;

サンプル・プログラムの表示
3.2.5前の兄弟要素-previousElementSibling
前の兄弟要素を返します.

var previous = node.previousElementSibling;

サンプル・プログラムの表示
3.2.6サブエレメント数
サブエレメントの数を返します.

var count = node.childElementCount;

サンプル・プログラムの表示
4プロパティ
4.1標準属性
HTMLドキュメント要素を表すHTMLElementオブジェクトは、要素のHTML属性に対応する読み取り/書き込み属性を定義します.HTMLElementは、id、lang、dir、イベントハンドラonclick、フォーム関連属性などを含む汎用的なHTML属性を定義する.

form.action = "http://30ke.cn";
form.method = "post";

サンプル・プログラムの表示
4.2非標準属性
4.2.1属性値の取得-getAttribute
標準でないHTML属性の値を返します.

var width = img.getAttribute("width");

サンプル・プログラムの表示
4.2.2属性値設定-setAttribute
標準でないHTML属性の値を設定します.

img.setAttribute("width","400px");

サンプル・プログラムの表示
4.2.3属性存在検出-hasAttribute
属性が存在するかどうかを検出するブール値を返します.

var result = img.hasAttribute("width");

サンプル・プログラムの表示
4.2.4属性の削除-removeAttribute
属性を削除します.

img.removeAttribute("width");

サンプル・プログラムの表示
4.3データセット属性-dataset
HTML 5ドキュメントでは、data-を接頭辞とする任意の小文字の属性名が合法的です.これらのデータセット属性は、標準的で追加のデータを追加する方法を定義します.

var x = img.dataset.x;

サンプル・プログラムの表示
4.4要素属性-attributes
ノードノードは、要素のすべての属性のクラス配列オブジェクトであるattributes属性を定義します.

var attributes = img.attributes;

インデックスattributesオブジェクトの値はAttrオブジェクトです.Attrのnameとvalueは、属性の名前と値を返します.
サンプル・プログラムの表示
5要素の内容
5.1要素内容-innerHTMLattributes属性は、この要素の内容を文字列で返します.要素の現在の内容を置き換えることもできます.

var innerHTML = parent.innerHTML;     //        
parent.innerHTML = "
   
";  //       

サンプル・プログラムの表示
5.2要素と内容-outerHTMLinnerHTML属性は、この要素およびコンテンツを文字列形式で返します.現在の要素とコンテンツを置き換えることもできます.

var outerHTML = parent.outerHTML;     //        
parent.outerHTML= "
   
";  //        

サンプル・プログラムの表示
5.3純テキスト要素内容-textContent
純粋なテキスト要素の内容をクエリーまたは置換する標準的な方法は、ノードのtextContentプロパティで実現されます.IEでは、ElementのouterHTML属性で代用することができる.

console.log(title.textContent);
title.textContent = "   2";

サンプル・プログラムの表示
6ノードの作成
6.1要素ノードの作成-createElement
documentオブジェクトのinnerTextメソッドを使用して、新しいElementノードを作成します.

var h1 = document.createElement("h1");

サンプル・プログラムの表示
6.2テキストノード-createTextNodeの作成
プレーンテキストノードを作成します.

var txt = document.createTextNode("   ");

サンプル・プログラムの表示
6.3ドキュメントクリップの作成-createDocumentFragment
ドキュメントクリップを使用すると、通常、パフォーマンスが向上します.ドキュメントフラグメントはメモリに存在し、DOMツリーには存在しないため、サブエレメントをドキュメントフラグメントに挿入するとページが戻りません(エレメントの位置とジオメトリの計算).

var fragment = document.createDocumentFragment();

サンプル・プログラムの表示
6.4アノテーションノードの作成-createComment
アノテーションノードの作成はあまり使用されません.

var comment = document.createComment("Created by   ");

サンプル・プログラムの表示
6.5ノードクローン-cloneNode
既存のノードをコピーして、新しいドキュメントノードを作成します.伝達パラメータtrueは深いクローンを表し、falseは浅い複製を表す.

var title2 = title.cloneNode(true);

サンプル・プログラムの表示
7ノードの挿入
7.1サブノード挿入-appendChild
指定した要素にサブノードを挿入し、そのノードの最後のサブノードにします.

parent.appendChild(h2);  

サンプル・プログラムの表示
7.2ノード前挿入-insertBefore

親ノードで本方法

をアップグレードする.

第1のパラメータは、挿入するノード

を表す.

の第2のパラメータは、親ノードに既に存在する子ノードであり、そのノードの前面

に新しいノードが挿入する.

parent.insertBefore(h1,h2);   // h1   h2  。

サンプル・プログラムの表示
8削除と置換
8.1サブノードの削除-removeChild

親ノードで

を呼び出す.

パラメータは削除対象ノード

である.

parent.removeChild(h2);

サンプル・プログラムの表示
8.2サブノードの置換-replaceChild

親ノードで

を呼び出す.

の最初のパラメータは、新しいノード

である.

の2番目のパラメータは、置換が必要なノード

である.

parent.replaceChild(h2n , h2);  

サンプル・プログラムの表示
9エンド
9.1締めくくり
私の知识のレベルは有限で、编集の过程の中で时々间违いが発生して、もし発见したら指摘を惜しまないでください!ありがとうございます.