JavaScript的DOM对象
BOM：浏览器对象模型
DOM：文档对象模型
浏览器网页就是一个DOM树形结构。JavaScript的核心就是动态的操作DOM树。
操作DOM对象，主要分为：
1、获取BOM节点
2、更新：更新DOM节点
3、遍历DOM节点：得到DOM节点
4、删除：删除一个DOM节点
5、追加：追加一个新的节点
1. 获得DOM节点
要操作一个DOM节点，必须先获得DOM节点，一般通过jQuery。但是下面的原生代码也可以涉猎下
1、用标签获取节点，对应CSS选择器中的标签选择器
2、用id获取节点，对应CSS选择器中的id选择器
3、用class获取节点，对应CSS选择器中的类选择器
4、获取父节点下面的全部子节点
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id1"></div>
<div id="father">
<h1>标题1</h1>
<p id="id选择器">标题标签——id选择器</p>
<p class="class选择器">标题标签——class选择器</p>
</div>
<script>
效果如下：
![]()
2. 更新DOM节点
1、操作文本
2、操作css
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id1">看看效果1</div>
<div id="id2">看看效果2</div>
<div id="id3">看看效果3</div>
<script>
let id1 = document.getElementById('id1');
效果如下：
![]()
3. 删除DOM节点
删除节点的步骤：
step1：先获取父节点
step2：通过父节点删除自己
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<div id="id1">看看效果1</div>
<div id="id2">看看效果2</div>
<div id="id3">看看效果3</div>
</div>
<script>
let self = document.getElementById('id1');
let father = self.parentElement;
father.removeChild(self);
</script>
</body>
</html>
效果如下：
![]()
删除时需要注意：删除是一个动态过程
当一个父节点有3个子节点，下标为[0]、[1]、[2]。删的时候，不能remove([0])、remove([1])、remove([2])。
因为是动态的。
[0]删了后，就没有[2]了
如下所示，想把这三个div都删了，方法就是：remove([0])、remove([0])、remove([0])，写三遍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<div id="id1">看看效果1</div>
<div id="id2">看看效果2</div>
<div id="id3">看看效果3</div>
</div>
<script>
let father = document.getElementById('father');
father.removeChild(father.children[0]);
father.removeChild(father.children[0]);
father.removeChild(father.children[0]);
</script>
</body>
</html>
remove([0])、remove([0])、写2遍。效果如下(只剩下了：看看效果3)：
![]()
4. 插入DOM节点
当获得了某个DOM节点
1、若这个节点是空的：可以通过innerHTML增加元素，但是：
2、若这个节点已存在元素，就不可以，因为会产生覆盖。
所以，需要下面的插入节点方法(appendChild())：
4.1. 把一个节点，插入到另一个节点后面(此时，前一个节点相当于移位，不在之前位置上了)
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="div标签">
<div id="id1">看看效果1</div>
<div id="id2">看看效果2</div>
</div>
<script>
let js = document.getElementById('js');
let div1 = document.getElementById('div标签');
div1.appendChild(js);
</script>
</body>
</html>
效果如下：
![]()
4.2. 创建一个新节点，插入到另一个节点后面(此时，要先给新节点弄一个id)
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div标签">
<div id="id1">看看效果1</div>
<div id="id2">看看效果2</div>
</div>
<script>
let div1 = document.getElementById("div标签");
let newP = document.createElement('div');
newP.id = "新的div标签的id";
newP.innerText = "新加的新标签";
div1.appendChild(newP);
</script>
</body>
</html>
效果如下：
![]()
4.3. 一次性创建一个有属性的标签(setAttribute(,))，这样就可以不用4.2中，先创建标签，再创建属性
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let newP = document.createElement('p');
newP.setAttribute('id','id标签');
</script>
</body>
</html>
浙公网安备 33010602011771号