JS获取DOM的几种方法

JS获取DOM和几种方法

通过ID获取（getElementById）

通过name属性（getElementsByName）

通过标签名（getElementsByTagName）

通过类名（getElementsByClassName）

获取html的方法（document.documentElement）

获取body的方法（document.body）

通过选择器获取一个元素（querySelector）

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

下面依次讲解：

1.通过ID获取（getElementById）

<div id="id1"></div>

<script>

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

</script>

上下文必须是document。

必须传参数，参数是string类型，是获取元素的id。

返回值只获取到一个元素，没有找到返回null。

2.通过name属性（getElementsByName）

<div id="box">

    <input type="text" name="user" />

</div>

<script>

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

</script>

只有含有name属性的元素(表单元素)才能通过name属性获取 

上下文必须是document。

必须传参数，参数是是获取元素的name属性。

返回值是一个类数组，没有找到返回空数组

3.通过标签名（getElementsByTagName）

<div id="box"> 

<p>段落A</p>

<p>段落B</p> 

<p>段落C</p> 

<p>段落D</p>

<p>段落E</p> 

<p>段落F</p>

</div> 

<script>

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

</script>

该方法返回的也是一个集合。

4.通过类名（getElementsByClassName）

<div class="box">

</div>

<div class="box">

</div> 

<script>

    let boxCollection= document.getElementsByClassName("box");

    let box1 = boxList[0];

    let box2 = boxList[1];

</script>

getElementsByClassName()括号中的不需要在前面加 “.” ，因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件

IE8以及以前版本不兼容

5.获取html的方法（document.documentElement）

    document.documentElement是专门获取html这个标签的。

6.获取body的方法（document.body）

    document.body是专门获取body这个标签的。

7.通过选择器获取一个元素（querySelector）

<div id="id1"></div>

<script>

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

</script>

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

不兼容IE7以及以前版本

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

<div class="box">boxA</div>

<div class="box">boxB</div> 

<div class="box">boxC</div> 

<div class="box">boxD</div> 

<div class="box">boxE</div> 

<script>

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

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

</script>

不兼容IE7

querySelector()和querySelectorAll()方法括号中的取值都是选择器。

当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

DOM元素的继承关系

HTMLDivElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > EventTarget

他们相同的继承关系是Node和EventTarget，也就是说他们都可以使用Node和EventTarget上的方法。

如Node上的nodeName、parentNode等，和EventTarget上的addEventListener等。

getElementById只在Document类的原型上，HTMLDivElement 没有继承Document类，所以div不能使用getElementById方法。

getElementsByTagName即在Document类的原型上也在Element类的原型上，所以div和document都可以使用getElementsByTagName方法。

其它同理。

总结：

所有获取DOM对象的方法中，只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身，可直接为其绑定事件。

getElementXXX类型的方法，除了通过Id获取元素，其他都返回一个集合，如果需要取到具体的DOM元素，需要加索引，如：document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。

querySelector()与querySelectorAll()两者的联系与区别：

联系： 两者括号中的取值都是选择器

区别： 当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

©著作权归作者所有：来自51CTO博客作者yhyang的原创作品，如需转载，请注明出处，否则将追究法律责任