document对象获取元素，创建元素

最新推荐文章于 2024-08-27 13:51:43 发布

程序猿ZhangSir

最新推荐文章于 2024-08-27 13:51:43 发布

阅读量718

点赞数 8

分类专栏：前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_70325779/article/details/141562014

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一. doucument对象获取元素方法

1.1 document.getElementByTagName("")

1.2 documrnt.getElementByClassName("")

1.3 document.getElementById("")

1.4 document.getElementByName("")

1.5 document.querySelector("")

1.6 document.querySelectorAll("")

二. document对象创建元素方法

一. doucument对象获取元素方法

1.1 document.getElementByTagName("")

通过类名获取指定标签，双引号内填写标签名称，如果填入"*"，代表所有就会返回HTML文档全部的标签。

该方法通过搜索HTML标签名称来返回符合条件的元素。它的返回值类似于集合数组对象(HTML Collection 实例)，可以实时反应HTML文档的的变化，如果没有匹配到任何元素，就会返回一个空集。

如下代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>盒子1</div>
    <div>盒子2</div>
    <div>盒子3</div>
    <div>盒子4</div>

    <script>
        var divs = document.getElementsByTagName("div");
        console.log(divs);

        var ps = document.getElementsByTagName("p");
        console.log(ps);
    </script>

</body>
</html>

然后保存在浏览器打开开发者工具控制台，就可以看到在控制台输出的两个集合，divs集合含有四个div元素，而ps集合因为没有任何一个p标签而显示空集合

1.2 documrnt.getElementByClassName("")

通过标签class类属性值获取标签元素，该方法返回一个class属性为指定值的所有符合标签的元素集合，如果没有符合条件的标签，则返回一个空集合。

如下实例代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="contain1">盒子1</div>
    <div class="contain1">盒子2</div>
    <div class="contain2">盒子3</div>
    <div class="contain2">盒子4</div>

    <script>
        var list1 = document.getElementsByClassName("contain1");
        console.log(list1);

        var list2 = document.getElementsByClassName("contain2");
        console.log(list2);

    </script>

</body>
</html>

保存然后在浏览器打开控制台，就可以看到 list1 集合和 list2 集合各自含有两个元素

1.3 document.getElementById("")

该方法返回指定Id属性值的元素节点，由于各个Id值唯一，所以该方法返回值也只有一个，即指定的某个标签，而不会是多个，此外，该方法参数区分大小写。

如下代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="hezi">盒子1</div>
    <div id="Hezi">盒子2</div>
    <div id="heZi">盒子3</div>
    <div id="HEZI">盒子4</div>

    <script>
        var obj1 = document.getElementById("hezi");
        console.log(obj1);

        var obj2 = document.getElementById("Hezi");
        console.log(obj2);

        var obj3 = document.getElementById("heZi");
        console.log(obj3);

        var obj4 = document.getElementById("HEZI");
        console.log(obj4);
    </script>

</body>
</html>

保存在浏览器打开即可看到方法只返回一个元素，且区分大小写

1.4 document.getElementByName("")

通过标签name属性值获取符合元素的标签，方法返回值一个集合。但该方法并不常用，可作为了解。

示例代码如下：

<body>
    <div name="hezi">盒子1</div>
    <div name="hezi">盒子2</div>

    <div name="HEZI">盒子3</div>
    <div name="HEZI">盒子4</div>

    <div name="HeZi">盒子5</div>
    <div name="HeZi">盒子6</div>

    <script>
        var list1 = document.getElementsByName("hezi");
        console.log(list1);

        var list2 = document.getElementsByName("HeZi");
        console.log(list2);

        var list3 = document.getElementsByName("HeZi");
        console.log(list3);
    </script>

</body>

控制台输出list1、list2、list3元素集合

除了上述四个选择器之外，JavaScript在后来又新增了几个选择器，但下面要说的两种最为常用

1.5 document.querySelector("")

该方法可传入一个选择器作为参数，是前面几种选择器的合成体。如果想使用Id选择器，则双信号内填入#Id，如果是类选择器，则填入.class；

此外该方法返回匹配到的单个节点元素，如果匹配到多个，只会返回第一个，如果没有匹配到，则返回null；

如下示例代码

<body>
    <div class="contain">盒子1</div>
    <div class="contain">盒子2</div>

    <div id="a3">盒子3</div>
    <div name="HEZI">盒子4</div>

    <script>
        var obj1 = document.querySelector(".contain");
        console.log(obj1);
 
        var obj2 = document.querySelector("#a3");
        console.log(obj2);  
    </script>

</body>

保存在浏览地打开，即可得到如下所示结果，.Id值就是Id选择器，即便有两个符合，但仍然只返回第一个；#class值就是class选择器

1.6 document.querySelectorAll("")

上面我们说到了，document.querySelector选择器值返回单个元素对象，而document.querySelectorAll选择器则可以返回多个对象，而这没有太大区别，只是返回值一个为单个对象，一个为集合，因此通常情况下都会选用 document.querySelectorAll 选择器。这里就不再举例说明了。

二. document对象创建元素方法

通常情况下，我们写前端页面都是直接在HTML文档中通过标签来进行编写。但实际上，JavaScript也给我们提供了创建节点的方法，可以通过调用方法的方式创建页面标签，并填充文本和标签属性。

上面三个方法，createElement 可以创建一个标签元素；createTextNode 可以创建节点文本值；createAttribute 可以创建标签属性；

但是，调用这三个方法创建的三个对象是各自独立存在的，当我们需要将它们组合在一起形成一个完整的标签时，就需要调用 appendChild 方法和 setAttributeNode 方法，此方法可以将节点文本对象和属性对象加入到标签之内从而形成一个完整的标签；

示例代码如下

<body>
    <!-- 创建一个div盒子 -->
    <div id="abcde"></div>

    <script>
        // 创建p文本标签对象
        var p_tag = document.createElement("p");
        // 创建p标签文本值对象
        var p_text = document.createTextNode("我是p标签");
        // 创建p标签id值为aaa
        var p_id = document.createAttribute("id");
        // 给id赋值为aaa
        p_id.value = "aaa";
        console.log(p_tag);
        console.log(p_text);
        console.log(p_id);
        // 将文本对象添加至标签对象
        p_tag.appendChild(p_text);
        // 将id值添加至标签对象
        p_tag.setAttributeNode(p_id);

        // 获取div盒子对象
        var divObject = document.getElementById("abcde");
        // 将p标签添加值盒子内展示
        divObject.appendChild(p_tag);
    </script>

</body>

保存在浏览器打开，就可以看到在<p></p>标签内添加的内容已经显示在页面中了，且标签的属性也打印在控制台。

程序猿ZhangSir

关注

8
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
document对象获取元素，创建元素

但是，调用这三个方法创建的三个对象是各自独立存在的，当我们需要将它们组合在一起形成一个完整的标签时，就需要调用 appendChild 方法和 setAttributeNode 方法，此方法可以将节点文本对象和属性对象加入到标签之内从而形成一个完整的标签；该方法返回指定Id属性值的元素节点，由于各个Id值唯一，所以该方法返回值也只有一个，即指定的某个标签，而不会是多个，此外，该方法参数区分大小写。此外该方法返回匹配到的单个节点元素，如果匹配到多个，只会返回第一个，如果没有匹配到，则返回null；
复制链接

扫一扫

专栏目录