DOM

DOM到底是啥？

html叫做文档，实际上在内存中是对象object，这种文档和对象一一映射的机制叫做dom。

dom和原型不同并非一开始浏览器就造好的，而是在解析html的过程中边解析边造的。dom是和html绑定的和js好像没关系。浏览器有一个分词器还有一个解析器。分词器会把空格什么去掉然后把html标签拿出来给解析器，然后解析器再调用对应的函数把标签做成节点对象。然后全部做完就是一个dom树了。

那为什么没有dom的时候不同浏览器不兼容?因为标签没有对应的方法把他做成节点。

js的对象都是继承至object，页面的对象都是继承至node。当然node还是继承object的。

html是由Document造出来的，head、body、meta等标签是由Element造出来的，页面中的文本是由Text造出来的。

Document、Element、Text都是特殊的对象，和Aarry、Function、Number、String一样都是对象。

Document.prototype => __proto__:Node => __proto__: EventTarget => __proto__:Object 

Element.prototype => __proto__:Node => __proto__: EventTarget => __proto__:Object

Text.prototype => __proto__: CharacterData =>  __proto__:Node => __proto__: EventTarget => __proto__:Object

显然他们有个公共属性Node

---

获取节点好像一般都是用ID的，不太用document一层层找下去的吧，一般用docment的都是直接对整个文档操作。

要打出document可以这么操作

要打出文本，得先给它加个id，然后文本是这个id的firstChild

注释也是一个对象，反正几乎所有东西都是对象吧

所以DOM就是把html的节点通过上面这些构造函数，构造出相应的对象。上面说了只要是html标签，head等标签，文本，注释这些。

然后用到标签的时候去调用这个对象就是了。那DOM到底有哪些呢

Element、Text、这些都是有node的公共属性，所以先看看node有哪些属性。直接Node.prototype就行了

问：构造函数怎么把html语言变成对象的？

只要返回一个对象就行了，比如方方自己写了一个creatPerson的构造函数。自带的createElement也是构造函数。

---

node方法

浅拷贝

深拷贝

深拷贝能拷贝子元素，浅拷贝只拷贝节点，只拷贝这个div标签，标签里面的文字或者儿子都不会拷贝。

Equal两个div看起来是一样的，Same是两个div是同一个。

API看mdn就够了

很多api有点烦记不住，记6个知识点和两个规则：

1.nextsibling或者previousSibling可能会获取到文本节点

2.innerText和textContent有点区别的。面试可能会考

3.nodeType需要记连个值1表示元素，3表示文本。面试可能会考

4.cloneNode()有深拷贝和浅拷贝

5.isSameNode()和isEaualNode()是不一样的

6.normalize使什么变得正常，有点格式化的感觉。

规则：

---

给页面加文本：

用innerText是可以的，但是有缺点

如果我本来里面是有内容的就会被清空，所以更安全的方法是：

api不会用没关系，反正随便用直到遇到bug就懂了，然后再总结。专家就是在一个小领域之内把所有能踩过的坑都踩过了。

---

document

anchors被弃用了

我干嘛查api的时候还在浏览器打xxxxx.prototype直接查mdn不就更形象

referer：引荐，没引荐的话会打不开

close() 

document分为三个步骤：open，write，close

当第一个html开始的时候document就open了，然后结束了就close了。

所以上面这个setTimeout(()=>{document.write(3)},1000)延时函数执行的时候script已经执行了。document已经close了。所以关闭以后再执行就要重新打开document，打开的时候就会把原来的覆盖掉。

所以上面的执行顺序是：hello 1 2 然后覆盖只剩3.所以尽量不要用write，因为容易覆盖。

上面4个选择元素的基本上没人用了，着重说一下下面两个的区别。自动化还用上面4个用得很开心

区别在于querySelector返回一个，querySelectorAll返回一个数组，就算只有一个也是返回数组。然后选中你返回的通过数组下标选择。如上面的div[0].classList。这个数组是伪数组。因为他的原型不是__proto__:Array

---

Element

上面说了document有querySelector，其实Element也是有querySelector所以可以直接div.querySelector因为div是Element创造的啊

---

作业：