JavaScript中的DOM

原创已于 2025-08-10 16:16:59 修改 · 1.1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2025-07-07 19:35:11 首次发布

1.什么是DOM

DOM 全称 Document Object Model（文档对象模型）它是 HTML 和 XML 文档的编程接口，将整个文档建模为一个树形结构（称为 DOM 树）使得开发者可以通过javascript等编程语言来访问、修改、添加或删除文档中的元素、属性和内容

2.DOM的结构

又被称为DOM树，DOM 树是由文档中的所有元素、属性、文本等构成的一种树状结构

每个节点代表文档中的一个部分：

根节点：HTML 文档的 <html> 标签是 DOM 树的根节点

元素节点：每个 HTML 标签对应一个元素节点

属性节点：每个标签的属性（如 id, class 等）作为一个属性节点

文本节点：包含在标签之间的文字内容作为文本节点这种结构允许开发者通过 JavaScript 对页面进行导航和修改

3.DOM中获取元素的常用方法

(1)getElementById(id)

根据指定的 id 属性值获取唯一的元素返回单个元素（因为 id是唯一的）

如果你有一个元素 <div id="myDiv">Hello</div>，
你可以使用 document.getElementById("myDiv") 来获取这个 div 元素

(2)getElementsByClassName(className)

根据指定的 class 名称获取一组元素返回一个类数组对象（HTMLCollection）

//如果在你的HTML页面中有下面几个元素
<div id="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box2">盒子3</div>
<div class="box2">盒子4</div>

//你可以使用document.getElementsByClassName('box2')来获取全部，
//返回一个动态的 HTMLCollection,类似于数组
let get = document.getElementsByClassName('box2')

//你也可以通过索引来获取想要的元素，比如
let gets = document.getElementsByClassName('box2')
console.log(gets[1])
//你就可以得到
<div class="box2">盒子3</div>

(3)getElementsByTagName(tagName)

根据指定的 HTML 标签名获取一组元素返回一个类数组对象（HTMLCollection）

//如果在你的HTML页面中有下面几个元素
<div id="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box2">盒子3</div>
<div class="box2">盒子4</div>

// 根据标签名来获取对应的<div>元素
let divbox = document.getElementsByTagName('div')
console.log(divbox)

(4)querySelector(selector)

使用 CSS 选择器语法匹配第一个符合条件的元素返回单个元素

//如果在你的HTML页面中有下面几个元素
<div id="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box2">盒子3</div>
<div class="box2">盒子4</div>

// 根据类名来获取第一个对应的<div>元素
let box2 = document.querySelector('.box2')
console.log(box2)

// 你将会得到
<div class="box2">盒子2</div>

(5)querySelectorAll(selector)

使用 CSS 选择器语法匹配所有符合条件的元素返回一个类数组对象（NodeList）

//如果在你的HTML页面中有下面几个元素
<div id="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box2">盒子3</div>
<div class="box2">盒子4</div>

// 根据类名来获取所有的<div>元素
let box2s = document.querySelectorAll('.box2')
console.log(box2s)

4.事件

（1）事件概述

事件是用户或浏览器执行某种操作时触发的行为，例如点击按钮、输入文字、页面加载完成等JavaScript 通过事件驱动的方式实现与用户的交互

（2）事件三要素

要成功绑定并执行一个事件，必须具备以下三个要素：

(1)事件源：哪个对象触发了事件（如按钮 <button>）

(2)事件类型：触发的是什么类型的事件（如 click, mouseover）

(3)事件处理程序：当事件发生时，应该执行的代码逻辑（通常是一个函数）

（3）常见的鼠标事件

click 鼠标单击事件 dblclick 鼠标双击事件

mousedown 鼠标按键按下 mouseup 鼠标按键释放

mousemove 鼠标在元素上移动 mouseover 鼠标移入元素

mouseout 鼠标移出元素

在这介绍一下click的用法，其他都大同小异

首先我们可以创建一下HTML页面，在里面设计一个按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="btn1">按钮</button>
<script src="鼠标点击.js"></script>

</body>
</html>

下一步在js页面中写下执行的操作

//创建一个变量获取页面中的元素
let btn1 = document.getElementById('btn1')

//当js页面收到来自HTML页面的信息后将执行以下操作
btn1.onclick = function(){
    //页面上方将出现提示
    alert('btn1被点击了')
    console.log('btn1被点击了')
}

效果如图

拓展：

在js中，我们还可以用另外一种写法，它也会显得更加的灵活


btn1.addEventListener('click',function(){
    alert('你点击了btn1')
})

效果如图

其他的鼠标事件只需要将其中的type也就是click修改成你需要的操作，即可实现

标签

#javascript #前端 #html