DOM对象

DOM：文档对象模型

核心

浏览器网页就是一个Dom树形结构！

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

1、获得Dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <h1>标题二</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
    let father = document.getElementById('father');
    let childrens = father.children;// 获取父节点下的所有子节点
    // father.firstChild;
    // father.lastChild;
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这是原生代码，之后尽量都使用jQuery();

2、更新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="id1"></div>

<script>
    let ss = document.getElementById('id1');
    ss.innerText = 'abc';
    ss.style.color = 'green'; // 属性使用字符串
    ss.style.fontSize = '200px';

</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3、删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <h1>标题二</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    let self = document.getElementById(p1);
    let father = p1.parentElement;
    father.removeChild(self);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。

4、插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么干了！会产生覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>

    let js = document.getElementById('js'),
        list = document.getElementById('list');
    list.appendChild(js);// 追加到后面，已经存在的节点
    // 创建一个新的节点
    let NewP = document.createElement('p');// 创建一个 p 标签
    NewP.id = 'NewP';
    NewP.innerText = 'hello,world';
    list.appendChild(NewP);

    // 创建一个标签节点
    /*let MyScript = document.createElement('script');
    MyScript.setAttribute('type','text/javascript');*/
    let MyStyle = document.createElement('style');
    MyStyle.inneeHTML = 'body{background-color : green}';
    document.getElementsByTagName('head')[0].appendChild(MyStyle);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

5、创建一个新的标签

<script>
	var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');
    //通过JS创建一个新的节点
    var newP = document.creatElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello';
    //创建一个标签节点
    var myScript = document.creatElement('script');
    myScript.setAttribute('type','text/javascript');
    
    //可以创建一个style标签
    var myStyle = document.creatElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
    
    document.getElementByTagName('head')[0].appendChild(myStyle);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
1
2
3
4
5

相关阅读:
spring boot and php
SpringCloud 微服务全栈体系（五）
5.4 【MySQL】页目录
漂亮的pyqt6皮肤 PyOneDark_Qt_Widgets_Modern_GUIPublic
Permission denied, please try again.Gitlab
Unity 关于低版本是否可以引用高版本构建内容的可行性验证
CodeTON Round 3 (Div. 1 + Div. 2, Rated, Prizes!)
.NET使用CsvHelper快速读取和写入CSV文件
银行转账p图在线制作生成，回执单凭证，工商农业邮政建设，易语言画板！
nodejs项目实例医生预约平台宠物医院预约挂号网

原文地址：https://blog.csdn.net/Q1575290554/article/details/125497063