JavaScript 浏览器API 使用document对象获取HTML元素

document内置元素成员

document对象有一些预置元素成员，可以直接定位到该元素，包括：

• document.head： head元素
• document.body： body元素
• document.title： 文档标题
• document.images：文档中的img元素组成的类数组
• document.links：文档中的a元素组成的类数组

document.getElementById()

document.getElementById()方法返回指定id值的元素，由于id是唯一的，因此返回的是一个元素对象。如下示例得到一个id值为title的元素。注意，不要在id值前面加 # 。

const element1 = document.getElementById('title')

document.querySelector()

document.querySelector()返回一个Element对象，表示找到的第一个节点。下面的例子中，样式包含title的元素可能有多个，但该方法只返回找到的第一个。

const element1 = document.querySelector('.title')

document.querySelectorAll()

document.querySelectorAll()方法返回Element对象数组，表示所有找到的节点组成的类数组对象。下面的例子中，样式包含title的元素可能有多个，该方法找到所有匹配的元素并返回一个类数组。

const elements = document.querySelectorAll('.title')
console.log(elements.length)

document.getElementsByTagName()

document.getElementsByTagName()方法通过元素标签查找元素，一般会找到多个元素，返回的结果是HTMLElement对象组成的集合。例如如下代码返回所有div元素的集合。

const divs = document.getElementsByTagName('div')
console.log(divs.length)

getElementsByClassName()

getElementsByClassName()方法返回指定class值的元素对象，无论找到0个、1个还是多个，始终返回HTMLCollection []，这是一个类数组对象。

值得说明的是，getElement 系列方法比较古老，已经被querySelector系列方法替代，实际中应该优先使用querySelector()和querySelectorAll()两种方法。