DOM（总结）

星灭233

已于 2022-01-21 14:07:12 修改

阅读量1.7k

点赞数

分类专栏： DOM 知识总结文章标签： dom js javascript

于 2021-03-29 22:10:08 首次发布

本文链接：https://blog.csdn.net/ksx2333/article/details/115288974

版权

知识总结同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

DOM

5 篇文章 0 订阅

订阅专栏

文章目录

前言

什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：
1）核心 DOM - 针对任何结构化文档的标准模型
2）XML DOM - 针对 XML 文档的标准模型
3）HTML DOM - 针对 HTML 文档的标准模型

本文主要讲的内容是HTML DOM

1 初识DOM

    DOM: Document Object Model 文档对象模型
        文档：html文档。
        对象：DOM元素对象  html元素对象
        模型：树模型  html标签就形成一课树

        DOM中有一套操作页面元素的属性和方法。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。
HTML DOM 是：HTML 的标准对象模型;/HTML 的标准编程接口；/W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
DOM 将 HTML 文档表达为树结构。
在这里插入图片描述

    <div class="box">我是一个div</div> 
        元素节点：<div class="box">我是一个div</div> 
        属性节点：class="box"
        文本节点：我是一个div

    DOM操作： 操作（增删改查）
        1）可以操作document  
        2）可以操作文档中各种标签  
            A）操作元素节点
            B）操作属性节点
            C）操作文本节点
        3）操作样式
            A）操作行内样式
            B）操作class类

2 获取DOM元素

通过JS获取页面中的元素，进行操作:

2.1 document.documentElement

得到整个文档（html元素）

2.2 document.head

得到head元素

2.3 document.body

得到body元素

2.4 document.getElementById()

根据一个ID获取DOM元素
仅仅是获取一个，因为ID是唯一
如果有对应的ID，就获取这个元素
如果没有这个ID，得到null

2.5 document.getElementsByClassName()

根据class名字获取页面上的DOM元素（获取多个）

                得到的是一个类数组（伪数组，长的像数组，本质不是数组）  数组是容器
                如果多个元素都有相同的class名字，得到多个DOM元素
                如果就一个标签有class名字，得到的也是一个伪数组，里面只有一个元素
                getElementsByClassName 用的不多  对于低版本的浏览器兼容性不太好

2.6 document.getElementsByTagName(“p”);

根据标签名来获取DOM元素
得到的也是一个伪数组只要是一个伪数组，就可以通过下标得到具体的元素

2.7 document.getElementsByName()

根据标签上的name属性得到的对应的DOM元素
得到的也是一个伪数组

2.8 document.querySelector(“选择器”);

根据选择器查找页面上对应的DOM元素
.box1是一个class选择器如果有多个，得到的满足条件的第1个

2.9 document.querySelectorAll(".box1")

获取多个元素也是一个伪数组

<body>
    <p class="item">这是一个p标签2</p>
    <span name="x1">我是一个span标签</span>
    <h1 id="box1">hello DOM 1 ~</h1>
    <h1 class="box1">hello DOM 2 ~</h1>
    <h1 class="box1">hello DOM 3 ~</h1>
    <script>
=============================1）document.documentElement  得到整个文档（html元素）
        // let html = document.documentElement;
        // console.log(html);
        console.log(document.documentElement);
        console.log("---------------------------");
=============================2）document.head 得到head元素
        // let head = document.head
        // console.log(head);
        console.log(document.head);
        console.log("---------------------------");
=============================3）document.body 得到body元素
        // let body = document.body
        // console.log(body);
        console.log(document.body);
        console.log("---------------------------");
=============================4）getElementById()  根据一个ID获取DOM元素
        // let div = document.getElementById("box")
        // console.log(div);
        console.log(document.getElementById("box1"));
        console.log("---------------------------");
=============================5）document.getElementsByClassName() 根据class名字获取页面上的DOM元素（获取多个）
        //   得到的是一个类数组（伪数组）  数组是容器
        // let ps = document.getElementsByClassName("item")
        // console.log(ps);
        console.log(document.getElementsByClassName("box1"));
        console.log("---------------------------");
=============================6）document.getElementsByName()  根据标签名来获取DOM元素
        // let ps = document.getElementsByTagName("p");
        // console.log(ps);
        console.log(document.getElementsByTagName("p"));
        console.log("---------------------------");
=============================7）document.getElementsByName()  根据标签上的name属性得到的对应的DOM元素
        // let spans = document.getElementsByName("x1")
        // console.log(spans[0]);
        // console.log(spans[1]);
        console.log(document.getElementsByName("x1"));
        console.log("---------------------------");
=============================8）document.querySelector("选择器");  根据选择器查找页面上对应的DOM元素
        // .box1是一个class选择器  如果有多个，得到的满足条件的第1个
        // let box = document.querySelector(".box1");
        // console.log(box);
        console.log(document.querySelector(".box1"));
        console.log("---------------------------");
=============================9）document.querySelectorAll(".box1") 获取多个元素 也是一个伪数组
        // let h1s = document.querySelectorAll(".box1");
        // console.log(h1s);
        console.log(document.querySelectorAll(".box1")[1]);
        console.log("---------------------------");
=============================10）document.title 获取当前页面title名
        console.log(document.title)
        console.log(document.title="你好测试")
    </script>
</body>

3 操作属性节点

3.1 标准属性和自定义属性：

        <div class="box" id="xxx" title="hello" abc="123" xyz="666" data-mn="888">我是div~</div>
        标准属性:指的是html中规定好的属性  class  id  title
        自定义属性：程序员自己写的属性  abc  xyz叫自定义属性
            在H5中规定，如果是自定义属性，最好使用data-打头  data-mn="888"

3.2 操作属性节点：

        属性节点是位于元素节点上面的。      获取属性节点，首先要得到元素节点。
        有两种方案，可以得到对应的属性节点：
            1）打点形式   div.className  input.type  img.alt
            2）getAttribute()  div.getAttribute("class")  input.getAttribute("type")
            区别：
                1）打点形式只能获取标准属性
                2）getAttribute()可以获取自定义属性，也能获取标准属性
            如果自定义属性是以data-打头，获取如下：
            <div class="box" data-mn="xixi">我是div~</div>
            console.log(div.dataset.mn);
            对于class需要特别注意，不能写class，需要换成className

<body>
    <div class="box" title="hello" abc="123" data-mn="xixi">我是div~</div>
    <input type="text">
    <img src="" alt="hello">
        <script>
        let div = document.querySelector("div")
        // 因于class在JS中是关键字，不能直接写class，需要给class换一个名字，换成className
        // console.log(div.className);
        // console.log(div.getAttribute("class"));  // 不需要改名字
        // console.log(div.abc); // 通过打点形式去拿自定义属性 不OK
        // console.log(div.getAttribute("abc"));
        console.log(div.dataset.mn);

        let input = document.querySelector("input")
        // console.log(input.type);
        console.log(input.getAttribute("type"));

        let img = document.querySelector("img")
        // console.log(img.alt);
        console.log(img.getAttribute("alt"));
    </script>
</body>

3.3 设置属性节点：

1）打点形式 div.title = "hello" 不能设置自定义属性
2）setAttribute() 可以设置自定义属性

<body>
    <div>我是div~</div>
        <script>
        let div = document.querySelector("div")
        // div.title = "hello"
        // div.id = "box"
        // div.abc = "xixi"
        div.setAttribute("title","hi")
        div.setAttribute("abc","hehe")
        div.style.color="red";//咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩扩
        div.setAttribute("title","hihihi")
        // div.setAttribute("title","")
    </script>
</body>

4 操作class属性

    操作类名：
        1）设置类名：
            元素.className="box"
        2）修改类名：
            元素.className="新值"
        3）追加类名：
            元素.className = 元素.className + " 新类名"  在新类名前面需要有一个空格
        4）删除类名：
            获取类型  置为空  截取字符串  循环遍历 删除你要删除的类型

    对于类名的操作，还有种形式：
        元素上有一个属性，叫classList   它里面就包含了所有的类名
        classList.add()
            添加类型
        classList.remove()
            删除类型
        classList.toggle()     
            （切换）有就删除，没有就添加
        ....

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <style>
        div{
            width: 100%;
            height: 50px;
            background:gold;
        }
        .box{
            border: 10px solid red;
        }
        .box2{
            border: 20px solid blue;
        }
        .box3{
            color: red;
        }
    </style>
</head>
<body>
    <button id="btn">点我</button>
    <div class="box">我是div标签</div>
    <script>
        let div = document.getElementsByTagName("div")[0]
        btn.onclick = function(){
            // div.className = "box"; // 设置类名
            // div.className = "box2" // 元素.className="新值"
            // div.className = div.className + " box3"
            // div.className = ""; // 删除类名
            // div.classList.add("box")
            // div.classList.remove("box")
            div.classList.toggle("box")
        }
    </script>
</body>
</html>

5 操作文本节点

    innerHTML：  用的最多的
        可读可写，针对的是标签中的内容
        读：获取标签中所有的内容，包含里面的所有的子标签  
           文本+标签
        写：box.innerHTML = "<strong>我是一个div</strong>"

    ----------------------
    innerText： 用的不多
        只针对文本，并不能获取标签

    ----------------------
    value：针对输入框中的文本节点

     <div>
         hello
         <p>你好</p>
         hello
     </div>
     <div id="box"></div>

   <script>
        let div = document.getElementsByTagName("p")[0]
        console.log(div);
        // 获取文本节点
        console.log(div.innerHTML);
        div.innerHTML="这都是少时诵诗书所所所"

        let box = document.getElementById("box")
        // 设置文本节点
        box.innerHTML = "<strong>我是一个div233</strong>"
    </script> 
    <!-- <script>
        let div = document.getElementsByTagName("div")[0]
        console.log(div.innerText);

        let box = document.getElementsByTagName("div")[1]
        box.innerText = "<strong>hello 你好~</strong>"
    </script> -->

    <script>
        let input = document.getElementsByTagName("input")[0];
        // console.log(input.value);
        input.value = "xxx"
    </script>

星灭233

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM（总结）

文章目录1 初识DOM2 获取DOM元素3 操作属性节点4 操作class属性5 操作文本节点1 初识DOM DOM: Document Object Model 文档对象模型文档：html文档。对象：DOM元素对象 html元素对象模型：树模型 html标签就形成一课树 DOM中有一套操作页面元素的属性和方法。 <div class="box">我是一个div</div>
复制链接

扫一扫