DOM 基础操作

article/2025/10/19 14:24:46

文章目录

前言
一、DOM 简介
- 1.1 什么是 DOM
二、获取元素
- 2.1 如何获取页面元素
- 2.2 根据 ID 获取
- 2.3 根据标签名获取
- 2.4 通过 HTML5 新增的方法获取
- 2.5 获取特殊元素（body，html）
三、事件基础
- 3.1事件三要素
- 3.2 执行事件的步骤
- 3.3常见的鼠标事件
四、操作元素
- 4.1 常用元素的属性操作
- 4.2 样式属性操作

前言

本文是博主的一些笔记跟想法，如果觉得本文有点东西请个博主点个关注，你的支持是我更新的动力，先赞后看养成习惯。
在这里插入图片描述

以下是本篇文章正文内容

一、DOM 简介

1.1 什么是 DOM

一个完整的 JavaScript 实现由以下 3 个不同部分组成：

核心（ECMAScript）：语言核心部分，描述了该语言的语法和基本对象。
文档对象模型（Document Object Model，DOM）：网页文档操作标准，描述处理网页内容的方法和接口。
浏览器对象模型（BOM）：客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

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

在这里插入图片描述

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM 把以上内容都看做是对象

二、获取元素

2.1 如何获取页面元素

DOM在我们实际开发中主要用来操作元素。
我们如何来获取页面中的元素呢?获取页面中的元素可以使用以下几种方式:

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

2.2 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

<form action=""><input type="text" id="num" /><br><input type="button" value="查看结果"/>
</form>
<script type="text/javascript">//获取到id为num的input标签document.getElementById('num')
</script>

·通过id获取是比较简单快捷的方法·

2.3 根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

<form action=""><input type="text" id="num" /><br><input type="button" value="查看结果"/>
</form>
<script type="text/javascript">//获取到id为num的input标签document.getElementsByTagName('input')//会获取到所有的input标签
</script>

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的

2.4 通过 HTML5 新增的方法获取

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回

这里就说一下querySelector 与querySelectorAll

querySelector返回满足条件的第一个元素（node），而querySelectorAll返回满足条件的所有元素
在都没有满足条件的元素情况下：querySelector返回null，而querySelectorAll返回空的数组[ ]。

<div id="box"><h2 class="box-text">h2</h2><p class="box-text">p</p>
</div><button type="button" onclick="show()">点我</button>
<script>function show(){var x= document.getElementById('box')var arr = x.querySelectorAll('.box-text')for(var i=0; i<arr.length; i++){arr[i].innerHTML='改变了！'}}
</script>

在这里插入图片描述

2.5 获取特殊元素（body，html）

1.获取body元素

doucumnet.body // 返回body元素对象

2.获取html元素

document.documentElement // 返回html元素对象

三、事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解：触发— 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

3.1事件三要素

事件源（谁）
事件类型（什么事件）
事件处理程序（要做什么）

var btn = document.getElementById('btn');
btn.onclick = function() {alert('你好吗'); 
};

3.2 执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

3.3常见的鼠标事件

注：以下图片的事件只是常见的并不代表所有

在这里插入图片描述
案例

以下案例用到了 经过触发离开触发点击触发 三个事件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">img{display: block;margin: 0 auto;cursor: pointer;}</style><script>function change(r){//形参var imgobj = document.getElementById("img") //判断事件里面的实参if(r=='horse'){imgobj.src = "img/horse.jpg"}else if(r=='dog'){imgobj.src= "img/dog.jpg"}else{imgobj.src= "img/mokey.jpg"}}</script></head><body><img src="img/dog.jpg" id="img" onmouseover="change('horse')" onmouseout="change('dog')" onclick="change('mokey')"></body>
</html>

四、操作元素

avaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。注意以下都是属性

4.1 常用元素的属性操作

innerText、innerHTML 改变元素内容
src、href
id、alt、title

案例

<body><a href="https://www.sohu.com/" id="link" title="sohu">搜狐</a>
</body>
<script>
window.onload=function(){var liobj=document.getElementById("link")liobj.href="https://www.baidu.com"liobj.title='百度'liobj.innerHTML='百度'liobj.className='link'
}
</script>

<div id="box">我是div原来的文字</div><script>var box =document.getElementById("box")box.onmouseover=function(){this.innerHTML='<font color="red">我是处理过的</font>'}box.onmouseout=function(){this.innerText="<font color='red'>我是div原来的文字</font>"}</script>