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 元素的后代元素中获取指定元素
- 改方法返回一个 HTMLCollection 对象,该对象是所有满足条件的元素组成的集合。
- 如果满足条件的元素只有一个,仍然返回只有一个成员的集合。
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
该属性返回文档中的所有元素组成的集合。
嘤嘤嘤
铭哥爱你
猜猜我是谁
铭哥么么~
铭哥,牛!
来跟我干吧
你小子可以的