持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
什么是DOM
DOM（ Document Object Model）：文档对象模型
- HTML DOM - 针对 HTML 文档的标准模型
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准
DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
浏览器网页就是一个DOM树形结构，实例如下图所示。
该树的节点类型有
-
元素节点——html标签
-
文本节点——文本
-
属性节点——属性总是被包含在标签里，所以属性节点总是被包含在元素节点当中。
三个节点的关系为：（元素节点（属性节点，文本节点））
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
获取DOM节点
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1 = document.getElementsByTagName('h1')
var p1 = document.getElementById('p1')
var p2 = document.getElementsByClassName('p2')
var father = document.getElementById('father')
var ch = father.children;//获取父节点下的所有子节点
// father.firstChild 获取父节点下第一个子节点
// father.lastChild 获取父节点下最后一个子节点
//p1.nextElementSibling 获取子节点的下一个节点
</script>
</body>
</html>
很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现
var
i, c,
list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
c = list.children[i]; // 拿到第i个子节点
}
更新DOM节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
//修改节点内容
id1.innerText='123'
"123"
id1.innerText='shenming'
"shenming"
//修改节点文本样式为粗体
id1.innerHTML='<strong>shenming</strong>
修改节点的css样式
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
id1.innerText = 'abc'
id1.style.color='red'; //属性使用字符串
id1.style.fontSize='50px'; //下划线改为驼峰命名
id1.style.padding='20px';
</script>
删除DOM节点
删除节点的步骤
- 先获取父节点
- 在通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;//获取父节点
father.removeChild('self');//通过父节点删p1
</script>
通过指定下标来删除
遍历父节点中的子节点：
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);//删除到第二个时浏览器会报错
浏览器报错：father.children[1]不是一个有效的节点。原因就在于删除是一个动态的过程，当节点被删除后，father.children的节点数量已经从2变为了1，索引[1]已经不存在了。
因此，删除多个节点的时后，要注意children属性是时刻都在变化的。
插入DOM节点
当我们获得了某个DOM节点，如果这个DOM节点是空的，例如 < div> < /div> ，那直接使用innerHTML 就可以增加一个元素，相当于“插入”了新的DOM节点
如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接覆盖掉原来的所有子节点。
有两个办法可以插入新的节点。
方法一appendChild()
使用appendChild()，把一个子节点追加到父节点的最后一个子节点
测试
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js'),
var list = document.getElementById('list');
list.appendChild(js);//把<p id="js">JavaScript</p>追加到<div id="list">的最后一项
</script>
结果（因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置）
插入前
JavaScript
JavaSE
JavaEE
JavaME
插入后
JavaSE
JavaEE
JavaME
JavaScript
从零创建一个新的节点，然后插入到指定位置
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js'),
var list = document.getElementById('list');
//创建一个新节点
var newP = document.createElement('p'); //创建一个p标签
newP.id='newP1'; //加上id选择器
newP1.innerText='hello world'; //给p标签插入文本
list.appendChild(newP);
/*拓展1：setAttribute() 方法:添加指定的属性，并为其赋指定的值.如果这个指定的属性已存在，则仅设置/更改值。
如newP.id='newP1'等价于newP1.setAttribute('id','newP1')
*/
/*拓展2：修改body标签的属性
var mystyle = document.getElementsByName('style');//创建一个空style标签
mystyle.Attribute('type','text/css');//设置标签的属性
mystyle.innerHTML = 'body{background-color:red;}';//设置标签的内容
var head = document.getElementsByTagName('head')[0];//获得head头部节点
head.appendChild(mystyle);//把mystyle追加到head头部节点的后面
*/
</script>
结果
JavaScript
JavaSE
JavaEE
JavaME
hello world
方法二insertBefore()
把子节点插入到指定的位置,parentElement.insertBefore(newElement, referenceElement);，子节点(newElement)会插入到referenceElement之前
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var list = document.getElementById('list');
var ee = document.getElementById('ee');
var js = document.getElementById('js');
list.insertBefore(js,ee)//把js节点插在ee节点前面
</script>
效果
