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

清风不渡

已于 2022-08-22 12:13:36 修改

阅读量1.8k

点赞数 1

分类专栏：前端研习录文章标签：前端 javascript html5

于 2022-08-11 23:43:25 首次发布

本文链接：https://blog.youkuaiyun.com/WXKKang/article/details/126294717

版权

前端研习录专栏收录该内容

44 篇文章

订阅专栏

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

版权声明

本文原创作者：清风不渡
博客地址：https://blog.youkuaiyun.com/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 Word</div>
    <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>

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

（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 Word</div>
    <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>

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

注意：参数可以是多个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>

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

（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 Word</div>
    <div id="my">My name is 清风不渡</div>

    <script>
        var my = document.getElementById("my");
        console.log(my);
        
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

（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 Word</div>
    <div class="hello">Hello China</div>
    <div class="my">My name is 清风不渡</div>

    <script>
        var hello = document.querySelector(".hello");
        console.log(hello);
        
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

（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 Word</div>
    <div class="hello">Hello China</div>
    <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>

结果如下：

在这里插入图片描述

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>

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

（2）document.createTextNode()

document.createTextNode() 方法用来生成文本节点（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>

结果如下：

在这里插入图片描述

（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>

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

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>

结果如下：

在这里插入图片描述