JavaScript -- DOM

沉迷于搬砖

已于 2022-11-08 22:04:42 修改

阅读量573

点赞数

分类专栏：笔记文章标签： javascript 前端

于 2022-08-24 14:44:06 首次发布

本文链接：https://blog.csdn.net/weixin_45960356/article/details/126027168

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM文档对象模型的概念、结构及其常见操作，包括获取页面元素的方法如通过id、标签名、类名等，以及事件监听和处理。同时，文章提供了多个示例，演示了如何动态创建元素、修改内容、处理表单元素属性以及应用DOM节点操作。此外，还探讨了事件的基本应用，包括各种鼠标事件和元素属性的操作，以及如何通过事件监听来实现特定功能。

摘要由CSDN通过智能技术生成

DOM 文档对象模型

1、DOM 概念

1、文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

2、webAPI接口学习文档：https://developer.mozilla.org/zh-CN/docs/Web/API

2、DOM 树

DOM又称为文档树模型
文档：一个网页可称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性

3、DOM 常见操作

获取元素
对元素进行操作（设置其属性或调用其方法）
动态创建元素
事件（什么时机做相应的操作）

4、DOM 获取页面元素

1、根据id获取元素

方法：调用document对象的getElementById方法
参数：字符串类型的id的属性值
返回值：对应id名的元素对象
注意1：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用
注意2：代码执行顺序，如果js在HTML结构之前，会导致结构未加载，js先加载，从而导致不能获取对应id的元素

案例：根据ID获取元素

<!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>根据ID获取元素</title>
</head>
<body>
    <p id="para">test1</p>
    <p id="box">test2</p>
    <p>test3</p>    
    <p>test4</p>
    <script>
        var para = document.getElementById("para");
        console.log(para);
        // console.log(typeof para); 打印对象类型
        // 在控制台中打印具体对象
        console.dir(para); 
    </script>
</body>
</html>

2、根据标签名获取元素

方法：调用document对象的getElementsByTagName方法
参数：字符串类型的标签名
返回值：同名的元素对象组成的数组
注意1：操作数据时需要按照操作数组的方法进行
注意2：getElementsByTagName方法内部获取的元素是动态增加的
案例：根据标签名获取元素

	<!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>根据标签获取元素</title>
	</head>
	<body>
	    <p>test1</p>
	    <p>test2</p>
	    <p>test3</p>
	    <p>test4</p>
	    <div>div1</div>
	    <div>div2</div>
	    <div>div3</div>
	    <script>
	        var divs = document.getElementsByTagName("div");
	        console.log(div);
	        // 输出结果为：HTMLCollection html元素组成的集合，是伪数组
	        // 如果需要进行操作，需要按照数组操作方式进行
	        // 遍历该数组
	        for (var i = 0; i <= divs.length; i++) {
	            // 输出每一项
	            console.log(divs[i]);
	        }
	    </script>
	</body>
	</html>

元素对象内部获取标签元素

获取的元素对象内部，本身也可调用根据标签获取元素方法，例如div元素对象也可调用getElementsByTagName方法
目的：缩小选择元素的范围，类似CSS中的后代选择器

3、根据name获取元素

方法：调用document对象的getElementsByName方法
参数：字符串类型的name属性值
返回值：name属性值相同的元素对象组成的数组
不推荐使用：在IE和Opera中有兼容问题，会多选中id属性相同的元素

4、根据类名获取元素

方法：调用document对象的getEllementsByClassName方法
参数：字符串类型的class属性值
返回值：class属性值相同的元素对象组成的数组
浏览器兼容问题：不支持IE8及以下的浏览器

5、根据选择器获取元素

方法1：调用document对象的querySelector方法，通过CSS中的选择器去选取第一个符合条件的标签元素
方法2：调用document对象的querySelectorAll方法，通过CSS中的选择器中选取所有符合条件的标签元素
参数：字符串类型的CSS中的选择器
浏览器兼容问题：不支持IE8以下的浏览器

DOM 事件基本应用

1、事件

事件：在什么时候做什么事
执行机制：触发–相应机制
绑定事件（注册事件）三要素：
1、事件源：给谁绑定事件
2、事件类型：绑定什么类型的事件click单击
3、事件函数：时间发生后执行什么内容，写在函数内部

2、事件监听

JavaScript解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发对应的绑定事件，会立即执行事件函数

1、常用事件监听方法

方法1：绑定HTML元素属性
方法2：绑定DOM对象属性

2、常用的鼠标事件类型

onclick：鼠标左键单击出发
ondblclick：鼠标左键双击触发
onmousedown：鼠标按键按下触发
onmouseup：鼠标按键放开时触发
onmousemove：鼠标在元素上移动触发
onmouseover：鼠标移动到元素上触发
onmouseout：鼠标移出元素边界触发

3、非表单元素的属性

例如：href、title、id、src等
调用方式：元素对象打点调用属性名，例如obj.href
注意：部分的属性名跟关键字和保留字冲突，会更换写法
class -> className
for -> htmlFor
rowspan -> rowSpan
属性赋值：给元素属性赋值，等号右侧的赋值都是字符串格式

案例1：点击切换图片
文件结构：
在这里插入图片描述

<!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>图片切换</title>
</head>
<body>
    <input type="button" value="点击" id="btn"><br />
    <img src="images/picture1.jpg" id="pic">

    <script>
        // 获取元素
        var btn = document.getElementById("btn");
        var pic = document.getElementById("pic");

        // 通过变量设置判断条件，当n为1，默认加载1图片，n为2，加载2图片
        var n = 1;

        // 给按钮添加点击事件
        btn.onclick = function () {
            // 给图片换src的属性值
            // 通过if语句判断，如果是1图片就换成2图片，反之换成1图片
            if (n === 1) {
                pic.src = "images/picture2.jpg";
                n = 2;
            } else {
                pic.src = "images/picture1.jpg";
                n = 1;
            }

        }

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

说明：图片随便找几张放在对应文件夹即可

案例2：点击按钮显示隐藏div

<!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>点击按钮显示隐藏div</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .hide {
            display: none;
        }

        .show {
            display: block;
        }
    </style>
</head>
<body>
    <input type="button" value="点击隐藏" id="btn">
    <div id="box"></div>

    <script>
        var btn = document.getElementById("btn");
        var box = document.getElementById("box");
        
        btn.onclick = function () {
            if (btn.value === "点击隐藏") {
                box.className = "hide";
                btn.value = "点击显示";
            } else {
                box.className = "show";
                btn.value = "点击隐藏";
            }
        };
    </script>

</body>
</html>