铭哥和佩佩的博客

铭哥和佩佩的博客分享Python、PHP、JavaScript、HTML5、CSS3等各种知识

JavaScript获取DOM元素的方式

JavaScript可以通过多种方式来获取DOM元素对象,下面我们做一番总结

1 通过ID选取元素

1.1 document.getElementById(idName)

<div id="box"></div>
document.getElementById('box');

1.2 id属性可自动成为被脚本访问的全局变量

<div id="box"></div>
// 会自动生成名为 box 的全局变量,执行 id 为 box 的元素; 无需额外获取
console.log(box);   //<div id="box">...</div>

2 通过Name属性值选取元素

2.1 document.getElementsByName(attrValue)

  • 该方法返回NodeList对象,会返回 name 属性等于某个值的所有元素
  • 注意 IE9+ 以及 其他非IE浏览器, 认为所有的元素都有 name 属性
  • 注意 IE8- 认为只有部分元素有 name 属性, form、所有的表单控件元素、img、iframe、embed、object 等

2.2 docuemnt会为某些元素创建以元素name属性值为名字的属性

document.myelemnt;  // 会获取 name 数值型为 myelement 的 form 元素 或者 img 元素
document.myform;    // 会获取 name 数值型为 myform 的 form 元素 或者 img 元素
  • 此种方式可以获取 form 元素 或 img 元素
  • 如果 name 属性值符合的只有一个元素,就返回改元素
  • 如果 name 属性值符合的有多多个元素,就返回所有满足条件元素组成的数组

3 通过标签名选取元素

3.1 getElementsByTagName(tagName)

docuemnt.getElementsByTagName(tagName);  // 从整个文档中获取指定的元
element.getElementsByTagName(tagName);   // 从 element 元素的后代元素中获取指定元素
  • 改方法返回数组
  • 如果满足条件的元素只有一个,仍然返回数组

3.2 docuemnt会为某些元素创建以元素标签名为名字的属性

docuemnt.body;               // body 元素
document.documentElement;    // 根元素,也就是html元素
document.head;               // head 元素
document.images;             // 所有的 img 元素的引用
document.links;              // 所有的超链接的引用 a[href] 元素 或 area 元素
docuemnt.anchors;            // 所有的锚点的引用 a[name]
docuemnt.formsl              // 所有 form 表单的引用

4 通过class属性选择元素

该方法需要 IE9 以及以上版本和其他非IE浏览器支持

document.getElementsByClassName(className);   // 从整个文档中获取指定的元素
element.getElementsByClassName(classNmae);    // 从 element 元素的后代元素中获取指定元素

5 通过CSS选择器选择元素

该方法需要 IE8 以及以上版本和其他非IE浏览器支持;
由于 IE8- 的占有率逐年减少,我们强烈推荐这种方式来获取元素;

document.querySelectorAll();     //  从整个文档中获取所有满足条件的元素
element.querySelectorAll();      //  从 element 元素的后代元素中中获取所有满足条件的元素
document.querySelector();        // 从整个文档中获取满足条件的第一个元素
element.querySelector();         // 从 element 元素的后代元素中中获取满足条件的第一个元素

6 获取所有的元

document.all

改属性返回文档中的所有元素组成的数组。

none

添加新评论