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