Document 对象供应了属性和要领完成定位页面元素功用，这也是 DOM 的标准范例中 Document 对象的重要运用之一。
定位页面元素要领
现在 Document 对象供应完成定位页面元素的要领具有以下几种:
getElementById()要领：经由过程页面元素的 id 属性值定位元素。
getElementsByName()要领：经由过程页面元素的 name 属性值定位元素。
getElementsByTagName()要领：经由过程页面元素的元素名定位元素。
getElementsByClassName()要领：经由过程页面元素的 class 属性值定位元素。
querySelector()要领：经由过程 CSS 选择器定位第一个婚配的元素。
querySelectorAll()要领：经由过程 CSS 选择器定位一切婚配的元素。
接下来，我们就逐一举行进修。
经由过程元素的 ID 属性值定位元素
HTML 页面元素的 id 属性的特性是唯一、不可反复的，所以经由过程这类体式格局定位的 HTML 页面元素也是唯一的。
其语法花样以下:
element = document.getElementById(id);在上述语法中，id 是参数，示意所要定位元素的 id 属性值，是一个大小写敏感的字符串。element 是返回值，示意定位的元素，是一个 Element 对象。
值得注意的是: 假如 HTML 页面中不存在具有该 id 属性值的元素，则返回 null。
下面是运用 getElementById() 要领的示例代码:
var btn = document.getElementById('btn');
// 猎取定位元素的 class 属性值
var className = btn.className;
// 增加 animate 动画款式
className += ' animate';
// 将新的 class 属性值设置
btn.className = className;上述代码经由过程 getElementById() 要领定位 HTML 页面中 id 属性值为 btn 的元素，并为其元素的 class 属性增加 animate 款式。
完全示例代码请点击右侧的链接: getElementById()要领完全示例代码
经由过程元素的 name 属性值定位元素
其语法花样以下:
elements = document.getElementsByName(name);在上述语法中，name 是参数，示意所要定位元素的 name 属性值，是一个大小写敏感的字符串。elements 是返回值，示意定位元素的鸠合，是一个 NodeList 鸠合。
下面是运用 getElementsByName() 要领的示例代码:
var elems = document.getElementsByName('btn');
// 轮回遍历一切元素
for (var i=0; i<elems.length; i++) {
var elem = elems[i];
var className = elem.className;
className += ' animate';
elem.className = className;
}上述代码经由过程 getElementsByName() 要领定位 HTML 页面中 name 属性值为 btn 的元素，并遍历一切获得的元素，为其元素的 class 属性增加 animate 款式。
完全示例代码请点击右侧的链接: getElementsByName()要领完全示例代码
经由过程元素的元素名定位元素
其语法花样以下:
elements = document.getElementsByTagName(name);在上述语法中，name 是参数，示意所要定位元素的元素名，标记”*”示意一切元素。elements 是返回值，示意定位元素的鸠合，是一个 NodeList 鸠合。
下面是运用 getElementsByTagName() 要领的示例代码:
var elems = document.getElementsByTagName('button');
// 轮回遍历一切元素
for (var i=0; i<elems.length; i++) {
var elem = elems[i];
var className = elem.className;
className += ' animate';
elem.className = className;
}上述代码经由过程 getElementsByTagName() 要领定位 HTML 页面中元素名为 button 的元素，并遍历一切获得的元素，为其元素的 class 属性增加 animate 款式。
完全示例代码请点击右侧的链接: getElementsByTagName()要领完全示例代码
经由过程元素的 class 属性值定位元素
其语法花样以下:
elements = document.getElementsByClassName(names);在上述语法中，names 是参数，示意所要定位元素的 class 属性值列表，class 称号经由过程空格分开。
值得注意的是: names 参数可所以一个款式属性称号，也可所以多个款式属性称号。
elements 是返回值，示意定位元素的鸠合，是一个 NodeList 鸠合。
下面是运用 getElementsByClassName() 要领的示例代码:
var elems = document.getElementsByClassName('btn');
// 轮回遍历一切元素
for (var i=0; i<elems.length; i++) {
var elem = elems[i];
var className = elem.className;
className += ' animate';
elem.className = className;
}上述代码经由过程 getElementsByClassName() 要领定位 HTML 页面中 class 属性值为 btn 的元素，并遍历一切获得的元素，为其元素的 class 属性增加 animate 款式。
完全示例代码请点击右侧的链接: getElementsByClassName()要领完全示例代码
兼容 IE 8 及之前版本的浏览器
getElementsByClassName() 要领只支撑 IE 9 版本及以后版本的浏览器。也就是说，该要领并不支撑 IE 8 及之前版本的浏览器。
下图是差别浏览器的差别版本对 getElementsByClassName() 要领的支撑状况:
因为国内的临盆环境中，照旧存在运用 IE 8 及之前版本浏览器的状况。所以，我们须要自定义 getElementsByClassName() 要领处理浏览器的兼容问题。
function getElementsByClassName(element, names) {
}上述自定义兼容要领接收两个参数，element 参数示意挪用 getElementsByClassName() 要领的对象（现在为 Document 对象），names 参数示意所要定位元素的 class 属性值列表。
function getElementsByClassName(element, names) {
// 检测 getElementsByClassName() 是不是可用
if (element.getElementsByClassName) {
// 优先运用 W3C 范例
return element.getElementsByClassName(names);
}else {
// 工资处理 IE 8 之前版本不兼容问题
}
}这里我们要优先运用 W3C 范例的要领。所以，须要先推断当前浏览器环境是不是存在 getElementsByClassName() 要领。
假如存在，就运用底本的 getElementsByClassName() 要领。假如不存在，就运用自定义代码来完成。
function getElementsByClassName(element, names) {
// 检测 getElementsByClassName() 是不是可用
if (element.getElementsByClassName) {
// 优先运用 W3C 范例
return element.getElementsByClassName(names);
}else {
// 工资处理 IE 8 之前版本不兼容问题
// 猎取一切子女元素节点
var elements = element.getElementsByTagName('*');
// 定义空数组
var result = [];
var element, classNameStr, flag;
// 将款式称号改成数组范例
names = names.split(' ');
// 轮回遍历一切元素节点
for (var i=0; element = elements[i]; i++) {
// 猎取每一个元素节点的款式称号
classNameStr = ' ' + element.className + ' ';
// 开启开关
flag = true;
// 轮回遍历一切的款式称号
for (var j=0, name; name = names[j]; j++) {
// 推断当前元素节点的款式称号中是不是包括指定的款式称号
if (classNameStr.indexOf(' ' + name + ' ') == -1){
// 假如不包括，则封闭开关，而且完毕轮回
flag = false;
break;
}
}
// 推断当前元素节点是不是包括指定款式称号
if (flag) {
// 假如包括，则将当前元素节点增加到数组中
result.push(element);
}
}
// 返回数组(一切包括指定款式称号的元素节点)
return result;
}
}经由过程 CSS 选择器定位元素
CSS 中的选择器能够很方便地定位 HTML 页面元素，DOM 的标准范例中也供应相似的要领。
querySelector(): 定位婚配选择器的第一个元素。
querySelectorAll(): 定位婚配选择器的一切元素。
querySelector() 要领
其语法花样以下:
element = document.querySelector(selectors);在上述语法中，selectors 是参数，示意选择器，能够包括一个或多个 CSS 选择器，多个则以逗号分开。element 是返回值，示意定位元素的鸠合，婚配的第一个元素。
下面是运用 querySelector() 要领的示例代码:
var btn = document.querySelector(’#btn');
// 猎取定位元素的 class 属性值
var className = btn.className;
// 增加 animate 动画款式
className += ' animate';
// 将新的 class 属性值设置
btn.className = className;上述代码经由过程 querySelector() 要领定位 HTML 页面中 id 属性值为 btn 的元素，并为其元素的 class 属性增加 animate 款式。
完全示例代码请点击右侧的链接: querySelector()要领完全示例代码
querySelectorAll() 要领
其语法花样以下:
elements = document.querySelectorAll(selectors);在上述语法中，selectors 是参数，示意选择器，能够包括一个或多个 CSS 选择器，多个则以逗号分开。elements 是返回值，示意定位元素的鸠合，是一个 NodeList 鸠合。
下面是运用 querySelectorAll() 要领的示例代码:
var elems = document.querySelectorAll('button');
// 轮回遍历一切元素
for (var i=0; i<elems.length; i++) {
var elem = elems[i];
var className = elem.className;
className += ' animate';
elem.className = className;
}上述代码经由过程 querySelectorAll() 要领定位 HTML 页面中元素名为 button 的元素，并遍历一切获得的元素，为其元素的 class 属性增加 animate 款式。
完全示例代码请点击右侧的链接: querySelectorAll()要领完全示例代码
节点鸠合 NodeList
NodeList 是一组元素节点的鸠合，每一个节点具有响应的索引值（从 0 最先的数字，相似于数组）。
元素节点在 NodeList 鸠合中存储的递次与它们在 HTML 页面中的递次保持一致。
NodeList 的属性 length 示意 NodeList 对象中包括的节点个数。要领 item(index) 示意返回 NodeList 对象中指定索引的节点。假如索引值越界,则返回 null。
NodeList 鸠合分为两种: 动态 NodeList 和静态 NodeList。
动态的 NodeList 鸠合
所谓动态的 NodeList 鸠合，就是假如文档中的节点树发生变化，则已存在的 NodeList 对象也可能会变化。
以下几种定位 HTML 页面元素的要领返回的都是动态的 NodeList 鸠合。
getElementsByName()要领：经由过程页面元素的 name 属性值定位元素。
getElementsByTagName()要领：经由过程页面元素的元素名定位元素。
getElementsByClassName()要领：经由过程页面元素的 class 属性值定位元素。
我们能够经由过程以下示例代码，体验动态 NodeList 鸠合的特性:
var elems = document.getElementsByTagName('button');
console.log(elems.length);// 输出 3
// 增加一个新的button按钮
var btn = document.createElement('button');
btn.setAttribute('class','button');
var text = document.createTextNode('New Button');
btn.appendChild(text);
var div = document.getElementsByClassName('button-group')[0];
div.appendChild(btn);
console.log(elems.length);// 输出 4上述代码经由过程 getElementsByTagName() 要领定位 HTML 页面中一切的 button 元素，测试打印 button 元素的个数是 3 个。
然后，我们建立一个新的 button 元素，而且将其增加到 HTML 页面中，再测试打印 button 元素的个数是 4 个。
值得注意的是: 我们在第二次测试打印 button 元素的个数时，并没有从新定位 HTML 页面中的 button 元素。
完全示例代码请点击右侧的链接: 动态 NodeList 鸠合完全示例代码
静态 NodeList 鸠合
所谓静态 NodeList 鸠合，就是对文档对象模子的任何修正都不会影响鸠合的内容。
querySelectorAll() 要领定位 HTML 页面元素所返回的 NodeList 鸠合就是静态 NodeList 鸠合。
我们能够经由过程以下示例代码，体验静态 NodeList 鸠合的特性:
var elems = document.querySelectorAll('button');
console.log(elems.length);// 输出 3
// 增加一个新的button按钮
var btn = document.createElement('button');
btn.setAttribute('class','button');
var text = document.createTextNode('New Button');
btn.appendChild(text);
var div = document.getElementsByClassName('button-group')[0];
div.appendChild(btn);
console.log(elems.length);// 输出 3上述代码经由过程 querySelectorAll() 要领定位 HTML 页面中一切的 button 元素，测试打印 button 元素的个数是 3 个。
然后，我们建立一个新的 button 元素，而且将其增加到 HTML 页面中，再测试打印 button 元素的个数照旧是 3 个。
完全示例代码请点击右侧的链接: 静态 NodeList 鸠合完全示例代码
定位页面元素属性
Document 对象也供应了一些属性，来定位 HTML 页面中一些比较特别的元素。
documentElement：猎取 HTML 页面中的
<html>元素。head：猎取 HTML 页面中的
<head>元素。title：猎取 HTML 页面中的
<title>元素。body：猎取 HTML 页面中的
<body>元素。links：猎取 HTML 页面中的一切
<a>元素。images：猎取 HTML 页面中的一切
<img>元素。
我们能够定义一个包括以上元素的 HTML 页面，然后经由过程以下示例代码举行测试:
console.log(document.documentElement);
console.log(document.head);
console.log(document.body);
console.log(document.title);
console.log(document.links);
console.log(document.images);本教程免费开源，任何人都能够免费进修、分享，以至能够举行修正。但须要说明作者及泉源，而且不能用于贸易。
本教程采纳学问同享签名-非贸易性运用-制止归纳 4.0 国际允许协定举行允许。
