Document 对象常用六种方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回对拥有指定id的第一个对象的引用 |
| getElementsByName() | 返回带有指定名称的对象集合 |
| getElementsByClassName() | 返回文档中所有指定类名的元素集合，作为NodeList对象 |
| getElementsByTagName() | 返回带有指定标签名的对象集合 |
| querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
| querySelectorAll() | document.querySelectorAll()是HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
1.getElementByID()
document.getElementById("demo");
定义和用法：
- 如果没有指定ID的元素则返回第一个；
- 如果存在多个指定的ID的元素则返回第一个；
- 如果需要查找到那些没有ID的元素，可以通过CSS选择器使用querySelector()
2.getElementByName()
document.getElementsByName(name)
定义和用法：
- 该方法与geteElementById()方法相似，但是它查询元素的name属性，而不是id属性
- 所有getElementByName()方法返回的是元素的数组，而不是一个元素
3.getElementByClassName()
document.getElementsByClassName(classname);
定义和用法：
- NodeList 对象,表示指定类名的元素集合，元素在集合中的顺序以其在代码中出现次序排序
- 多个类名使用空格分隔，如"test demo"
*你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
实例
查看 <div> 元素中有多少个 class="child" 的元素 (使用 NodeList 的 length 属性):
var x = document.getElementById("myDIV").getElementsByClassName("child").length;
x 输出结果为:
3
4.getElementsByTagName()
document.getElementdByTagName("p");
定义和用法：
- 参数值" "返回文档的所有元素
- 传递给 getElementsByTagName() 方法的字符串可以不区分大小写
例： document.getElementsByTagName("input")
5.querySelector()
document.querySelector(CSS selectors)
定义和用法：
- querySelector()方法仅仅返回匹配指定选择器的第一个元素
- 多个选择器，使用逗号隔开，返回一个匹配的元素
实例：
假定你选择了两个选择器: <h2> 和 <h3> 元素。
以下代码将为文档的第一个 <h2> 元素添加背景颜色：
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2, h3").style.backgroundColor = "red";
6.querySelectorAll()
elementList = document.querySelectAll(selectors);
定义和用法：
- querySelectorAll()方法返回文档中匹配指定CSS选择器的所有元素，返回NodeList对象
- NodeList对象表示节点的集合。可以通过索引访问，索引值从0开始
- elementList是一个静态的NodeList类型的对象
- selectors是一个由逗号连接的包含一个或多个CSS选择器的字符串
参考文章：
1129
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
