Document方法

HTML DOM 方法

getElementById()

返回带有指定 ID 的元素
样例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main">
    </div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var gid = document.getElementById("main")
    console.log(gid)
</script>

</p>
打开F12 控制台 可见打印出了 
1
2
3

<div id="main"></div>

getElementsByTagName()

返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
样例如下

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="main"></div>
    <div class="main">2</div>
    <div class="main">3</div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var gid = document.getElementsByTagName("div")
    console.log(gid)
</script>

</html>

打开F12 控制台 可见打印出了

1
2
HTMLCollection(4) [div.main, div.main, div.main, div]

getElementsByClassName()

返回包含带有指定类名的所有元素的节点列表
样例如下

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="main"></div>
    <div class="main">2</div>
    <div class="main">3</div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var gid = document.getElementsByClassName("main")
    console.log(gid)
</script>

</html>

打开F12 控制台 可见打印出了

1
2
HTMLCollection(3) [div.main, div.main, div.main]

appendChild()

把新的子节点添加到指定节点
样例如下

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main"></div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var gid = document.getElementById("main")
    // 创建一个新的列表项元素
    const node = document.createElement("li");
    gid.appendChild(node);
    console.log(gid)
</script>

</html>
1
在<div id="main"></div>里会增加一个li元素

removeChild()

删除子节点
样例如下

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main">
        <li></li>
    </div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var gid = document.getElementById("main")
    // 获取一个列表项元素
    var li_1 = document.getElementsByTagName('li')[0]
    gid.removeChild(li_1);
    console.log(gid)
</script>

</html>
1
在<div id="main"></div>里的一个li元素会被删除

replaceChild()

替换子节点
样例如下

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main">
        <li></li>
    </div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var gid = document.getElementById("main")
    // 获取一个列表项元素
    var li_1 = document.getElementsByTagName('li')[0]
    var p_1 = document.createElement("p");
    // replaceChild(newNode,oldNode)
    gid.replaceChild(p_1, li_1);
    console.log(gid)
</script>

</html>
1
将<div id="main"></div>里的一个li元素替换成p元素

insertBefore()

在指定的子节点前面插入新的子节点
样例如下

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main">
        <li></li>
    </div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var gid = document.getElementById("main")
    // 获取一个列表项元素
    var li_1 = document.getElementsByTagName('li')[0]
    var p_1 = document.createElement("p");
    gid.insertBefore(p_1, li_1);
    console.log(gid)
</script>

</html>
1
在将<div id="main"></div>里的一个li元素前面插入了一个p元素

createAttribute()

创建属性节点

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main">
        <li></li>
    </div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var att = document.createAttribute("class");
    var at_id = document.createAttribute("id");
    att.value = "attclass";
    at_id.value = "test"
    document.getElementsByTagName("li")[0].setAttributeNode(att);
    document.getElementsByTagName("li")[0].setAttributeNode(at_id);

</script>

</html>
1
2
<li>里会增加 class='attclass' id='test'
结果 <li class="attclass" id="test"></li>

createElement()

创建元素节点

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main">
        <li></li>
    </div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var new_div = document.createElement('div')
    document.getElementsByTagName("li")[0].appendChild(new_div)

</script>

</html>
1
2
3
4

在<li>里增加了一个div元素
结果 <li><div></div></li>

createTextNode()

创建文本节点

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main">
        <li></li>
    </div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var str = document.createTextNode("Hello World");
    document.getElementsByTagName("li")[0].appendChild(str)

</script>

</html>
1
2
在li中添加了字符串 Hello World
结果 <li>Hello World</li>

getAttribute()

返回指定的属性值

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main">
        <li class="test"></li>
    </div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var div1 = document.getElementsByTagName("div")[0]
    var att_id = div1.getAttribute("id");
    console.log(att_id)

</script>

</html>

打开F12 控制台 可见打印出了

1
2
3
main
说明获取到了第1个div的id属性

setAttribute()

把指定属性设置或修改为指定的值

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main">
        <li class="test"></li>
    </div>
    <div style="margin-top: 5px;">
        <button class="btn">计算</button>
    </div>
</body>
<!-- js代码 -->
<script>
    var li_class = document.getElementsByClassName("test")[0]
    li_class.setAttribute("class", "newclass")

</script>

</html>
1
2
将<li>里的class改成了newclass
结果 <li class="newclass"></li>