开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情
从一道面试题入手
很多人都会遇到这个面试题：innerHTML, outerHTML, innerText, outerText 这四个属性的区别是什么？
这四个 DOM 属性都是可以读取也可以赋值的，主要区别是：outerText 会将标签也赋值的。innerText 和 outerText 会对 HTML 特殊字符进行转义的。比如以下简单的例子说明，对 divId 进行操作这四个属性：
<div id ="divId" ><p> content </p></div>
- innerHtml 范围：div标签内的所有内容
- innerText 范围：p 标签内的文本内容
- outerHtml范围：整个 div内容，包括div 标签
- outerText 范围：p 标签内的文本内容
DOM
在MDN中解释：文档对象模型 DOM是HTML和XML文档的编程接口。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。
所以说，DOM 就是提供给 JS 操作页面的接口。JS 通过这些DOM 进行对页面一些元素和动作进行操作，从而让页面更动态化。
DOM 操作
一个页面中有标签、文本或 HTML属性 都是有对应节点属性表示当前元素的类型。JS能够操作DOM 主要还是因为浏览器通过 window.document 提供一些接口给它使用。
- 创建节点： document.createElement 节点元素； document.createTextNode 文本
- 查询节点：
// 返回第一个类名为className的元素
document.querySelector('.className')
// 返回所有类名为 note和 alert 的 div元素
document.querySelectorAll("div.note, div.alert");
document.getElementById('xxx'); // 通过Id
document.getElementsByClassName('className'); //通过类名
document.getElementsByTagName('td'); // 通过标签
- 更改节点
appendChild() //添加元素
removeChild() // 删除元素
replaceChild() //替换元素
insertBefore() // 插入元素
DOM 操作不仅可以操作节点，还可以操作各个节点的属性。
getAttribute() // 获取属性
setAttribute() // 设置属性
hasAttribute()// 判断是否有某属性
removeAttribute()// 移除属性
一个HTML 页面被浏览器解析成DOM树，JS 可以使用JS 操作DOM。所以DOM其实就是个树形结构，JS对树形结构的操作基本就是增删改查的操作。一般的操作都是获取节点然后就可以对节点进行删改等操作。
