1、选择器
js常用的功能就是根据css选择器与某个模式匹配的DOM元素。可以在类型Docment、DocumentFragement、Element中调用，querySelector和querySelectorAll
1、querySelector()方法
document.querySelector('body')
document.querySelector('#myDiv')
document.querySelector('.myclass')
document.querySelector('div.myclass');
let mydiv = document.querySelector('#myDiv');
mydiv.querySelector('.myclass')
会在该元素后代元素范围内查找匹配的第一个元素，没有找到返回null
2、querySelectorAll()方法
用法类似querySelector()方法，但是querySelectorAll()方法返回NodeList对象，没有找到返回NodeList就是空的。
3、matchSelector()方法
Element类型新增方法，判断调用元素是否与传入的选择符匹配，返回boolean
document.body.matchSelector('body.page1')//true 还没有被浏览器支持
document.body.msMatchSelector('body.page1')//true IE9+的写法
document.body.mozMatchSelector('body.page1')//true Firefox3.6+写法
document.body.webkitMatchSelector('body.page1')//true Chrome和Safari5+
2、元素遍历
对于元素间的空格，ie9以及之前版本不会返回文本节点，而其他浏览器都会返回文本节点。为了拟补这一差异。新定义5个属性：
let div = document.querySelector('#myDiv');
div.childElementCount //子元素个数，不包括文本节点和注释
div.firstElementChild //第一个子元素
div.lastElementChild //最后一个子元素
div.previousElementSibling //指向前一个同辈元素
div.nextElementSibling //指向后一个同辈元素
遍历某个元素的所有子元素
let child = element.firstElementChild;
while(child != element.lastElementChild){
//todo
child = element.nextElementSibling;
}
支持上面写法浏览器版本ie9+、ff3.5+、safari4+、chrome、opera10+
3、html5
1、与类相关的扩充
查找元素
document对象和所有的html元素调用getElementsByClassName()方法，返回HTMLCollection对象
element.getElementsByClassName('username current');
多个类名，使用空格分开
classList属性
操作类名时，通过className属性添加、删除、替换类名。className得到一个字符串，要删除其他某个类名，很不方便。
html5为所有元素新增classList属性，它是DOMTokenList的实例。classList很方便操作类名称，除非你需要全部删除所有类名，或者完全重写class属性，否则用不到className。
classList的属性和方法
element.classList.length
element.classList.remove('username')
element.classList.add('username')
element.classList.toggle('username')
element.classList.contains('username')
注意：支持的浏览器有chrome、ff3.6
2、焦点管理
document.activeElement //
document.hasFocus() //boolean
注：支持的浏览器有ie4、ff3+、safari4+、chrome、opera8+
3、HTMLDocument的变化
readyState属性
两个可能的值loading和comlate
document.readyState //loading或comlate
兼容模式
页面渲染的模式分为标准和混杂。标准模式下CSS1Compat，混杂模式下BackCompat
document.compatMode //CSS1Compat或BackCompat
head属性
let head = document.head //<head>
注意：支持的浏览器ie9+、ff4+、Chrome、safari5+、opera11.5+
4、字符集属性
charset属性表示文档使用的字符集
document.charset //'UTF-8'
document.charset = 'UTF-8'
5、自定义数据属性
html5规定用户自定义的属性必须为data-开头。通过dataset属性得到自定义数据，返回DOMStringMap的一个实例，即键值对的映射。
let div = document.getElementById('myDiv');
div.dataset.appid = 233; //设置值
div.dataset.appid //233 取值
注意：支持的浏览器ie11+、ff6+、Chrome、safari5.1+、opera11.5+
6、插入标签
innerHTML属性
读模式下返回调用元素的所有子节点，写模式下根据指定的值创建新的DOM树，替换所有子元素
div.innerHTML = '<p>dddd</p>';
"转成"
&转成&
<转成>
>转成<
注意：读模式得到子节点内容会被转义。为innerHTML设置的包含html的字符串值与解析后innnerHTML的值大不相同。
outerHTML属性 返回调用元素本身及它的所有子元素，写模式替换调用元素
div.outerHTML
注意：读模式得到内容会被转义
7、insertAdjacentHTML()方法
//元素前面、后面插入指定内容，作为同辈元素
element.insertAdjacentHTML('beforebegin', '<p>hello</p>')
element.insertAdjacentHTML('afterend', '<p>hello</p>')
//元素内前面、后面插入指定内容，作为子元素
element.insertAdjacentHTML('afterbegin', '<p>hello</p>')
element.insertAdjacentHTML('beforeend', '<p>hello</p>')
8、内存和性能问题
在使用innerHTML、outerHTML、insertAdjacentHTML()时，最好先手动删除被替换的元素的所有事件处理程序和js属性
不要循环调用innerHTML，而是最好将要设置字符串创建好，一次赋值
9、滚动
html5新增scrollIntoView()方法更好的控制页面滚动，所有html元素都可以调用该方法。
//调用元素的顶部与视口顶部尽可能平齐
div.scrollIntoView()
div.scrollIntoView(true)
//调用元素会尽可能全部出现在视口中，不过顶部不一定对齐(可能调用元素的底部会与视口顶部平齐)
div.scrollIntoView(false)
实际上，为某个元素设置焦点也会导致浏览器滚动并显示出获得焦点的元素
4、专有扩展
1、文档模式
标准模式和混合模式
2、children属性
返回HTMLCollection的实例，只包含元素节点
element.children.length
element.children[0]
element.children.item(0)
注意：ie8以及更早版本返回有注释节点，ie9后只返回元素节点
3、contains()方法
判断某个节点是不是另一个节点的后代，返回布尔值
div1.contains(div2) //true
4、compareDocumentPosition()方法
确定节点间关系，返回关系位掩码
1 无关
2 居前
4 居后
8 包含
16 被包含
5、插入文本
innerText属性，可以设置文本节点，也可以获取元素的文本信息
element.innerText = '<p>hello</p>';
对应outerText属性，这个属性会导致调用它的元素不存在，尽量不要用
textContent属性
element.textContent = '<p>hello</p>';
注意：不同浏览器对空白符处理不同，因此输出的文本可能不会包含原始html代码中的缩进
innerText属性和textContent属性的区别，前者会忽略行内样式和脚本，后者不会
6、滚动
针对HTMLElement类型的扩展
scrollIntoViewIfNeed(true) //参数可选，把不可见元素可见
scrollByLines(5) //滚动到指定行
scrollByPages(-1) //滚动指定页面高度，具体高度由元素的高度决定
注意：safari、chrome实现
