JSはDOMのいくつかの方法を獲得します.

JSはDOMといくつかの方法を獲得します.

IDにより取得される

.

経由でname属性

タグ名(getElements ByTagName)による

クラス名(getElements ByClass Name)

.htmlの取得方法

bodyを取得する方法(Dcument.body)

セレクタによって一つの要素

を取得する.

は、セレクタによって要素のセットを取得する

.
以下の手順で説明します.1.IDで取得します.

    let box= document.getElementById("id1");

上下文必须是document。
必须传参数，参数是string类型，是获取元素的id。
返回值只获取到一个元素，没有找到返回null。

2.通过name属性（getElementsByName）

    


    let userInput= document.getElementsByName("user");

name属性を持つ要素(フォーム要素)のみがname属性からコンテキストを取得するためには、documentでなければなりません.パラメータを伝える必要があります.パラメータは元素を取得するname属性です.戻り値はクラスの配列で、戻り値の空行列が見つかりませんでした.
3.ラベル名(getElementsByTagName)による

 
  A
  B
 
  C
 
  D
  E
 
  F
 

    let pCollection= document.getElementsByTagName("p");

この方法は、集合でもある.
4.クラス名(getElements ByClass Name)による

 

    let boxCollection= document.getElementsByClassName("box");
    let box1 = boxList[0];
    let box2 = boxList[1];

getElements ByClass Name()の括弧の中のものは前に「.」を入れる必要がない.この方法で括弧の中の値は一つの要素のclass値に決定された.この方法は、集合を返します.セットバインディングイベントを直接に与えることはできません.セットの中の要素を取得してから、要素バインディングイベントIE 8および以前のバージョンと互換性がありません.
5.htmlの取得方法(document.documentElement)

    document.documentElement     html     。

6.bodyを取得する方法(Dcument.body)

    document.body     body     。

7.選択器で要素を取得する(querySelector)

    let box= document.querySelector("#id1");

querySelector()方法括号中的值是元素的选择器，所以前面加了”#”符号，使用的是id选择器。此方法直接返回DOM对象本身
不兼容IE7以及以前版本

8.通过选择器获取一组元素（querySelectorAll）

boxA
boxB
 
boxC
 
boxD
 
boxE
 

let box1= document.querySelector(".box"); 
let boxes= document.querySelectorAll(".box"); 

互換性のないIE 7 querySelector()とquerySelectorAll()メソッドの括弧の中の値はすべてセレクタです.複数のクラスの同じ要素がある場合、querySelectorを使って最初のクラスがboxである要素しか入手できません.しかも、querySelectorAllはすべてのクラスがboxである要素セットを取得しました.
DOM元素の継承関係

HTMLDivElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > EventTarget

彼らの同じ継承関係はNodeとEventTarget、つまり彼らはNodeとEventTarget上の方法を使うことができます.Node上のnodeName、parent Nodeなど、EventTarget上のaddEvent Listenerなどです.getElement ByIdはDcument類の原型のみでHTMLDivElementはDcument類を継承していませんので、divはgetElement ById法を使用することができません.getElements ByTagNameは、Dcument類の原型にもElement類の原型にありますので、divとdocumentは、getElementメソッドを使用することができます.その他同理
まとめ:

    DOM      ，  getElementById() querySelector()          DOM    ，         。
getElementXXX     ，    Id    ，         ，         DOM  ，     ， ：document.getElementsByClassName(“box”)[0] =>  class box          DOM  。
querySelector() querySelectorAll()        ：
  ：              
  ：     class      ，  querySelector()          class box   ， querySelectorAll()      class box     。