1. querySelector() 方法
querySelector()方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。
//取得 body 元素 var body = document.querySelector("body"); //取得 ID 为"myDiv"的元素 var myDiv = document.querySelector("#myDiv"); //取得类为"selected"的第一个元素 var selected = document.querySelector(".selected"); //取得类为"button"的第一个图像元素 var img = document.body.querySelector("img.button");
2. querySelectorAll()方法
querySelectorAll()方法接收的参数与 querySelector()方法一样，都是一个 CSS 选择符，但 返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList 的实例。
只要传给 querySelectorAll()方法的 CSS 选择符有效，该方法都会返回一个 NodeList 对象， 而不管找到多少匹配的元素。如果没有找到匹配的元素，NodeList 就是空的。
//取得某<div>中的所有<em>元素(类似于 getElementsByTagName("em")) var ems = document.getElementById("myDiv").querySelectorAll("em"); //取得类为"selected"的所有元素 var selecteds = document.querySelectorAll(".selected"); //取得所有<p>元素中的所有<strong>元素 var strongs = document.querySelectorAll("p strong");
3. matchesSelector()方法
这个方法接收 一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true;否则，返回 false。
if (document.body.matchesSelector("body.page1")){ //true }
4. 元素遍历
对于元素间的空格，IE9 及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样， 就导致了在使用 childNodes 和 firstChild 等属性时的行为不一致。为了弥补这一差异，而同时又保 持 DOM 规范不变，Element Traversal 规范(www.w3.org/TR/ElementTraversal/)新定义了一组属性。
Element Traversal API 为 DOM 元素添加了以下 5 个属性。
(1) childElementCount 返回子元素(不包括文本节点和注释)的个数。
(2) firstElementChild 指向第一个子元素;firstChild 的元素版。
(3) lastElementChild 指向最后一个子元素;lastChild 的元素版。
(4) previousElementSibling 指向前一个同辈元素;previousSibling 的元素版。
(5) nextElementSibling 指向后一个同辈元素;nextSibling 的元素版。
5. classList 属性
在操作类名时，需要通过 className 属性添加、删除和替换类名。因为 className 中是一个字 符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。HTML5 新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加 classList 属性。如下：
（1）add(value) 将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
（2）contains(value) 表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
（3） remove(value) 从列表中删除给定的字符串。
（4） toggle(value) 如果列表中已经存在给定的值，删除它;如果列表中没有给定的值，添加它。
var $div = document.querySelector('#test'); $div.classList.add('list');
6. 焦点管理
HTML5 也添加了辅助管理 DOM 焦点的功能。首先就是 document.activeElement 属性，这个 属性始终会引用 DOM 中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入(通常是 通过按 Tab 键)和在代码中调用 focus()方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="input" />
</body>
<script type="text/javascript">
var $input = document.getElementById("input");
$input.focus();
console.log(document.activeElement === $input); //true
</script>
</html>
7. HTMLDocument的变化
(1) readyState 属性
IE4 最早为 document 对象引入了 readyState 属性。然后，其他浏览器也都陆续添加这个属性， 最终 HTML5 把这个属性纳入了标准当中。
Document 的 readyState 属性有两个可能的值:
loading // 正在加载文档; complete // 已经加载完文档。
使用 document.readyState 的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器。在这个属性得到广泛支持之前，要实现这样一个指示器，必须借助 onload 事件处理程序设置一 个标签，表明文档已经加载完毕。
if (document.readyState == "complete"){ //执行操作 }
(2) 兼容模式
自从 IE6 开始区分渲染页面的模式是标准的还是混杂的，检测页面的兼容模式就成为浏览器的必要功能。IE 为此给 document 添加了一个名为 compatMode 的属性，这个属性就是为了告诉开发人员浏 览器采用了哪种渲染模式。就像下面例子中所展示的那样，在标准模式下，document.compatMode 的 值等于"CSS1Compat"，而在混杂模式下，document.compatMode 的值等于"BackCompat"。
if (document.compatMode == "CSS1Compat"){ alert("标准模式"); } else { alert("混杂模式"); }
（3） 自定义数据属性
HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的 811.3.5 自定义数据属性信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可。来看一个例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="input" data-name='zs'/>
</body>
<script type="text/javascript">
var $input = document.getElementById("input");
//取值
console.log($input.dataset.name); //zs
//设置值
$input.dataset.name = 'ls';
//取值
console.log($input.dataset.name); //ls
</script>
</html>
（4）插入标记
innerHTML 属性
outerHTML 属性: 替换当前节点的内容
var $div = document.getElementById("div"); var info = '<ul><li>123</li></ul>'; //替换当前的节点内的内容，包括这个操作的div $div.outerHTML = info;
insertAdjacentHTML()方法
插入标记的最后一个新增方式是 insertAdjacentHTML()方法。这个方法最早也是在 IE 中出现的， 它接收两个参数:插入位置和要插入的 HTML 文本。
第一个参数必须是下列值之一:
"beforebegin"，在当前元素之前插入一个紧邻的同辈元素;
"afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素;
"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素;
"afterend"，在当前元素之后插入一个紧邻的同辈元素。
var $div = document.getElementById("div"); var info = '<ul><li>123</li></ul>'; //替换当前的节点内的内容，包括这个操作的div $div.insertAdjacentHTML('beforebegin', info);
内存与性能问题
替换子节点可能会导致浏览器的内存占用问题，尤其是在 IE 中，问题更加明显。在删除带有事件处理程序或引用了其他 JavaScript 对象子树时，就有可能导致内存占用问题。
假设 某个元素有一个事件处理程序(或者引用了一个 JavaScript 对象作为属性)，在使用前述某个属性将该元 素从文档树中删除后，元素与事件处理程序(或 JavaScript 对象)之间的绑定关系在内存中并没有一并 删除。如果这种情况频繁出现，页面占用的内存数量就会明显增加。因此，在使用 innerHTML、 outerHTML 属性和 insertAdjacentHTML()方法时，最好先手工删除要被替换的元素的所有事件处理 程序和 JavaScript 对象属性
for (var i=0, len=values.length; i < len; i++){ ul.innerHTML += "<li>" + values[i] + "</li>"; //要避免这种频繁操作!! }
这种每次循环都设置一次 innerHTML 的做法效率很低。而且，每次循环还要从 innerHTML 中读 取一次信息，就意味着每次循环要访问两次 innerHTML。最好的做法是单独构建字符串，然后再一次 性地将结果字符串赋值给 innerHTML。
(5) 插入文本
innerText 属性
outerText 属性
(6) 滚动
scrollIntoView() 可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用 元素就可以出现在视口中。如果给这个方法传入 true 作为参数，或者不传入任何参数，那么窗口滚动 之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入 false 作为参数，调用元素会尽可能全部 出现在视口中，(可能的话，调用元素的底部会与视口顶部平齐。)
scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视口中不可见的情况下，才滚 动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。 如果将可选的 alignCenter 参数设置为 true，则表示尽量将元素显示在视口中部(垂直方向)。 10 Safari 和 Chrome 实现了这个方法。
scrollByLines(lineCount) 将元素的内容滚动指定的行高，lineCount 值可以是正值， 也可以是负值。Safari 和 Chrome 实现了这个方法。
scrollByPages(pageCount) 将元素的内容滚动指定的页面高度，具体高度由元素的高度决 定。Safari 和 Chrome 实现了这个方法。
ps: scrollIntoView()和scrollIntoViewIfNeeded()的作用对象是元素的容器，而 scrollByLines()和 scrollByPages()影响的则是元素自身。scrollIntoView()是唯一一个所有浏览器都支持的方法
var $div = document.querySelector("#div ul"); document.getElementById('test').onclick = function(){ $div.scrollIntoView(true); }
8. DOM 样式属性和方法
(1). DOM 样式属性和方法
“DOM2 级样式”规范还为 style 对象定义了一些属性和方法。这些属性和方法在提供元素的 style特性值的同时，也可以修改样式。下面列出了这些属性和方法。
-
cssText:如前所述，通过它能够访问到 style 特性中的 CSS 代码。
-
length:应用给元素的 CSS 属性的数量。
-
parentRule:表示 CSS 信息的 CSSRule 对象。本节后面将讨论 CSSRule 类型。
-
getPropertyCSSValue(propertyName):返回包含给定属性值的 CSSValue 对象。
-
getPropertyPriority(propertyName):如果给定的属性使用了!important 设置，则返回"important";否则，返回空字符串。
-
getPropertyValue(propertyName):返回给定属性的字符串值。
-
item(index):返回给定位置的 CSS 属性的名称。
-
removeProperty(propertyName):从样式中删除给定属性。
-
setProperty(propertyName,value,priority):将给定属性设置为相应的值，并加上优先权标志("important"或者一个空字符串)。
var $div = document.querySelector("#div"); $div.style.cssText = 'height:800px;background:red'; console.log($div.style.getPropertyValue('height')); //行内样式才生效
(2)计算的样式
DOM2 级样式”增强了 document.defaultView，提供了 getComputedStyle()方法。这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例 如":after")。如果不需要伪元素信息，第二个参数可以是 null。getComputedStyle()方法返回一 个 CSSStyleDeclaration 对象(与 style 属性的类型相同)，其中包含当前元素的所有计算的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
500px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
<script type="text/javascript">
var $div = document.querySelector("#div");
$div.style.cssText = 'height:800px;background-color:red';
var $sty = document.defaultView.getComputedStyle($div, null);
console.log($sty.width); //500px
console.log($sty.backgroundColor); //rgb(255, 0, 0)
</script>
</html>