11.1选择符API
Selectors API有W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询。
11.1.1querySelector()
该方法接受一个CSS选择符，返回匹配的第一个元素，如果没有返回null
Let myDiv=document.querySelector(‘#myDiv’)
document.querySelector(‘.selected’)
document.querySelector(‘img.button’)
Document类型调用即是在文档元素的范围内查找
Element类型调用是在其后代元素的方位内查找
11.1.2querySelectorAll()
11.1.3matchesSelector()
返回true或false
11.2元素遍历
元素间的空格其他浏览器都会返回文本节点，使得使用childNodes和firshChild等属性的行为不一致，为了弥补差异并同时保持DOM规范不变，Element Traversal规范新定义一组属性。
childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
11.3HTML5
定义了大量JS API，其中一些API与DOM重叠，定义了浏览器应该支持的DOM扩展。
11.3.1与类相关的扩充
1. getElementsByClassName(类名)
类名可以单个或者多个，先后顺序无所谓
Document、Element
getElementsByClassName(‘username current’)
2.classList属性
操作类名需要通过calssName属性添加、删除、替换类名
div.classList.add(val)添加
div.classList.contains(val) 包含返回true，否则false
div.classList.remove(val)删除
div.classList.toggle(val)如果没有添加，有的话删除
11.3.2焦点管理
辅助DOM焦点的功能。
document.activeElement属性，始终会引用DOM中当前获得焦点的元素。
元素获得焦点的方式有页面加载、用户输入(通常是通过按TAB键)、和在代码中使用focus()方法
let button = document.getElementById(‘btn’)
button.focus()
此时document.activeElement===button
文档加载期间 document.activeElement为null，刚加载完成时保存的是document.body
document.hasFocus()，用于确定文档是否获得了焦点,可以知道用户是不是正在与页面交互
let button = document.getElementById(‘btn’)
button.focus()
document.hasFocus()
通过获取哪个元素获得了焦点，以及确定文档是否获得焦点能提高WEB应用的无障碍性。无障碍WEB应用的一个标志就是恰当的焦点管理。
11.3.3HTMLDocument的变化
1.document.readyState属性
该属性有两个可能值
loading 正在加载文档
complete 已经加载完文档
主流基本实现
2. 兼容模式，document.compatMode可以知道浏览器采用哪种渲染模
标准模式值为CSS1Compat
混杂模式为BackCompat
主流基本实现
3. document.head
指向<head>元素
let head = document.head || document.getElementsByTagName(“head”)[0]
Chrome、Safari5 已实现
11.3.4document.charset、document.defaultCharset
11.3.5自定义数据属性
为元素添加自定义属性，要添加前缀data-，目的是为元素提供与渲染无关的信息。，或者提供语义信息。
<div id=”myDiv” data-appId=”123456”></div>
let appId = myDiv.dataset.appId
可以通过元素的dataset属性访问自定义属性的值(是DOMStringMap的一个实例)
11.3.6插入标记
1. innerHTML属性
返回子
在读模式下返回调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记。
在写模式下，会根据值创建新的DOM树然后无安全替换调用元素原先的所有子节点。
myDiv.innerHTML=’ ’
2. outerHTML属性
返回自己+子
在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签
在写模式下，会根据指定的HTML字符串创建新的DOM子数并完全替换调用元素
3. insertAdjacentHTML()方法
两个参数1.插入位置 2.要插入的HTML文本
第一个参数必须是以下值
beforebegin 在当前元素之前插入一个紧邻的同辈元素
afterbegin 在当前元素的第一个子元素前插入新的子元素
beforeend 在当前元素的最后一个子元素后插入一个新的子元素
afterend 在当前元素之后插入一个紧邻的元素
4. 用上述方法可能会造成内存占用问题
11.3.7scrollIntoView()方法 滚动页面
scrollIntoView(true) 或者没有参数，会让调用的元素顶部与视口顶部尽可能平齐
scrollIntoView(false) 让调用元素底部与视口底部尽可能平齐
11.4专有扩展
children属性，是HTMLCollection的实例，只包含元素中同样是用元素的子节点
contains()方法，是否包含某个节点为后代
innerText属性
outerText属性
scrollIntoViewIfNeeded(alignCenter)
让调用元素可见，即调用元素不在视口中时，会滚动浏览器让元素出现
alignCenter=true时表示尽量将元素显示在视口中部(垂直方向)
Chrome、Safari已实现该方法
scrollByLines(lineCount)
将元素滚动到指定行高，参数可正可负
Chrome、Safari已实现该方法
scrollByPages(pagesCount)
将元素的内容滚动指定的页面高度