几种获取dom元素的方法 - 极悦
首页 课程 师资 教程 报名

几种获取dom元素的方法

  • 2022-08-04 10:12:37
  • 901次 极悦

获取dom元素的方法有哪些?极悦小编来告诉大家。

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

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

document.querySelectorAll('id名')

2.querySelector()

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

document.querySelector('选择器')

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

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

document.getElementsByClassName('类名')

4.querySelectorAll()

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

document.querySelectorAll('选择器')

5.getElementsByTagName

注意:getElementsByTagName()返回的是一个集合

document.getElementsByTagName('标签名')

6.getElementsByName

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

document.getElementsByClassName('name名称')

总结:

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

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

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

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

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

选你想看

你适合学Java吗?4大专业测评方法

代码逻辑 吸收能力 技术学习能力 综合素质

先测评确定适合在学习

在线申请免费测试名额
价值1998元实验班免费学
姓名
手机
提交