前端常见问题以及处理方式 - - - (七) 获取dom节点方法

提示：前端查漏补缺，仅代表个人观点，不接受任何批评

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、获取dom节点的方法

1.querySelector()

注意：querySelector()方法括号中的值是元素的选择器，此方法直接返回DOM对象本身。

代码如下（示例）：

document.querySelector('选择器')

---

2.querySelectorAll()

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

代码如下（示例）：

document.querySelectorAll('选择器')

---

3.getElementById()

getElementById() 返回匹配指定选择器的第一个元素(获取不到为 null)

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

代码如下（示例）：

document.querySelectorAll('id名')

---

4.getElementsByClassName

返回匹配指定选择器的第一个元素(获取不到为null)

注意:

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

代码如下（示例）：

document.getElementsByClassName('类名')

---

5.getElementsByName

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

代码如下（示例）：

document.getElementsByClassName('name名称')

---

6.getElementsByTagName

getElementsByTagName()返回的是一个集合

代码如下（示例）：

document.getElementsByTagName('标签名')

---

总结

提示：这里对文章进行总结：

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

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

3、querySelector()与querySelectorAll()两者的联系与区别：
联系： 两者括号中的取值都是选择器
区别： 当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class的元素，而querySelectorAll()获取到了所有class相等的元素集合