JavaScript 05 DOM详解

## DOM：
* 概念： Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作

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

       * 核心 DOM - 针对任何结构化文档的标准模型
           * Document：文档对象
           * Element：元素对象
           * Attribute：属性对象
           * Text：文本对象
           * Comment:注释对象

           * Node：节点对象，其他5个的父对象
       * XML DOM - 针对 XML 文档的标准模型
       * HTML DOM - 针对 HTML 文档的标准模型

   * 核心DOM模型：
       * Document：文档对象
           1. 创建(获取)：在html dom模型中可以使用window对象来获取
               1. window.document
               2. document
           2. 方法：
               1. 获取Element对象：
                   1. getElementById()   ：根据id属性值获取元素对象。id属性值一般唯一
                   2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
                   3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                   4. 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>
        /*根据元素名称获取元素对象们*/
        var divs = document.getElementsByTagName("div");
        alert(divs.length);//5
        /*根据Class属性值获取元素对象们*/
        var div_cls = document.getElementsByClassName("cls1");
        alert(div_cls.length);//2
    </script>
</body>
</html>

               2. 创建其他DOM对象：
                   createAttribute(name)
   createComment()
   createElement()
   createTextNode()
           3. 属性
       * Element：元素对象
           1. 获取/创建：通过document来获取和创建
           2. 方法：
               1. removeAttribute()：删除属性
               2. setAttribute()：设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>
</head>
<body>
    <!--超链接-->
    <a>点我</a>
    <!--设置按钮-->
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">

    <script>
        /*获取设置属性按钮*/
        var btn_set = document.getElementById("btn_set");
        /*给设置属性按钮添加点击事件*/
        btn_set.onclick = function () {
            /* 获取a标签/超链接标签 */
            /*获取标签，返回的是数组，[0]为数组中第一个标签，在这里只有唯一一个超链接标签*/
            var element_a = document.getElementsByTagName("a")[0];
            element_a.setAttribute("href","https://www.baidu.com");
        }

        /*获取删除属性按钮*/
        var btn_remove = document.getElementById("btn_remove");
        /*给删除属性按钮添加点击事件*/
        btn_remove.onclick = function () {
            /* 获取a标签/超链接标签 */
            var element_a = document.getElementsByTagName("a")[0];
            element_a.removeAttribute()("href","https://www.baidu.com");
        }
    </script>
</body>
</html>

设置属性之后再点击超链接即可前往百度官网

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

   * HTML DOM
       1. 标签体的设置和获取：innerHTML
       2. 使用html元素对象的属性
       3. 控制元素样式
           1. 使用元素的style属性来设置
               如：
                   //修改样式方式1
           div1.style.border = "1px solid red";
           div1.style.width = "200px";
           //font-size--> fontSize
           div1.style.fontSize = "20px";
           2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

Small rain

发布了66 篇原创文章 · 获赞 0 · 访问量 1107

私信关注

JavaScript 05 DOM详解

猜你喜欢