JavaScript DOM-优快云博客

本文链接：https://blog.youkuaiyun.com/sparkstark/article/details/126299109

JavaScript DOM

一、概念

DOM：Document Object Model 文档对象模型

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

W3C DOM 标准被分为3个不同的部分：
1.核心 DOM - 针对任何结构化文档的标准模型
①Document:文档对象
②Element :元秦对象
③Attribute:属性对象
④Text:文本对象
⑤Comment:注释对象
⑥Node:节点对象，其他5个的父对象
2.XML DOM - 针对 XML 文档的标准模型
3.HTML DOM - 针对 HTML 文档的标准模型

二、核心DOM模型

2.1 Document:文档对象

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

①window.document

②document

2.获取Element对象:

①getElementById() ∶根据id属性值获取元秦对象。id属性值一般唯一

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

③getElementsByclassName():根据class属性值获取元素对象们。返回值是一个数组

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
        // 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>

⑤querySelector(): 获取文档中 class=“example” 的第一个元素:

document.querySelector(".example");

⑥querySelectorAll():获取文档中所有 class=“example” 的

元素，并为匹配的第一个

元素 (索引为 0) 设置背景颜色:

var x=document.querySelectorAll("p.example");
x[0].style.backgroundColor='red';

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <h2 id="test"></h2>
      <h3 class="demo"></h3>
      <ul>
         <li>无序列表第1项</li>
         <li class="demo">无序列表第2项</li>
         <li>无序列表第3项</li>
         <li>无序列表第4项</li>
         <li>无序列表第5项</li>
      </ul>
   </body>
   <script>
      var liEle=document.querySelector("li");
      console.log(liEle);
      
      var liEles = document.querySelectorAll("li");
      console.log(liEles);
      console.log(liEles[1]);
      
      var ele =document.querySelector("#test");
      console.log(ele);
      var eles = document.querySelector(".demo");
      console.log(eles);
      
      var demoEles =document.querySelectorAll(".demo");
      console.log(demoEles);
   </script>
</html>

3.创建其他DOM对象:

①createAttribute(name)

②createComment()

③createElement()

④createTextNode()

2.2 Element:元秦对象

获取/创建: 通过document来获取和创建
方法：
removeAttribute(): 删除属性
setAttribute():设置属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Element对象</title>
        <script>

        </script>
    </head>
    <body>
        <a>点我试一试</a>
        <input type="button" id="btn_set" value="设置属性">
        <input type="button" id="btn_remove" value="删除属性">
        <script>
            // 获取btn
            var btn_set = document.getElementById("btn_set");
            btn_set.onclick = function () {
                // 1.获取a标签
                var element_a = document.getElementsByTagName("a")[0];

                element_a.setAttribute("href", "https://www.baidu.com");
            };

            // 获取btn
            var btn_remove = document.getElementById("btn_remove");
            btn_remove.onclick = function () {
                // 1.获取a标签
                var element_a = document.getElementsByTagName("a")[0];
                element_a.removeAttribute("href");
            };
        </script>
    </body>
</html>

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

特点: 所有dom对象都可以被认为是一个节点
方法:
CRUD dom树:
appendChild():向节点的子节点列表的结尾添加新的子节点。
removeChild():删除（并返回）当前节点的指定子节点。
replaceChild():用新节点替换一个子节点。
属性:
parentNode 返回节点的父节点。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Node对象</title>
        <style>
            div {
                border: 1px solid red;
            }
            #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 id="del" href="javascript:void(0);">删除子节点</a>
        <a id="add" href="javascript:void(0);">添加子节点</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);
            };
            /*
            超链接功能:
                1.可以被点击:样式
                2.点击后跳转到href指定的url
            需求：保留1功能，去掉2功能
            实现：href="javascript:void(0);"
         */
            // parentNode 返回节点的父节点。
            var div2 = document.getElementById("div2");
            var div1 = div2.parentNode;
            alert(div1);
        </script>
    </body>
</html>