选择符 API
querySelector( CSS选择符 )：返回与该模式匹配的第一个元素，若没有找到匹配元素则返回null；通过Document类型调用querySelector( )方法时，会在文档元素的范围内查找匹配的元素，而通过Element类型调用querySelector( )方法时，只会在该元素后代元素的范围内查找匹配的元素。
querySelectorAll( CSS选择符 )：返回的是所有匹配元素而不仅仅是一个元素，这个方法返回的是一个NodeList的实例，且返回的是带有所有属性和方法的NodeList，而且底层实现则类似与一组元素的快照，而非不断对文档进行搜索的动态查询。
matchesSelector( CSS选择符 )：如果调用元素与该选择符匹配，返回true；否则，返回false。
元素遍历
对于元素间的空格，IE9及之前的版本不会返回文本节点，而其他的所有浏览器都会返回文本节点，为了弥补这一差异，Element Traversal 规范新定义了一组属性,如下：
childElementCount：返回子元素(不包括文本节点和注释)的个数；
firstElementChild：指向第一个子元素；firstChild的元素版；
lastElementChild：指向最后一个子元素；lastChild的元素版；
previousElementSibling：指向前一个同辈元素；previousSibling的元素版；
nextElementSibling：指向后一个同辈元素；nextSibling的元素版；
利用这些属性，可以不必担心空白文本节点。
HTML5
1、与类相关的扩充
getElementsByClassName( 一个或多个类名的字符串 )：返回带有指定类的所有元素的NodeList，传入多个类名时，类名的先后顺序不重要。调用该方法时，只有位于调用元素子树中的元素才会返回。
classList 属性：HTML5新增操作类名的方式，包含下面四个方法：
add ( value )：将给定的字符串值添加到列表中，如果值已经存在，就不添加了。
contains ( value )：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove( value )：从列表中删除给定的字符串。
toggle ( value )：如果列表中已经存在给定的值，删除它，如果列表中没有给定的值，添加它。
2、焦点管理
HTML5添加了辅助管理DOM焦点的功能
document.activeElement属性：始终会引用DOM中当前获得了焦点的元素；默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用，文档加载期间，document.activeElement的值为null。
focus( )方法：使用该方法获取焦点；
document.hasFocus( )方法：用于确定文档是否获得了焦点。
3、HTMLDocument的变化
document.readyState 属性：用来实现一个指示文档已经加载完成的指示器，loading表示正在加载文档；complete表示已经加载完文档；
docuemnt.compatMode属性：用于检测页面的兼容模式，CSS1Compat表示标准模式；BackCompat表示混杂模式
4、字符集属性
charset 属性：表示文档中实际使用的字符集；
defaultCharset 属性：表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么，如果文档没有使用默认的字符集，那charset和defaultCharset属性的值可能会不一样。
5、自定义数据属性
HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。
可以通过元素的dataset属性来访问自定义属性的值，如取得自定义属性的值：var appId = div.dataset.appId
6、插入标记
innerHTML属性：在读模式下，innerHTML属性返回与调用元素的所欲有子节点(包括元素、注释和文本节点)对应的HTML标记，在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
不支持innerHTML的元素有：<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<tr>
outerHTML属性：在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签，在写模式下，outerHTML会根据给定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
insertAdjacentHTML( 插入的位置，要插入的HTML文本 )：
第一个参数必须是下列值之一：
beforebegin：在当前元素之前插入一个紧邻的同辈元素；
afterbegin：在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
beforeend：在当前元素之下插入一个新的子元素或者在最后一个子元素再插入新的子元素；
afterend：再当前元素之后插入一个紧邻的同辈元素；
需注意的点是：在使用innerHTML、outerHTML属性和insertAdjacentHTML( )方法时，最好先手工删除要被替换的元素的所有事件处理程序和JavaScript对象属性。同时要将设置innerHTML和outHTML的次数控制再合理的范围内，这样可以减少带来的性能损失。
7、scrollIntoView( ) 方法
scrollIntoView( )可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中，如果给这个方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能齐平，传入false，调用元素会尽可能全部出现在视口中(可能的话，调用元素的底部会与视口顶部平齐)不过顶部不一定齐平。
<meta>标签设置文档模式
contains( )方法：用于确认某个节点是不是另一个节点的后代，返回true/false。
插入文本
innerText属性与outerText属性与innerHTML和outerHTML属性类似
滚动
scrollIntoViewIfNeeded( alignCenter )：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，则方法什么都不处理，如果将可选的alignCenter参数设置为true，则表示尽量将元素显示在视口的中部（垂直方向）；
scrollByLines( lineCount )：将元素的内容滚动指定的行高，lineCount值可以时正值也可以是负值。
scrollByPages( pageCount )：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。
需要注意的是，scrollIntoView()和scrollIntoViewIfNeeded()的作用对象是元素的容器，而scrollByLines()和scrollByPages()影响的则是元素自身。
网友评论