如何使用DOM对象获取页面元素并操作？

南枫知我意～

已于 2023-11-16 16:19:48 修改

阅读量136

点赞数 1

文章标签：前端 javascript 开发语言

于 2023-09-16 08:00:00 首次发布

本文链接：https://blog.csdn.net/LOVEcao_YU/article/details/132903356

版权

一、DOM简介

文档对象模型（DOM）是 web 上构成文档结构和内容的对象的数据表示。

文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。

网页是一个既可以在浏览器窗口中显示，也可以作为 HTML 源代码的文档。在这两种情况下，它都是同一个文档，但文档对象模型（DOM）的表示方式使它可以被操作。作为一个面向对象的网页表示，它可以用脚本语言（如 JavaScript）进行修改。

二、获取页面元素

常用方法：

document.getElementById("id");使用id属性的值查找元素

document.getElementByName("name");通过name属性的值查找元素，因为name属性可以重复，所以返回的是元素数组

document.getElementByClassName("class");通过class属性的值查找元素，因为class属性可以重复，所以返回的是元素数组

document.getElementByTagName("标签名");通过标签名查找元素，因为标签名可以重复，所以返回的是元素数组

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

</head>
<body>
    <div name="test">d1</div>
    <div id="d1">d2</div>
    <div name="test">d3</div>
    <div class="demo">d4</div>
    <p class="demo">p</p>
    <script>
        var id=document.getElementById("d1");
        console.log(id);

        var n=document.getElementsByName("test");
        console.log(n);

        var c=document.getElementsByClassName("demo");
        console.log(c);

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

三、操作页面元素

1.创建dom对象

document.createElement("标签名");

2.添加dom对象

（1）A.appendChild(B)将B添加到A内部的最后面

（2）A.insertBefore(B,C)将B添加到A内部的C的前面

3.删除dom对象

（1）A.remove 将A删除

（2）A。removeChild(B) 将A内部的B删除

4.替换dom对象

A.replaceChild(B,C) 用B替换A内部的C

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
    <div id="test">
        <h1>这是DIV里面的标题</h1>
        <p>这是DIV里面的段落</p>
    </div>
    <script>
        var tb=document.createElement("a");//创建一个能够跳转到淘宝的超链接
        tb.href="http://www.taobao.com";//给新创建的标签的href属性赋值
        tb.innerText="淘宝";//在新建的标签中添加文本
        var demo=document.getElementById("test");//获取ID为test的标签
        //demo.appendChild(tb);//将新建的标签放到ID为test的标签中的最后面
        var p=document.getElementsByTagName("p")[0];//获取想要的标签位置
        //demo.insertBefore(tb,p);//将新建的标签放到ID为test的标签中的P标签的前面
        //demo.removeChild(p);//删除ID为test的标签中的P标签
        demo.replaceChild(tb,p);//将新建的标签去替换ID为test的标签中的P标签
    </script>
</body>
</html>

四、操作元素属性

1.页面元素.属性名="值";

2.设置：标签对象.setAttribute("属性名","属性值"); 标签对象.属性名="值";

3.获取：标签对象.getAttribute("属性名"); 标签对象.属性名;

4.删除：标签对象.removeAttribute("属性名")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
    <input type="text" id="username" name="uname" maxlength="6" value="cy">

    <script>
        //获取id为username的标签
        var id=document.getElementById("username");
        
        //console.log(id.value);//获取该标签VALUE属性的值
        console.log(id.getAttribute("value"));

        //id.value="JACK";//设置该标签的VALUE属性的值为JACK
        id.setAttribute("value","JACK");

        id.removeAttribute("value");//删除该标签的value值
    </script>
</body>
</html>

#学无止境#