前端研习录（27）——JavaScript document方法讲解及示例分析

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入JavaScript document方法部分

一、document方法

1、获取元素

（1）document.getElementsByTagName()

document.getElementsByTagName()方法通过标签名获取并返回符合条件的元素，它的返回值是一个类似数组对象（HTMLCollection实例），如果没有任何匹配的元素则返回一个空集，如果传入“*”，就可以返回文档中的所有HTML元素，示例如下:

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>清风不渡title>
head>
<body>

    <div>Hello Worddiv>
    <div>My name is 清风不渡div>

    <script>
        var divs = document.getElementsByTagName("div");
        for (var i = 0 ; i<divs.length ; i++){
            console.log(divs[i]);
        }
        
    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

结果如下：
在这里插入图片描述

（2）document.getElementsByClassName()

document.getElementsByClassName()方法通过class名获取并返回符合条件的元素，它的返回值是一个类似数组对象（HTMLCollection实例），示例如下：

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>清风不渡title>
head>
<body>

    <div class="hello">Hello Worddiv>
    <div>My name is 清风不渡div>

    <script>
        var divs = document.getElementsByClassName("hello");
        for (var i = 0 ; i<divs.length ; i++){
            console.log(divs[i]);
        }
        
    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

结果如下：
在这里插入图片描述

注意：参数可以是多个class，中间用空格隔开即可

（3）document.getElementsByName()

document.getElementsByClassName()方法通过name属性获取并返回符合条件的元素，它的返回值是一个类似数组对象（HTMLCollection实例），示例如下：

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>清风不渡title>
head>
<body>

    <form name = "user">form>
    <img src="./img/1.webp" name = "user">

    <script>
        var divs = document.getElementsByName("user");
        for (var i = 0 ; i<divs.length ; i++){
            console.log(divs[i]);
        }
        
    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

结果如下：
在这里插入图片描述

（4）document.getElementById()

document.getElementsByClassName()方法通过id属性获取并返回符合条件的元素，如果没有匹配的元素节点则返回null，示例如下：

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>清风不渡title>
head>
<body>

    <div id="hello">Hello Worddiv>
    <div id="my">My name is 清风不渡div>

    <script>
        var my = document.getElementById("my");
        console.log(my);
        
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

结果如下：

在这里插入图片描述

（5）document.querySelector()

document.querySelector() 方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果多个节点满足匹配条件，则返回第一个节点。如果没有匹配的节点则返回null，示例如下：

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>清风不渡title>
head>
<body>

    <div class="hello">Hello Worddiv>
    <div class="hello">Hello Chinadiv>
    <div class="my">My name is 清风不渡div>

    <script>
        var hello = document.querySelector(".hello");
        console.log(hello);
        
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

结果如下：

在这里插入图片描述

（6）document.querySelectorAll()

document.querySelectorAll()方法也是通过CSS选择器来返回匹配该选择器的所有元素节点，返回一个NodeList对象，示例如下：

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>清风不渡title>
head>
<body>

    <div class="hello">Hello Worddiv>
    <div class="hello">Hello Chinadiv>
    <div class="my">My name is 清风不渡div>

    <script>
        var hello = document.querySelectorAll(".hello");
        for(var a = 0 ; a < hello.length ; a++){
            console.log(hello[a]);
        }
    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

结果如下：

在这里插入图片描述

2、创建元素

（1）document.createElement()

document.createElement()方法用来生成元素的节点，并返回该节点，示例如下：

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>清风不渡title>
head>
<body>

    <script>
        var newDiv = document.createElement("div");
        console.log(newDiv);
    script>

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

结果如下：
在这里插入图片描述

（2）document.createElement()

document.createElement() 方法用来生成文本节点（Text实例），并返回该节点，它的参数是文本节点的内容，示例如下：

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>清风不渡title>
head>
<body>

    <script>
        var newDiv = document.createElement("div");
        var str = document.createTextNode("hello word");
        console.log(newDiv);
        console.log(str);
    script>

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

结果如下：

在这里插入图片描述

（3）document.createAttribute()

document.createAttribute() 生成并返回一个新的属性节点，示例如下：

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>清风不渡title>
head>
<body>

    <script>
        var newDiv = document.createElement("div");
        var str = document.createTextNode("hello word");
        var className = document.createAttribute("class");
        console.log(newDiv);
        console.log(str);
        console.log(className);
    script>

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

结果如下：
在这里插入图片描述

3、示例

那么我们现在尝试着通过上面的方法生成一个新的标签，并把它展示在页面上，示例如下：

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>清风不渡title>
head>
<body>
    
    <div id="box">div>

    <script>
        //创建节点
        var newDiv = document.createElement("div");
        //创建文本内容
        var str = document.createTextNode("hello word");
        //创建class属性
        var calssName = document.createAttribute("class")
        //给class属性赋值
        calssName.value = "hello"
        //appendChild 将内容或子节点加到节点内部
        newDiv.appendChild(str);
        //将属性添加到节点中
        newDiv.setAttributeNode(calssName);
        //打印节点
        console.log(newDiv);

        //获取id为box的节点
        var box = document.getElementById("box");
        //将新创建的节点添加到box节点内部
        box.appendChild(newDiv);
        
    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
35
36
37

结果如下：

在这里插入图片描述

相关阅读:
数据结构题目收录（四）
java IO流详解
 算法题：摆动序列
 【rust】12、编译为 linux x86 目标
 机器学习强基计划2-1：一文总结熵——交叉熵、相对熵、互信息(附例题分析)
redis快速回顾
 FlutterUnit 周边 | 收录排序算法可视化
 Vue(调接口、组件、组件通信、生命周期)
2022-07-15 第六组润土 Java03数据结构学习笔记
 Element Plus 的 el-icon 到底怎么用？
原文地址：https://blog.csdn.net/WXKKang/article/details/126294717