DOM与虚拟DOM

1. DOM（Document Object Model）

2018年通用版本是 DOM 3
DOM的作用：对Html文档进行增删改查

DOM文档树：
（Object =>）
祖先 Node =>
Document创建Html标签；Text 创建文本；Element 创建其他元素标签；Comment 创建注释…

2. Node 接口

2. 1 属性

childNodes //获取的NodeList是动态集合，和querySelector()不同
firstChild
innerText
lastChild
nextSibling //会获取到文本节点的
nodeName
nodeType
nodeValue
outerText
ownerDocument
parentElement
parentNode
previousSibling //会获取到文本节点的
textContent

2.1.1 innerText，innerHtml，outerText，outerHtml 和textContent 的区别

在获取内容时：

innerText 是返回的是标签内部所有文本内容（包括空格），不包括标签本身；
innerHtml 是返回标签内部所有内容，包括内部的 Html 标签；

outerText 非标准，不要用，所以不讲解
outerHtml 是返回目标标签 + innerHtml 的内容；

在写入内容时：

<div id="test"><span>替换前</span></div>   // 都以此示例
//网页打开是：替换前

document.getElementById('test').innerText= "<div>替换后</div>"; 
// 原Html变为：<div id="test">&lt;div&gt;替换后&lt;/div&gt;</div>
//网页打开是： <div>替换后</div>

document.getElementById('test').innerHtml= "<div>替换后</div>"; 
// 原Html变为：<div id="test"><div>替换后</div></div>
//网页打开是： 替换后

document.getElementById('test').outerHtml= "<div>替换后</div>"; 
// 原Html变为：<div>替换后</div>
//网页打开是： 替换后

textContent 与 innerText 的区别：

textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 不会。
innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。
由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。
与 textContent 不同的是, 在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改，不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。

textContent 与 innerHtml 的区别：

innerHTML 返回 HTML 文本。通常，为了在元素中检索或写入文本，人们使用innerHTML。但是，textContent通常具有更好的性能，因为文本不会被解析为HTML。此外，使用textContent可以防止 XSS 攻击。

2.1.2 nodeType

Node.ELEMENT_NODE === 1  //true，元素节点
Node.TEXT_NODE === 3     //true，文本节点
xxx.nodeType === 3       //可用来检验xxx是一个元素节点还是元素中的文本

2.1.3 nodeName

nodeName获取的标签 只有svg返回小写

2. 2 方法

appendChild()
cloneNode() //加上参数true就是深拷贝，拷贝该节点及其内部所有东西，不加是浅拷贝，只拷贝节点，还需其他方法添加到html中
contains()
hasChildNodes()
insertBefore()
isEqualNode()
isSameNode()
removeChild() //仍然在内存中，只是不反映到html上
replaceChild() //也是在内存中的
normalize() // 常规化

3. Document 接口

3. 1 属性

body
characterSet
childElementCount
children
doctype
documentElement
domain
fullscreen
head
hidden
images
links
location
onxxxxxxxxx
origin
plugins //浏览器使用的插件
readyState
referrer //哪个网址推荐来的
scripts
scrollingElement
styleSheets
title
visibilityState

3. 2 方法

close()
createDocumentFragment()
createElement()
createTextNode()
execCommand()
exitFullscreen()
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
hasFocus()
open()
registerElement()
write()
writeln()
querySelector()
querySelectorAll()

4. 不懂就用MDN，不懂就用MDN，不懂就用MDN

5. DOM事件流（DOM2）

a、Html中 onclick = "要执行的代码，如 print() "
JS中 onclick = “ print ” ，这里类型为函数对象，所以print()是错的，因为print()是一个值
b、xxx.onclik = function (){console.log(2)}的特点：

xxx属性是唯一的
只能绑定一个事件，后面的事件会覆盖前面的事件

xxx.addEventListener(‘click’, function (){console.log(2)})的特点：

xxx是有一个队列eventListeners
可以绑定多个事件

DOM事件模型：先捕获（addEventListener加参数true），再冒泡（不加或加参数false）
xxx.addEventListener(“click”, modifyText, false);
特例： 若只有一个元素（或者是执行的最后一个元素）既有捕获事件，又有冒泡事件，按照代码顺序执行

6. 虚拟DOM

10月初补上