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&