08DOM（文档对象模型）

最新推荐文章于 2024-05-30 23:32:17 发布

输出机器

最新推荐文章于 2024-05-30 23:32:17 发布

阅读量81

点赞数

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

本文链接：https://blog.csdn.net/qq_44974028/article/details/124534849

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DOM：Document Object Model 文档对象模型

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档标签进行CRUD（增删改查）的动态操作

W3C DOM标准被分为3个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

核心 DOM - 针对任何结构化文档的标准模型

Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment:注释对象
Node：节点对象，其他5个的父对象

核心DOM模型：

Document：文档对象

1. 创建(获取)：在html dom模型中可以使用window对象来获取

window.document

document

2. 方法：

获取Element对象：

getElementById() ：根据id属性值获取元素对象。id属性值一般唯一

getElementsByTagName()：根据元素名称获取元素对象。返回值是一个数组

getElementsByClassName():根据Class属性值获取元素对象。返回值是一个数组

getElementsByName(): 根据name属性值获取元素对象。返回值是一个数组

创建其他DOM对象：

createAttribute(name)

createComment()

createElement()

createTextNode()

<!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="div1">div1</div>

    <div id="div2">div2</div>

    <div id="div3">div3</div>

    <div class="cls1">div4</div>
    <div class="cls1">div5</div>

    <input type="text" name="username">
    <script>
        // 1.根据id来获取元素对象
        var divv = document.getElementById("div1");

        //2.根据元素名称获取元素对象。返回值是一个数组
        var divs = document.getElementsByTagName("div");
        //alert(divs.length);

        //3.根据Class属性值获取元素对象。返回值是一个数组
        var div_cls = document.getElementsByClassName("cls1");
       // alert(div_cls.length);

        //4.根据name属性值获取元素对象。返回值是一个数组
        var ele_username = document.getElementsByName("username");
        //alert(ele_username.length);
    
        var table = document.createElement("table");
        alert(table);
    </script>
</body>
</html>

Element：元素对象

获取/创建：通过document来获取和创建

方法：

removeAttribute()：删除属性

setAttribute()：设置属性

<!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>Element对象</title>
</head>
<body>
    <a>请点击</a>
    <input type="button" id="btn_id" value="设置属性">
    <input type="button" id="btn_id1" value="删除属性">
    <script>
        // 获取按钮
        var btn = document.getElementById("btn_id");
        btn.onclick = function(){
            // 获取标签a,getElementsByTagName获取的返回的是数组
            // 设置属性
            var ele_a = document.getElementsByTagName("a")[0];
            ele_a.setAttribute("href","www.baidu.com");
        }

        var btn1 = document.getElementById("btn_id1");
        btn1.onclick = function(){
            var ele_a = document.getElementsByTagName("a")[0];
            ele_a.removeAttribute("href");
        }
    </script>
</body>
</html>

Node：节点对象，其他5个的父对象

特点：所有dom对象都可以被认为是一个节点

方法：

CRUD dom树：

appendChild()：向节点的子节点列表的结尾添加新的子节点。

removeChild() ：删除（并返回）当前节点的指定子节点。

replaceChild()：用新节点替换一个子节点。

属性：

parentNode 返回节点的父节点。

<!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>Node对象</title>
    <style>
        div{

            border: 1px solid rgb(231, 22, 169)

        }
        #div1{
            width: 200px;
            height: 200px;
        }

        #div2{
            width: 100px;
            height: 100px;
        }


        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <!--<input type="button" id="del" value="删除子节点">-->
    
    <script>
    //1.获取超链接
    var element_a = document.getElementById("del");
    //2.绑定单击事件
    element_a.onclick = function(){
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }

    //1.获取超链接
    var element_add = document.getElementById("add");
    //2.绑定单击事件
    element_add.onclick = function(){
        var div1 = document.getElementById("div1");
        //给div1添加子节点
        //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");

        div1.appendChild(div3);
    }

    var div2 = document.getElementById("div2");
    var div1 = div2.parentNode;
    alert(div1);

    </script>
    
</body>
</html>

HTML DOM

1. 标签体的设置和获取：innerHTML

2. 使用html元素对象的属性

3. 控制元素样式

使用元素的style属性来设置

提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

输出机器

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
08DOM（文档对象模型）

DOM：Document Object Model 文档对象模型将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档标签进行CRUD（增删改查）的动态操作W3C DOM标准被分为3个不同的部分：核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型核心 DOM - 针对任何结构化文档的标准模型Document：文档对象 Element：元素对象 At...
复制链接

扫一扫