一、选择符API
Selectors API（www.w3.org/TR/selectors-api/）是由W3C 发起制定的一个标准，致力于让浏览器原生支持CSS 查询。所有实现这一功能的JavaScript 库都会写一个基础的CSS 解析器，然后再使用已有的DOM 方法查询文档并找到匹配的节点。
1、querySelector()方法
querySelector()方法接收一个CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
var obody = document.querySelector("body");
var myDiv = document.querySelector("#myDiv");
var selected = document.querySelector(".selected");
var img = document.body.querySelector("img.button");
2、querySelectorAll()方法
querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList 的实例。
3、matchesSelector()方法
这个方法接收一个参数，即CSS 选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。
二、遍历元素
三、HTML5
1 、与类相关的扩充
·getElementsByClassName()支持getElementsByClassName()方法的浏览器有**IE 9+**、Firefox 3+、Safari 3.1+、Chrome 和Opera 9.5+。classList属性`
HTML5 新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList 属性。这个classList 属性是新集合类型DOMTokenList 的实例。与其他DOM 集合类似，DOMTokenList 有一个表示自己包含多少元素的length 属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
•contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
•remove(value)：从列表中删除给定的字符串。
• toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
2、焦点管理
元素获得焦点的方式有页面加载、用户输入（通常是通过按Tab 键）和在代码中调用focus()方法。
document.activeElement属性 hasFocus()方法
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button);
alert(document.hasFocus());
注意：默认情况下，文档刚刚加载完成时，document.activeElement 中保存的是document.body 元素的引用。文档加载期间，document.activeElement 的值为null。
3、HTMLDocument的变化
readyState属性
有两个值：
- loading,正在加载文档
- complete，已经加载完文档
if(document.readyState === "complete"){
}
compatMode 兼容模式
自从IE6 开始区分渲染页面的模式是标准的还是混杂的，检测页面的兼容模式就成为浏览器的必要功能。
head属性
HTML5新增的document.head属性
4、字符集属性
document.charset
document.defaultCharset
5、自定义数据属性
HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myDiv" data-appid="12345" data-myname="Tom"></div>
<script>
var div = document.getElementById("myDiv");
var appId = div.dataset.appid;
var myName = div.dataset.myname;
div.dataset.appid = 3434;
div.dataset.myname = "jerry";
if(div.dataset.myname){
alert("hello, " + div.dataset.myname);
}
</script>
</body>
</html>
6、插入标记
innerHTML属性
outerHTML属性
7、scrollIntoView()方法
四、专有方法
children属性
个属性是HTMLCollection 的实例，只包含元素中同样还是元素的子节点。除此之外，children 属性与childNodes 没有什么区别，即在元素只包含元素子节点时，这两个属性的值相同。
contains()方法
alert(document.documentElement.contains(document.body)); //true
innerText
通过innertText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点
outerText
除了作用范围扩大到了包含调用它的节点之外，outerText 与innerText 基本上没有多大区别。
网友评论