#Selector API
querySelector()
接受一个css选择符，返回第一个匹配的元素

// 在整个文档范围查找
var divEl = document.querySelector("div");
// 在某个元素后代范围内查找
divEl.querySelector("div");

querySelectorAll()
接受一个css选择符，返回第一个NodeList实例(静态，非实时)

var list = document.querySelectorAll("div");

matchesSelector()

接受一个css选择符，如果调用元素与该css选择符匹配，返回true，否则返回false

#元素遍历
childElementCount()返回子元素的个数（不包括文本节点和注释）
firstElementChild()指向第一个子元素（ELement类型）
lastElementChild()指向最后一个子元素（ELement类型）
previousElementSibling()指向前一个同胞元素（ELement类型）
nextElementSibling()指向后一个同胞元素（ELement类型）

/**
<ul id ="myList">
  <li>1</li>
  <li>2</li>
</ul>
*/
var list = document.querySelector("#myList");
console.log(list.childNodes.length);//5
console.log(list.childElementCount);//2

HTML5

HTML5新增了很多API

###与类相关
1.
document.getElementsByClassNameName();

classList属性
HTML5新增了操作类名的方式。为所有的元素添加classList属性。
classList是DOMTockenList的实例
add(value)将给定的值添加到列表中，如果值已存在，就不添加。
contains()表示列表中是否存在指定的值
remove()从列表中删除指定的值
toggle()如果列表中存在，删除它，否则，添加它

###焦点管理
activeElement属性，改属性始终引用DOM树中的获得焦点的元素。元素获得焦点的方式有页面加载，用户输入，在代码中调用focus()
document.hasFocus()确定文档是否获得焦点

###HTMLDocument的变化
1.document.readyState
该属性有两个可能的值，
loading正在加载文档
complete文档加载完成

2.document.compatMode属性，表示浏览器渲染页面的模式
标准模式值为"CSS1Compat"
混杂模式值为"backCompat"

3.head属性

4.字符集属性
document.charset文档实际使用的字符集
document.defaultCharset浏览器默认字符集

5.自定义属性
data-
dataset属性的值是一个DOMStringMap的一个实例。包含键值对。在映射中，data-name形式自定义属性有对应的属性。

//<div class="mod-relation"  data-version="1.0.0"></div>

//访问自定义属性
document.querySelector(".mod-relation").dataset.version;//1.0.0

//修改自定义属性
document.querySelector(".mod-relation").dataset.version = 5;

6.插入标记

innerHTML属性
返回内容包含描述所有元素后代的序列化HTML代码的字符串
outerHTML属性
获取元素（包括其后代）的序列化HTML片段。它也可以设置为用从给定字符串解析的节点替换元素。

/**
<div id="content">
xixi&
</div>
*/

var con = document.querySelector("#content");
console.log(con.innerHTML);//xixi&amp;
con.innerHTML = "<h1>inner</h1>";
console.log(con.innerHTML);//a &amp; b<h1>innerHTML</h1>

console.log(con.outerHTML);//<div id="content">a &amp; b<h1>innerHTML</h1></div>

insertAdjacentHTML()
将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。

/* 
html-----------
<div id="outer">
  <div id="content">inner</div>
</div>

css------------
#outer {
  border: 1px solid green;
}

#content {
  border:1px solid red;
}
*/

//在该元素之前插入一个同胞元素
con.insertAdjacentHTML("beforebegin","<p>beforeagain</p>");

//在该元素之前插入一个子元素
con.insertAdjacentHTML("afterbegin","<p>afterbegin</p>");

//在该元素之后插入一个子元素
con.insertAdjacentHTML("beforeend","<p>beforeend</p>");

//在该元素之后插入一个同胞元素
con.insertAdjacentHTML("afterend","<p>afterend</p>");

注意： beforebegin和afterend位置,仅在节点在树中且节点具有一个parent元素时工作.

scrollIntoView()
scrollIntoView()可以在任何函数上调用，参数为boolean类型，传入参数为true，使得元素顶部尽可能与窗口顶部对齐。传入参数为false，使得元素顶部尽可能与窗口底部对齐。

`contains()
判断某个节点是不是某个节点的后代。用父节点调用contains(）方法, 传入要检测的节点。

document.querySelector("html").contains(document.head);//true
document.body.contains(document.head);//false

学习笔记13--DOM扩展

HTML5