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属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

实例

查看元素中有多少个 class=”child” 的元素 (使用 NodeList 的 length 属性):

varx = document.getElementById(“myDIV”).getElementsByClassName(“child”).length;

x输出结果为:

3

4.getElementsByTagName()

document.getElementdByTagName(“p”);

定义和用法：

  • 参数值” “返回文档的所有元素
  • 传递给 getElementsByTagName() 方法的字符串可以不区分大小写

例：
document.getElementsByTagName("input")

5.querySelector()

document.querySelector(CSS selectors)

定义和用法：

  • querySelector()方法仅仅返回匹配指定选择器的第一个元素
  • 多个选择器，使用逗号隔开，返回一个匹配的元素

实例：

假定你选择了两个选择器:

和

元素。

以下代码将为文档的第一个

元素添加背景颜色：

A h2 element

A h3 element

document.querySelector(“h2, h3”).style.backgroundColor = “red”;

6.querySelectorAll()

elementList = document.querySelectAll(selectors);

定义和用法：

  • querySelectorAll()方法返回文档中匹配指定CSS选择器的所有元素，返回NodeList对象
  • NodeList对象表示节点的集合。可以通过索引访问，索引值从0开始
  • elementList是一个静态的NodeList类型的对象
  • selectors是一个由逗号连接的包含一个或多个CSS选择器的字符串

参考文章：

HTML DOM Document 对象 | 菜鸟教程