原生js获取document_原生js获取DOM对象的几种方法

获取DOM元素的方法：

1.通过id获取

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

1

2

3

4

注意：getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

2. 通过class获取

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

let box1 = boxList[0];

let box2 = boxList[1];

1

2

3

4

5

6

7

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

3. 通过标签名获取

段落1

段落2

段落3

段落4

段落5

段落6

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

1

2

3

4

5

6

7

8

9

10

11

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

4. 通过name属性获取

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

1

2

3

4

5

6

返回值如下：

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

5. 通过querySelector获取

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

1

2

3

4

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

6. 通过querySelectorAll获取

box1

box2

box3

box4

box5

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

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

1

2

3

4

5

6

7

8

9

结果如下图：

注意：querySelector()和querySelectorAll()方法括号中的取值都是选择器，但从图中我们可以看出，两个方法是有区别的。当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

总结：

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

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

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

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

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

————————————————

原文链接：https://blog.youkuaiyun.com/qq_33036599/article/details/80660923