JS中获取DOM元素的方法

摘要

用过JavaScript(简称JS)的人,对于用原生获取元素的方法肯定有所了解。今天,为大家详细讲解一下JS中那些获取DOM元素的方法。

在编写原生JS的过程中,常见获取DOM元素的方法有4种:分别是通过id、通过标签名、通过name、通过class。

用过JavaScript(简称JS)的人,对于用原生获取元素的方法肯定有所了解。今天,为大家详细讲解一下JS中那些获取DOM元素的方法

在编写原生JS的过程中,常见获取DOM元素的方法有4种:分别是通过id、通过标签名、通过name、通过class。

1、通过id,即getElementById()方法:

该方法返回一个与之对应的id属性节点对象。它是document对象特有的方法,只能通过document来调用该方法。

  1. document.getElementById(); // 使用过程中请注意区分大小写

注:理论上,一个页面中同一个id只允许出现一次。实际开发过程中,由于一些开发人员的粗心大意,往往会出现一个页面中包含多个相同id元素的情况。这种不规范的写法虽然浏览器不会报错,但存在一定隐患。比如通过id获取元素时,尽管页面中有多个相同的id元素,该方法也会按照先序遍历的原则,只返回页面中的第一个指定元素。

2、通过标签名,即getElementsByTagName()方法:

该方法返回一个HTMLCollection集合,集合中的每个对象分别对应着文档里给定标签的元素。它不是document对象特有的方法,因此可以被其它单一对象使用,用来获取该对象下面的DOM元素。

  1. obj.getElementsByTagName(); // 使用过程中请注意区分大小写

注:因为该方法返回的是一个HTMLCollection集合,即使该集合里有且只有一个对象,其HTMLCollection集合的属性也不会被改变,所以使用的过程中一定要注意。

3、通过name,即getElementsByName()方法:

该方法返回一个NodeList集合,集合中的每个对象分别对应着文档里给定name的元素。它是document对象特有的方法,只能通过document来调用该方法。

  1. document.getElementsByName(); // 使用过程中请注意区分大小写

注:因为该方法返回的是一个NodeList集合,即使该集合里有且只有一个对象,其NodeList集合的属性也不会被改变,所以使用的过程中一定要注意。为form、img、iframe、applet、embed、object元素设置name属性时,会自动在document对象中创建以该name属性值命名的属性。所以可以通过document.name引用对应的DOM对象。

4、通过class,即getElementsByClassName()方法:

该方法返回一个HTMLCollection集合,集合中的每个对象分别对应着文档里给定的class元素。它不是document对象特有的方法,因此可以被其它单一对象使用,用来获取该对象下面的DOM元素。

  1. obj.getElementsByClassName(); // 使用过程中请注意区分大小写

注:因为该方法返回的是一个HTMLCollection集合,即使该集合里有且只有一个对象,其HTMLCollection集合的属性也不会被改变,所以使用的过程中一定要注意。使用该方法时,可以同时放多个class(class名称不区分先后顺序),只需要以“空格”隔开即可,如:obj.getElementsByClassName('class1 class2')将选取obj对象中同时应用了class1和class2样式的元素。

5、通过H5新增的两种方法:

随着html5的出现,JS中新增加了如下两种获取DOM元素的方法(参数为CSS选择器)。

  1. obj.querySelector(); // 使用过程中请注意区分大小写

该方法返回一个与之对应的节点对象。按照先序遍历的原则,使用参数提供的CSS选择器进行查找,并返回第一个满足条件的DOM元素。

  1. obj.querySelectorAll(); // 使用过程中请注意区分大小写

该方法返回一个NodeList集合,即使该集合里有且只有一个对象,其NodeList集合的属性也不会被改变,所以使用的过程中一定要注意。

注:新增的这两种方法都不是document对象特有的方法,因此可以被其它单一对象使用,用来获取该对象下面的DOM元素。

6、通过window,即window[]方法:

这是笔者在阅读课外书箱时看到的一种方法,这种方法有一定的局限性。笔者通过测试,发现好像只能用在具有id属性的元素上。因此,window[]方法获取的也是单一DOM元素。

  1. window['box']; // 使用过程中请注意区分大小写,此处box对应你要获取的元素id

注:window[]方法获取的元素如果不存在,将返回undefined。使用window获取元素的时候,笔者建议放在window.onload中,否则可能会出现要获取的元素明明存在却返回undefined的情况。

对于使用window获取id元素,笔者在网上没有找到相关资料,所以建议大家工作中尽量少用。当然,如果你知道其中的原委,欢迎留言解惑。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: