JavaScriptステップノート-DOMコンセプト、要素を取得する4つの方法、要素の効率比較を作成する

DOM:(Document Object Model)、ドキュメントオブジェクトモデル、W 3 C組織が推奨する処理拡張可能なタグ言語(HTML、XML)の標準プログラミングインタフェースです.
DOMインタフェースでは、Webページの内容、構造、スタイルを変更できます.

DOM:

ドキュメント:1ページがドキュメント

です.

要素:ページ内のすべてのラベルは要素

です.

ノード:Webページのすべてのコンテンツはノード

です.
DOMは以上の内容を対象としている

要素の取得:

 

1、IDによる取得

getElementById()を使用して、id付き要素オブジェクトを取得します.
パラメータidは大文字と小文字に敏感な文字列です.dir()戻ってきた要素オブジェクトを印刷し、中の属性と方法をよりよく表示します.
 

2、ラベル名による取得

getElementsByTagName()メソッドを使用して、指定したラベル付き署名を持つオブジェクトのセットを返します.
オブジェクトの集合を取得し、擬似配列として格納します.
また、エレメント内の指定ラベル署名のすべてのサブエレメントを取得することもできます:element.getElementsByTagName('ラベル名')
親要素はオブジェクトでなければなりません.擬似配列ではありません.
たとえば、olのliを取得するには、次のような操作が必要です.

var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));

3、（クラス）セレクタで取得

(1)documentを使用する.getElementByClassName('クラス名')は、クラス名に基づいて要素オブジェクトのセットを返します.
(2)documentを使用する.querySelector('セレクタ')、セレクタに記号を付けることに注意!例えば.box,#nav,指定したセレクタに従って最初の要素オブジェクトを返す
(3)documentを用いる.QuerySelectorAll('セレクタ')、指定したセレクタのすべての要素オブジェクトのセットを返します.
 
たとえばclassというboxという要素を取得するには、次の方法があります.

var boxs = document.getElementsByClassName('box');

var firstBox = document.querySelector('.box');//    .            

 

var allbox = document.querySelectorAll('.box');

セレクタなのでID取得も可能です

var nav = document.querySelector('#nav');

4、特殊要素の取得

body:documentを取得します.bodyはbody要素オブジェクトを返します
html:documentを取得します.documentElement html要素オブジェクトを返す
 

要素効率の比較を作成するには、次の手順に従います。

InnerHTMLは、文字列の結合ではなく配列形式の結合を使用することを前提として、複数の要素を作成するのに効率的ですが、構造は少し複雑です.
createElement()は、複数の要素を作成するのに少し効率が悪いが、構造がより明確である.
つまりinnerHTMLはcreateElementより効率的です