DOM
Node 接口 - 属性
1.nodeType属性返回一个整数值，表示节点的类型。
文档节点（document）：9，对应常量Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE
注释节点（Comment）：8，对应常量Node.COMMENT_NODE
2.nodeName 属性返回节点名称
文档节点（document）：#document
元素节点（element）：大写的标签名
属性节点（attr）：属性的名称
文本节点（text）：#text
文档片断节点（DocumentFragment）：#document-fragment
文档类型节点（DocumentType）：文档的类型
注释节点（Comment）：#comment
3.nodeValue 属性返回当前节点本身的文本值，可读写；
只有文本，注释，属性节点有文本值，其他节点返回null
4.textContent属性忽略HTML标签，返回当前节点和它的所有后代节点的文本内容，可读写（对HTML标签自动转义）；
5.baseURI属性返回一个字符串，表示当前网页的绝对路径。浏览器根据这个属性，计算网页上的相对路径的 URL。该属性为只读。相当于 window.location.href；可根据<base>标签更改；
6.Node.nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。文本节点和注释节点也算。可以用来遍历所有子节点；
7.previousSibling 属性返回紧跟在当前节点前面的第一个同级节点。如果当前节点前面没有同级节点，则返回null。
8.parentNode 属性返回当前节点的父节点；
对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。
文档节点（document）和文档片段节点（documentfragment）的父节点都是null。另外，对于那些生成后还没插入 DOM 树的节点，父节点也是null。
9.parentElemet 属性返回当前节点的父 元素节点；
10.firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
lastChild 和 firstChild 用法一致；
注意，firstChild返回的除了元素节点，还可能是文本节点或注释节点。
11.childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点。
12.isConnected属性返回一个布尔值，表示当前节点是否在文档之中。
Node 接口 - 方法
1.appednChild() 接受一个节点对象作为参数，插入当前节点的最后面；
ps:如果是已经存在的节点，相当于移动位置；
2.hasChildNodes方法返回一个布尔值，表示当前节点是否有子节点。
以下两个方法也可以判断是否有子节点：
node.firstChild !== null
node.childNodes && node.childNodes.length > 0
3.cloneNode(boolean) 接受一个布尔值作为参数表示是否同时克隆子节点 ，默认为false;
注意：
a.事件监听和onclick属性不会克隆；
b.复制后需要使用appendChild添加到文档中；
c.id,name 需要更改，以免重复；
4.parentNode.insertBefore(newNode,referenceNode) 用于将某个节点插入指定位置前面；
注：如果insertBefore方法的第二个参数为null，则新节点将插在当前节点内部的最后位置，即变成最后一个子节点。
5.removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。
6.replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。
user: var replacedNode = parentNode.replaceChild(newChild, oldChild);
7.contains方法返回一个布尔值，表示参数节点是否满足以下三个条件之一。
**
参数节点为当前节点。
参数节点为当前节点的子节点。
参数节点为当前节点的后代节点。
**
8.isEqualNode方法返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
9.normalize方法用于清理当前节点内部的所有文本节点（text）。它会去除空的文本节点，并且将毗邻的文本节点合并成一个.
10.getRootNode()方法返回当前节点所在文档的根节点document
NodeList 接口
1.获取NodeList实例
Node.childNodes 动态集合，DOM删除或新增一个节点，都会影响；
document.querySelectorAll()
2.length 属性返回节点数量
3.forEach() 遍历所有节点成员；
4.item(int) 接受一个整数值作为参数，返回该位置上的成员；一般不使用，直接用方括号；
5.keys()返回键名的遍历器，values()返回键值的遍历器，entries()返回的遍历器同时包含键名和键值的信息。
HTMLCollection 接口
1.没有forEach方法，只能用for遍历；
2.HTMLCollection实例都是动态集合；
ParentNode接口
1.只有元素节点，文档节点，文档片段节点才会有ParentNode接口；
2.childern 属性，返回HTMLCollection实例；只读；
3.firstElementChild属性返回当前节点的第一个元素子节点。如果没有任何元素子节点，则返回null；
4.lastElementChild属性返回当前节点的最后一个元素子节点。如果没有任何元素子节点，则返回null；
5.childElementCount属性返回一个整数，表示当前节点的所有元素子节点的数目。如果不包含任何元素子节点，则返回0。
6.append方法为当前节点追加一个或多个子节点，位置是最后一个元素子节点的后面
7.prepend方法为当前节点追加一个或多个子节点，位置是第一个元素子节点的前面
ChldNode 接口
1.remove() 从父节点移除当前节点； use: e1.remove() 移除e1节点
2.before() 在当前节点前面插入一个或多个级节点；after相反；
3.replaceWith方法使用参数节点，替换当前节点。参数可以是元素节点，也可以是文本节点。
use: e1.repaceWith(span)
Document节点
1.概述
document对象继承了EventTarget接口和Node接口，并且混入（mixin）了ParentNode接口。
正常的网页，直接使用document或window.document。
iframe框架里面的网页，使用iframe节点的contentDocument属性。
Ajax 操作返回的文档，使用XMLHttpRequest对象的responseXML属性。
内部节点的ownerDocument属性。
2.document.scrollingElement.scrollTop = 0; 页面滚动到顶部；
3.document.activeElement 返回获得当前焦点的DOM元素；
4.全屏操作
document.fullscreenEnabled 确认是否可切换全屏；
requestFullscreen() 切换全屏
exitFullscreen() 退出全屏
5.节点集合属性（以下属性返回一个HTMLCollection实例）
document.links属性返回当前文档所有设定了href属性的<a>及<area>节点。
document.forms属性返回所有<form>表单节点。
document.images属性返回页面所有<img>图片节点。
6.文档静态信息属性
a. document.documentURI，document.URL 都返回一个字符串，表示当前文档的网址。不同之处是它们继承自不同的接口，documentURI继承自Document接口，可用于所有文档；URL继承自HTMLDocument接口，只能用于 HTML 文档。
b.document.domain 属性返回当前文档的域名，不包含协议和端口。只有次级域名网页可更改域名，但是必须设置端口。
c.document.title 返回当前文档的标题。
d.document.referrer 表示当前文档的访问者来自哪里。
e.document.compatMode 返回浏览器处理文档的模式;一般来说，如果网页代码的第一行设置了明确的DOCTYPE（比如<!doctype html>），document.compatMode的值都为CSS1Compat。
7.文档状态属性
a.document.readyState 返回当前文档的状态，共有三种可能的值。
loading：加载 HTML 代码阶段（尚未完成解析）
interactive：加载外部资源阶段
complete：加载完成
b.document.cookie 用来操作浏览器cookie
8.方法
a.document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
b.document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList对象(静态集合)，包含所有匹配给定选择器的节点。
c.document.getElementsByTagName()方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。——–大小写不敏感！
d.document.getElementsByClassName()方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。
参数可以是多个class,用空格分隔；
e.document.getElementsByName()方法用于选择拥有name属性的 HTML 元素，返回一个类似数组的的对象（NodeList实例），因为name属性相同的元素可能不止一个。
f.document.getElementById()方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。
g.document.hasFocus方法返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。
Element节点
Element对象继承了Node接口
实例属性
1.Element.id 返回指定元素的id属性；
2.Element.tagName 返回指定元素的大写标签名
3.Element.dir 返回指定元素的文字方向
4.Element.accessKey 返回分配给当前元素的快捷键
5.Element.draggable 返回布尔值，表示当前元素是否可拖动；
6.document.documentElement.lang 返回当前元素的语言设置
7.Element.title 当前元素的 HTML 属性title
元素状态的属性
1.Element.attributes属性返回一个类似数组的对象，成员是当前元素节点的所有属性节点
2.Element.dataset 读取data- 属性,eg. 属性名 data-columns，use: article.dataset.columns，也可以通过Element.getAttribute(‘data-columns’) 获取属性
3.Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。
注意，读取属性值的时候，如果文本节点包含&、小于号（<）和大于号（>），innerHTML属性会将它们转为实体形式&、<、>。如果想得到原文，建议使用element.textContent属性。
4.Element.outerHTML属性返回一个字符串，表示当前元素节点的所有 HTML 代码，包括该元素本身和所有子元素。
5.Element.clientHeight，Element.clientWidth 返回元素节点的CSS高度和宽度；只对块级元素有效；包含padding部分，不包含border，margin;
document.documentElement.clientHeight 和 window.innerHeght 值似乎相等
6.Element.children属性返回一个类似数组的对象（HTMLCollection实例），包括当前元素节点的所有子元素。如果当前元素没有子元素，则返回的对象包含零个成员。
注：这个属性与Node.childNodes属性的区别是，它只包括元素类型的子节点，不包括其他类型的子节点。
Element.childElementCount属性返回当前元素节点包含的子元素节点的个数，与Element.children.length的值相同。
7.Element.firstElementChild，Element.lastElementChild
8.Element.nextElementSibling，Element.previousElementSibling
实例方法
1.属性相关方法
getAttribute()：读取某个属性的值
getAttributeNames()：返回当前元素的所有属性名
setAttribute()：写入属性值
hasAttribute()：某个属性是否存在
hasAttributes()：当前元素是否有属性
removeAttribute()：删除属性
2.Element.focus()，Element.blur()
Element.focus方法用于将当前页面的焦点，转移到指定元素上。
use：document.getElementById('my-span').focus();
