DOM概念
DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树
HTML DOM树
如图
DOM标准规定HTML文档中的每个成分都是一个节点(node):
- 文档节点(document对象)：代表整个文档
- 元素节点(element对象)：代表一个元素(标签)
- 文本节点(text对象)：代表元素（标签）中的文本
- 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
- 注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML：
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
主要点
1.查找HTML中的标签
直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
例子如下
首先是HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="a" id="a1">第一个div</div>
<div class="b" id="b1">第二个div
<span class="c" id="c1">第二个div里面的span</span>
<div class="d" id="d1">第二个div的div<a href="">第二个div的div内的a</a></div>
</div>
<div class="e" id="e1">第三个div</div>
</body>
</html>
然后在通过上面的方法来查看标签
同时这些查找的结果可以赋值给变量
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
2.节点操作
1.创建节点
语法:
createElement(标签名)
示例：
var imgEle = document.createElement("img");
这里我创建了imgEle的节点，它就相当于img标签
这个节点可以给它添加属性，首先添加图片
如图
注意点：这里的创建节点不止这种，比如上面将查找结果赋值给其他变量名，那些变量名也是节点的一种
2.添加节点
语法：
1.追加一个子节点（作为最后的子节点）
节点1.appendChild(节点2)
这里就会让节点1内多了一个节点2
例子如图
2.把增加的节点放到某个节点的前边。
节点1.insertBefore(节点2,节点3)
这里会在节点1内添加节点2，同时节点2的添加位置会在节点3前面
例子如图
3.删除节点：
语法：获得要删除的元素，通过父元素调用该方法删除。
节点1.removeChild(节点2)
将节点1中的节点2删去
例子如图
4.替换节点
语法：
节点1.removeChild(节点2,节点3)
将节点1内的节点2替换成节点3
例子如图
