DOM（文档对象模型）（一）获取和操作元素、节点

最新推荐文章于 2022-09-22 18:26:39 发布

原创最新推荐文章于 2022-09-22 18:26:39 发布 · 913 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #dom #javascript

本文详细介绍了DOM的基本概念，包括如何获取DOM元素（如通过ID、类名、标签名等），操作属性节点（包括标准和自定义属性）、类名以及文本节点的方法，同时提供了全选反选的案例。

一、DOM是什么？

DOM: Document Object Model 文档对象模型

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

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

学习css时，可以把标签看成一个个的盒子，在学习DOM时，需要把标签看成一个个的对象。

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

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

二、获取DOM元素

1.获取整个文档

	<script>
        // 1.获取整个文档
        let res1=document.documentElement;
        console.log(res1);
    </script>

结果如下：
在这里插入图片描述

2.获取head元素

	<script>
        let head=document.head;
        console.log(head);
    </script>

结果如下：
在这里插入图片描述

3.获取body元素

	<script>
        let body=document.body;
        console.log(body);
    </script>

结果如下：
在这里插入图片描述

4.根据ID获取DOM元素

	<div id="box1">Hello DOM1</div>
    <script>
        let div=document.getElementById("box1");
        console.log(div);
    </script>

结果如下：
在这里插入图片描述

5.根据className获取DOM元素

得到的是一个类数组（伪数组）数组是容器

	<div class="box1">Hello DOM1</div>
    <script>
        let div=document.getElementsByClassName("box1");
        console.log(div);
    </script>

结果如下：
在这里插入图片描述

6.根据标签名获取DOM元素

	<div>Hello DOM1</div>
    <script>
        let div=document.getElementsByTagName("div");
        console.log(div);
    </script>

结果如下：
在这里插入图片描述

7.根据name属性获取DOM元素

	<div name="box1">Hello DOM1</div>
    <script>
        let div=document.getElementsByName("box1");
        console.log(div);
    </script>

结果如下：
在这里插入图片描述

8.根据选择器获取DOM元素

	<div class="box1">Hello DOM1</div>
    <div id="box2">Hello DOM2</div>
    <script>
        let div1=document.querySelector(".box1")
        let div2=document.querySelector("#box2")
        console.log(div1);
        console.log(div2);
    </script>

结果如下：
在这里插入图片描述

9.querySelectorAll选择器获取多个元素

	<div class="box1">Hello DOM1</div>
    <div class="box1">Hello DOM2</div>
    <script>
        let div=document.querySelectorAll(".box1")
        console.log(div);
    </script>

结果如下：
在这里插入图片描述

三、操作属性节点

标准属性和自定义属性：

例：

 <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”
操作属性节点：
属性节点是位于元素节点上面的。你要获取属性节点，首先你要得到元素节点。
有两种方案，可以得到对应的属性节点：
1）打点形式 div.className input.type img.alt
2）getAttribute() div.getAttribute(“class”) input.getAttribute(“type”)
区别：
1）打点形式只能获取标准属性
2）getAttribute()可以获取自定义属性，也能获取标准属性

如果自定义属性是以data-打头，获取时对于class需要特别注意，不能写class，需要换成className。

1.获取属性节点

（1）div标签

	<div class="box" title="hello" abc="123" data-mn="xixi">我是div~</div>
    <!-- 获取属性 -->
    <script>
        let div=document.querySelector("div")
        // 在打点获取时，因为class是JS的关键字，不能直接写class，要换成className
        console.log(div.className);
        console.log(div.getAttribute("class"));// 不需要改名字
        console.log("---------------------------------");
        console.log(div.abc);// 通过打点形式去拿自定义属性 不OK
        console.log(div.getAttribute("abc"));
        console.log("---------------------------------");
        // 以data- 开头的自定义属性，获取的时候要通过dataset.xx
        console.log(div.dataset.mn);
        console.log(div.getAttribute("data=mn"));//这样获取也不ok
    </script>

结果如下：
在这里插入图片描述
（2）其他标签

	<input type="text">
    <img src="" alt="hello">
    <script>
        let input=document.querySelector("input");
        let img=document.querySelector("img")
        console.log(input.type);
        console.log(input.getAttribute("type"));
        console.log("---------------------------------");
        console.log(img.alt);
        console.log(img.getAttribute("alt"));
    </script>

结果如下：
在这里插入图片描述

2.设置属性节点

（1）打点形式

	<div>我是div~</div>
    <script>
        let div = document.querySelector("div");
        div.title="hello"
        div.id = "box"
        div.abc = "xixi"//不pk 打点形式不能设置自定义属性
    </script>

结果：
在这里插入图片描述
（2）setAttribute()

	<div>我是div~</div>
    <script>
        let div = document.querySelector("div");
        div.setAttribute("title","hi")
        div.setAttribute("abc","hehe")//可以设置自定义属性
    </script>

结果如下：
在这里插入图片描述

四、通过class属性节点操作类名

1.打点形式

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

	<button id="btn">点我</button>
    <div>我是div标签</div>

    <script>
        let div = document.getElementsByTagName("div")[0]
        btn.onclick=function(){
            div.className = "box";//设置类名 元素.className="box"
            div.className = "box2"//修改类名 元素.className="新值"

            // 元素.className = 元素.className + " 新类名"  在新类名前面需要有一个空格
            div.className = div.className + " box3"//追加类名

            div.className=""//删除类名
        }
    </script>

2.classList形式

元素上有一个属性，叫classList 它里面就包含了所有的类名
add() 添加类型
remove() 删除类型
toggle() 有就删除，没有就添加
…

	<div>我是div标签</div>
	<script>
        let div = document.getElementsByTagName("div")[0]
        btn.onclick = function(){
            div.className.add("box");//添加类名
            div.classList.remove("box")//删除类名
            div.classList.toggle("box")//有这个类名就删除，没有就添加
        }
    </script>

五、操作文本节点

操作文本节点：
1）innerHTML
2）innerText
3）value

1.innerHTML

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

 	<div>
        hello world
        <p>你好世界</p>
        hello world
    </div>
    <div id="box"></div>
    <input type="text">
    
    <script>
        let div = document.getElementsByTagName("div")[0];
        console.log(div);
        console.log("--------------------------------");
        // 获得文本节点
        console.log(div.innerHTML);
        

        let box = document.getElementById("box")
        // 设置文本节点
        box.innerHTML = "<strong>我是一个div</strong>"
    </script>

结果如下：
在这里插入图片描述

2.innerText

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

	<div>
        hello world
        <p>你好世界</p>
        hello world
    </div>
    <div id="box"></div>
	<script>
        let div = document.getElementsByTagName("div")[0]
        console.log(div.innerText);

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

结果如下：
在这里插入图片描述

3.value

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

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

结果如下：
在这里插入图片描述
设置value：

	<script>
		<input type="text" value="hello input~">
        let input = document.getElementsByTagName("input")[0];
        input.value="123456";
        console.log(input.value);
    </script>

结果如下：
在这里插入图片描述

六、全选反选案例

	<div class="box">
        <div class="all">
            全选：<input type="checkbox">
        </div>
        <hr>
        <div class="items">
            选项一：<input type="checkbox"> <br>
            选项二：<input type="checkbox"> <br>
            选项三：<input type="checkbox"> <br>
            选项四：<input type="checkbox"> <br>
            选项五：<input type="checkbox"> <br>
        </div>
    </div>
    <script>
        let allBtn=document.getElementsByTagName("input")[0];
        let itemBtns=document.querySelectorAll(".items input");

        // 给全选按钮添加点击事件
        allBtn.onclick=function(){
            let type=allBtn.checked;
            itemBtns.forEach(item => {
                item.checked=type;
            });
        }
        // 当下面的按钮全部被选中，全选按钮也要被选中
        // 循环给下面的按钮添加点击事件
        itemBtns.forEach(item => {
            item.onclick=function(){
                var flag=true;
                itemBtns.forEach(item=>{
                    if(!item.checked){
                        flag=false;
                    }
                })
                allBtn.checked=flag
            }
        });
    </script>