dom

1 .js操作网页的接口，他的作用是将网页转换一个可以进行脚本操作的js对象。可以使用document.querySelector()来查看，大致就是这个样子
2 .浏览器根据DOM模型，将结构化的文档，html,xml解析成一系列的节点，再由这些节点组成树状的结构

节点

1 .一共有7种类型，所有的7种节点，都继承了浏览器提供的一个原生节点对象Node.因此都有一些共同的属性和方法。

节点树

1 .浏览器原生的document节点，代表整个文档
2 .一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构，就是dom树。
3 .三种层级关系：父节点关系，子节点关系，同级节点关系

node接口

1 .所有dom节点对象都继承了node接口，拥有一些共同的属性和方法，这是操作dom的基础

属性

1 .nodeType:返回一个整数值，表示节点的类型,还有对应常量可以进行比较来判断节点的类型
2 .nodeName:返回节点的名称
3 .nodeValue:返回节点的文本值。只有文本节点和注释节点有文本值，其余的节点都返回null.
4 .textConetnt:返回当前节点和他所有带节点的文本内容，自动忽略当前节点内部的html标签，直接返回所有的文本内容。而且该属性是可以读写的。
5 .baseUrl:返回当前网页的绝对路径，这个值一般是当前网址的url，但是可以使用html的base标签，来改变属性的值。
6 .ownerDocument：返回当前节点所在的顶层文档对象，即document对象
7 .nextSibling:紧跟当前节点后面的第一个同级节点，如果后面没有，则返回neull

while(el !==null){
  el=el.nextSibling
//遍历所有子节点
}

8 .previousSibling:返回当前节点前面的，距离最近的一个同级节点，如果没有，返回null。
9 .parentNode:返回当前节点的父节点。只会有三种类型：element,document,documentfragment，其中，document和documentfragment的父节点都是null
10 .parentElement:返回当前节点的父元素节点。如果当前没有父节点，或者符父节点类型不是元素节点，则返回null.其实等于上面的以第一个
11 .firstChild,lastchild:返回的除了元素节点，还可能是文本节点或者注释节点，如果代码元素之间有空白字符，会导致firstChild返回文本节点
12 .childNodes:返回一个类似数组的对象，成员包含当前节点的所有子节点。是一个NodeLis集合，他是动态的，如果子节点发生变化，立刻会反映在结果之中
13 .isConnected:当前节点是否在文档之中，新创建的节点，没有插入的时候这个属性都是false

方法

1 .appendChild():如果参数节点DOM是已经存在的节点，appendChild方法会将其从原来的位置，移动到新位置。
2 .hasChildNodes():返回一个布尔值，表示当前节点是否有子节点

hasChildNodes()
firstChild!==null
node.childNodes && node.childNodes.length>0

3 .cloneNode()
4 .insertBefore(node,target) node:要插入的节点，target:要插入的位置
5 .removeChild(n):删除里面的一个子节点，这个方法是在父节点上面调用的

//删除所有子节点
var el=document.getElementById('p')
while(el.firstChild){
  el.removeChild(el.firstChild);
}

6 .replaceChild(old,new)
7 .contains(node):检查这个参数节点是否满足一下三个条件

1.参数节点为当前节点
2 .参数节点为当前节点的子节点
3 .参数节点为当前节点的后代节点

8 .compareDocumentPosition()：返回一个7个比特位的二进制值，表示参数节点与当前节点的关系.两个节点是否相同，是否在同一文档，谁在谁的前面
9 .isEqualNode():返回一个布尔值，检查两个节点是否相同。节点的类型，属性，子节点
10 .isSameNode():返回一个布尔值，表示两个节点是否为同一节点
11 .getRootNode()返回当前节点所在文档的根节点，和ownerDocument属性的作用一样

nodeList接口

1 .单个对象集合的数据结构
2 .nodelist可以包含各种类型的节点，HtmlCollection只能包含html节点
3 .获取Nodelist实例。

1.Node.childNodes
2.document.querySelectorAll()等节点搜索方法

属性

1 .length:里面节点的个数
2 .是一个类数组的结构，如果想要使用数组的方法，可以把它转为数组结构
3 .可能是一个动态集合，也可能是一个静态集合.目前，只有node.childNodes返回的是一个个动态集合，即dom新增或者删除一个相关节点，都是立刻反映在NodeList实例。
4 .item(n)：返回对应位置的数组元素，但是所有类似数组的对象，都可以使用[]方括号来取出，所以一般是不用这个方法的

方法

1 .forEach
2 .for循环
3 .keys()
4 .values()
5 .entries():和对象的三个方法一样，返回对应的遍历器

HTMLCollection

1 .以为是一个节点对象的集合，但是只能包含元素节点，没有其他类型的节点
2 .返回的也是一个类似数组的对象，但是没有forEach方法，只有for循环遍历
3 .htmlcolltction实例都是动态集合，节点的变化都会实时反映在结合中
4 .length,item方法也有
5 .namedItem()参数是一个字符串，表示id属性或者name属性，返回对应的元素节点，如果没有对应的节点，则返回null.

parentNode

1 .节点对象除了继承Node接口之外，还会继承其他接口
2 .parentNode表示当前节点时一个父节点，提供一些处理子节点的方法
3 .如果当前节点是父节点，会继承parentNode接口，由于只有元素节点，文档节点和文档片段节点拥有子节点，因此只有这三类节点会继承parentNode接口
4 .childen属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点，该属性只读。
5 .childen属性只包含元素子节点，不包含其他类型的子节点（比如文本节点），如果没有元素类型的子节点，返回值HTMLCollection实例的length属性为0
6 .firstElementChild:返回当前节点的第一个元素子节点。document的第一个元素子节点是HTML
7 .lastElementChild:document的最后一个元素子节点也是html
8 .childElementCount:表示当前节点的所有元素子节点的数目

继承的方法

1 .append():追加一个或者多个子节点，位置是最后一个元素子节点的后面，这个方法不仅可以增加元素节点，也可以增加文本节点
2 .preappend():位置是第一个元素子节点的前面

ChildNode接口

1 .如果一个节点有父节点，那么该节点就继承了childNode接口

继承方法

1 .remove()：这个竟然是子节点调用的
2 .before():在当前节点的前面，插入一个或者多个同级节点
3 .after():在当前节点的后面，插入一个或者多个同级节点
4 .replacewith(el)：使用节点参数，替换当前节点，参数可以使元素节点，也可以是文本节点。

document节点

1 .doucment节点对象代表整个文档，每张网页都由自己的document对象，只要浏览器开始载入HTML文档，该对象就存在了，可以直接使用。
2 .iframe里面，iframe节点的contentDocument属性
3 .ajax里面，使用XMLHttpRequest对象的responseXML属性
4 .document对象继承了EventTarget接口，Node接口，ParentNode接口，这些接口的方法都是可以使用的

属性

1 .document.defaultView属性返回document对象所属的window对象，如果当前文档不属于window对象，该属性返回null.
2 .document.doctype:html文档的文档类型，指向<DOCTYPE>节点，如果网页内有声明DTD,该属性返回null
3 .document.documentELement:当前文档的根元素节点,root。是document的第二个子节点，紧跟在document.doctype节点后面，html网页的该属性，一般是HTML节点
4 .document.body:指向body节点。
5 .document.head:指向head节点，这两个属性总是存在的，如果网页源码里面省略了head或者body。浏览器会自动创建
6 .document.scrollingelement:返回文档的滚动元素，也就是说，当文档整体滚动时，到底是哪个元素在滚动
7 .document.activeElement:返回当前获得焦点的DOM元素，通常是input,textare,select等表单元素，如果当前没有焦点元素，返回body元素或者null
8 .document.fullscreenElement:返回当前以全屏状态展示的dom元素，如果不是全屏，返回null
9 .document.links:返回所有设定了href属性的a或者area节点
10 .document.froms:返回所有form表单节点。
11 .document.images:返回页面所有的图片节点
12 .document.embes，documet.plugins，都返回embed节点。
13 .document.script：返回所有script节点
14 .document.styleSheets
15 .以上返回的都是HTMLCollection集合
16 .文档静态信息
17 .document.documentURL:返回当前的文档的网址
18 .document.domain:返回当前文档的域名，次级域名的网页可以把document.domian 设为对应的上级域名。修改之后，域名相同的两个网页，可以获取对方的资源，比如设置cookie
19 .document.lcaotion:对象是浏览器提供的原生对象，提供URL相关的信息和操作方法
20 .document.lastMOdified:表示当前文档最后修改时间，是一个字符串，想要进行时间比较的时候必须先转化为时间
21 .document.title:返回当前文档的标题，这个值是可以修改的，一旦被修改之后，返回修改之后的值。
22 .document.characterSet:返回当前文档的编码：utf-8
23 .document.referrer:返回一个字符串，表示当前文档的访问者来自哪里,如果无法获取来源，或者用户直接键入网址而不是从其他网页点击进入，返回一个空字符串
24 .document.dir:返回一个字符串，表示文字方向，只有两个可能的值一个是从左到右，一个是从右到左。
25 .document.compatMode:返回浏览器处理文档的模式，可能的值为backCompat:向后兼容，CSSlCopat:严格模式
26 .和文档状态有关的一些属性值
27 .document.hidden:返回一个布尔值，表示当前页面是否可见。最小化，浏览器切换了tab都是导致页面不可见，使得document.hidden返回true.配合page visibility api使用
28 .docyment.visibilityState:返回文档的可见状态

1.visible:页面可见，但并不代表着焦点可见。
2 .hidden:页面不可见，有可能窗口最小化，或者浏览器切换到了另一个tab
3 .prerender:页面正处于可渲染状态，对于用户来说，改页面不可见
4 .unloaded:页面从内存里面卸载了。

29 .document.readyState:当前文档的状态

1.loading:加载html代码阶段
2.ineractive:加载外部资源阶段
//html文档解析完成，包括script脚本
3.complate:加载完成
//浏览器等待图片，样式表，字体文件等外部资源加载完成，一旦全部加载完成，变成complete.

30 .document.cookie:用来操作浏览器cookie
31 .document.designMode:属性控制当前文档是否可编辑，一旦设置为on，用户就可以编辑整个文档的内容。

方法

1 .document.open():清除当前文档所有内容，使得文档处于可写状态，方便document.write方法写入内容
2 .document.close():关闭上一个方法打开的文档
3 .document.write()这个写入方法是js标准化之前就存在的方法，innerHTML完全可以替代这个方法进行写入，避免使用wirte方法
4 .document.querySelector(),document.querySlectorAll()：接受一个css选择器作为参数，返回对应的节点。两个方法都支持复杂的css选择器，但是不支持伪类选择.这两个方法不仅可以定义在document,在元素节点上也是可以调用的。
5 .document.getElementsByTagName():搜索返回HTML标签名，返回符合条件的元素，返回值是HTMLCollection,返回的成员顺序就是他们在文档中出现的顺序
6 .docuemnt.getElementsByName()
7 .document.getElementsByClassName()
8 .docuement.getElementById()：
9 .document.elementFromPoint(x,y):根据x,y坐标来选择最近的元素
10 .document.createElement()生成元素节点
11 .document.createTextNode(0生成文本节点
12 .document.createAttribute()生成一个新的属性节点
13 .document.createComment()生成一个注释节点，并返回该节点
14 .document.createDOcumentFragment()生成一个空的文档片段对象,对新对象做的任何操作，都不会引发页面的重新渲染。
15 .document.createEvent()：生成一个事件对象，该对象可以被dispatchEvent方法使用，触发指定事件

1.UIEvents
2.MouseEvents
3.MutationEvents
4.HTMLEvents

16 .document.addEventListener()，document.removeEventListener(),
documentdispatchEvent()触发一个事件
17 .document.hasFocus():当前文档中是否有元素被激活或者获得焦点
18 .document.adopNode()：将某个节点极其子节点，从原来所在的文档或者documentfragment里面移除，归属当前的document对象，返回插入后的新节点。
19 .document.importNode():从原来所在的文档或documentFragment里面，拷贝某个节点极其子节点，让他们归属当前document对象
20 .document.createtNodeIterator():返回一个子节点遍历器，用来遍历所有子节点
21 .document.createtTreeWalker()返回一个dom的子树遍历器，返回的是TreeWalker实例
22 .