当前位置：首页 > article >正文

JavaScript【5】DOM模型

article 2025/9/22 1:11:41

1.概述：

DOM (Document Object Model)：当页面被加载时，浏览器会创建页面的文档对象模型，即dom对象；

dom对象会被结构化为对象树，如一个HTML文档会被分为head，body等部分，而每个部分又被继续细分，其中每个标签都是一个对象，即形成一个对象树，如下如所示：

 ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1731920399363-3ef54c48-a208-4142-8d08-4bf88e7c9933.png)

2.节点：

1.概述：节点是HTML文档的基本组成单位；

2.分类：

    **文档节点 ：整个HTML页面**

    **        元素节点 ：HTML中的标签**

    **        属性节点 ：标签的属性**

    **        文本节点 ：HTML标签的文本内容**

3.获取元素节点：

1.通过标签id获取：getElementById（）；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="btn" class="btnA">我是按钮A</button>
<button  class="btnA">我是按钮B</button>
<ul class="list"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li>
</ul>
<script>//通过id获取console.log( document.getElementById('btn'))</script>
</body>
</html>

2.通过class属性名获取：getElementsByClassName（）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="btn" class="btnA">我是按钮A</button>
<button  class="btnA">我是按钮B</button>
<ul class="list"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li>
</ul>
<script>console.log( document.getElementsByClassName('btnA'))</script>
</body>
</html>

3.通过标签名获取：getElementsByTagName（）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="btn" class="btnA">我是按钮A</button>
<button  class="btnA">我是按钮B</button>
<ul class="list"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li>
</ul>
<script>//通过标签名获取console.log(document.getElementsByTagName('button'))</script>
</body>
</html>

4.通过选择器获取：

```
     querySelector:获取一个
```
```
     querySelectorAll：获取多个
```

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="btn" class="btnA">我是按钮A</button>
<button  class="btnA">我是按钮B</button>
<ul class="list"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li>
</ul>
<script>//通过选择器精确获取let list = document.querySelectorAll(".list li");console.log(list);
</script>
</body>
</html>

4.获取HTML值：

1.获取/修改文本内容：innerText

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box"><button id="btn">我是按钮</button><input type="text" id="userCode" value="我是默认值"/>
</div><script>let btn = document.getElementById("btn");//获取 标签的文本属性console.log(btn.innerText)//改变 标签的文本属性btn.innerText = '点我试试'let box = document.getElementById("box");//获取div的文本属性// console.log(box.innerText)// 获取div中 带有HTML的文本属性// console.log(box.innerHTML)//设置带有HTML结构的文本属性 到box中// box.innerHTML += "<b>测试数据</b>";
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box"><button id="btn">我是按钮</button><input type="text" id="userCode" value="我是默认值"/>
</div><script>let box = document.getElementById("box");//获取div的文本属性console.log(box.innerText)//获取div中 带有HTML的文本属性console.log(box.innerHTML)//设置带有HTML结构的文本属性 到box中box.innerHTML += "<b>测试数据</b>";
</script>
</body>
</html>

2.获取/修改元素属性值：

方式1：对象名.属性名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box"><button id="btn">我是按钮</button><input type="text" id="userCode" value="我是默认值"/>
</div><script>let userCode = document.getElementById("userCode");//获取元素的属性 对象名.属性名// console.log(userCode.value)//改变属性值// userCode.value = "测试数据"
</script>
</body>
</html>

方式2：getAttribute（‘属性名’）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box"><button id="btn">我是按钮</button><input type="text" id="userCode" value="我是默认值"/>
</div><script>//获取 元素的属性 值 getAttribute("属性名")let value = userCode.getAttribute("value")console.log(value)//设置属性值 到属性中userCode.setAttribute("value","测试数据");
</script>
</body>
</html>

5.获取父子节点：

1.获取父节点：parentNode/parentElement

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="box"><ul id="ul"><li><a href="#">点我试试A</a></li><li id="two"><a href="#">点我试试B</a></li><li><a href="#">点我试试1</a></li><li><a href="#">点我试试2</a></li></ul>
</div><script>let box = document.getElementById("box");let ul = document.getElementById("ul");let two = document.getElementById("two");//获取父级节点console.log(ul.parentNode)console.log(ul.parentElement)
</script>
</body>
</html>

              ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1731923954376-33448942-eb1d-4a2b-8962-c063d49bf8a5.png)

2.获取子节点：childNodes/children

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="box"><ul id="ul"><li><a href="#">点我试试A</a></li><li id="two"><a href="#">点我试试B</a></li><li><a href="#">点我试试1</a></li><li><a href="#">点我试试2</a></li></ul>
</div><script>let box = document.getElementById("box");let ul = document.getElementById("ul");let two = document.getElementById("two");//获取子级节点// console.log(box.childNodes)//包括 换行// console.log(box.children)//不包括 换行
</script>
</body>
</html>

3.获取第一个或最后一个子节点：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="box"><ul id="ul"><li><a href="#">点我试试A</a></li><li id="two"><a href="#">点我试试B</a></li><li><a href="#">点我试试1</a></li><li><a href="#">点我试试2</a></li></ul>
</div><script>let box = document.getElementById("box");let ul = document.getElementById("ul");let two = document.getElementById("two");//获取子级节点// console.log(ul.firstChild) // 包括 换行// console.log(ul.firstElementChild)//不包括 换行// console.log(ul.lastChild) // 包括 换行// console.log(ul.lastElementChild)//不包括 换行
</script>
</body>
</html>

4.获取前置或后置子节点：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="box"><ul id="ul"><li><a href="#">点我试试A</a></li><li id="two"><a href="#">点我试试B</a></li><li><a href="#">点我试试1</a></li><li><a href="#">点我试试2</a></li></ul>
</div><script>let box = document.getElementById("box");let ul = document.getElementById("ul");let two = document.getElementById("two");//获取子级节点// console.log(two.previousSibling)// 包括 换行// console.log(two.previousElementSibling)//不包括 换行// console.log(two.nextSibling)// 包括 换行// console.log(two.nextElementSibling)//不包括 换行</script>
</body>
</html>

JavaScript【5】DOM模型

1.概述： DOM (Document Object Model)：当页面被加载时，浏览器会创建页面的文档对象模型，即dom对象；dom对象会被结构化为对象树，如一个HTML文档会被分为head，body等部分，而每个部分又…...

编程日记 2025/9/22 1:11:41

Cloudflare防火墙拦截谷歌爬虫｜导致收录失败怎么解决？

许多站长发现网站突然从谷歌搜索结果中“消失”，背后很可能是Cloudflare防火墙误拦截了谷歌爬虫（Googlebot），导致搜索引擎无法正常抓取页面。由于Cloudflare默认的防护规则较为严格，尤其是针对高频访问的爬虫IP&…...

编程日记 2025/9/21 23:10:29

鸿蒙OSUniApp 实现的表单验证与提交功能#三方框架 #Uniapp

UniApp 实现的表单验证与提交功能前言在移动端应用开发中，表单是用户与应用交互的重要媒介。一个好的表单不仅布局合理、使用方便，还应该具备完善的验证与提交功能，以确保用户输入的数据准确无误。本文将分享如何在 UniApp 中实现表单验证…...

编程日记 2025/8/19 1:52:16

如何在 Windows 11 或 10 的 CMD 中检查固件

检查 Windows 11 或 10 中现有设备的硬件固件版本，可以帮助用户安装和更新准确的驱动程序，进行故障排除活动，确保兼容性以及维护系统性能。因此，在本教程中，我们将讨论如何在命令提示符（CMD）中使用一些命令查找 Windows 服务器或桌面中硬件固件版本的方法。由于本教程将…...

编程日记 2025/9/22 0:12:37

进阶-数据结构部分：3、常用查找算法

飞书文档https://x509p6c8to.feishu.cn/wiki/LRdnwfhNgihKeXka7DfcGuRPnZt 顺序查找查找算法是指：从一些数据之中，找到一个特殊的数据的实现方法。查找算法与遍历有极高的相似性，唯一的不同就是查找算法可能并不一定会将每一个数据都进行访…...

编程日记 2025/9/19 19:35:49

Oracle 11.2.0.4 pre PSU Oct18 设置SSL连接

Oracle 11.2.0.4 pre PSU Oct18 设置SSL连接 1 说明2 客户端配置jdk环境3服务器检查oracle数据库补丁4设置ssla 服务器配置walletb 上传测试脚本和配置文件到客户端c 服务器修改数据库侦听和sqlnet.orad 修改客户端的sqlnet.ora和tnsnames.ora的连接符e 修改java代码的数据连接…...

编程日记 2025/6/15 4:27:17

服务器连接多客户端

一、epoll 核心函数详解 1. epoll_create/epoll_create1 - 创建 epoll 实例 c #include <sys/epoll.h> int epoll_create(int size); // Linux 2.6.8前需指定size（>1），后续版本可忽略 int epoll_create1(int flags); // 推荐使用…...

编程日记 2025/5/27 0:57:45

基于QT和FFmpeg实现自己的视频播放器FFMediaPlayer（一）——项目总览

在音视频开发的学习过程中，开发一款视频播放器是FFmpeg进阶的最好实战方法。本文将基于 QT 和 FFmpeg 着手实现自定义视频播放器 FFMediaPlayer，作为系列文章的开篇，我们先来整体了解项目的设计思路、架构与配置。一、软件设计五大原则 …...

编程日记 2025/9/21 23:38:32

服务器死机了需要检查哪些问题

在这个数字化的时代，服务器就像是我们信息世界的“大管家”，可要是它突然死机了，那可真是让人头疼。今天咱们就来聊聊，服务器死机了，到底需要检查哪些问题。一、硬件问题电源供应：检查电源是否稳定&…...

编程日记 2025/6/25 20:26:22

【HCIA】浮动路由

前言我们通常会在出口路由器配置静态路由去规定流量进入互联网默认应该去往哪里。那么，如果有两个运营商的路由器都能为我们提供上网服务，我们应该如何配置默认路由呢？浮动路由又是怎么一回事呢？ 文章目录前言1. 网络拓扑图2. …...

编程日记 2025/9/22 1:22:28

本节我们学习使用instance着色器进行着色 //拾取var handler new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function(movement){console.log(movement);var pickedObject viewer.scene.pick(movement.position);if(Cesium.defined(picke…...

编程日记 2025/9/22 0:59:48

【NLP 72、Prompt、Agent、MCP、function calling】

命运把我们带到哪里，就是哪里 —— 25.5.13 一、Prompt 1.User Prompt 用户提示词当我们与大模型进行对话时，我们向大模型发送的消息，称作User Prompt，也就是用户提示词，一般就是我们提出的问题或者想说的话但是我们…...

编程日记 2025/9/10 13:24:15

Mysql数据库之集群进阶

一、日志管理 5.7版本自定义路径时的文件需要自己提前创建好文件，不会自动创建，否则启动mysql会报错错误日志 rpm包(yum) /var/log/mysql.log 默认错误日志 ###查询日志路径 [rootdb01 ~]# mysqladmin -uroot -pEgon123 variables | grep -w log_e…...

编程日记 2025/9/21 23:22:12

临床决策支持系统的提示工程优化路径深度解析

引言随着人工智能技术在医疗领域的迅猛发展，临床决策支持系统(CDSS)正经历从传统规则引擎向智能提示工程的范式转变。在这一背景下，如何构建既符合循证医学原则又能适应个体化医疗需求的CDSS成为医学人工智能领域的核心挑战。本报告深入剖析了临床决策支持系统中提示工程的…...

编程日记 2025/9/21 23:43:39

精益数据分析（64/126）：移情阶段的用户触达策略——从社交平台到精准访谈

精益数据分析（64/126）：移情阶段的用户触达策略——从社交平台到精准访谈在创业的移情阶段，精准找到目标用户并开展深度访谈是验证需求的关键。今天，我们结合《精益数据分析》中的方法论，探讨如何利用Twit…...

编程日记 2025/5/26 23:19:29

苹果新一代车载系统CarPlay Ultra来袭，全屏接管+ChatGPT助力，智能驾驶要“起飞”

AITOP100获悉，苹果又搞出大动作啦！正式推出了新一代车载系统——CarPlay Ultra。这次，苹果可是下了狠功夫，把iPhone和汽车的所有显示屏深度整合到了一起，还首次把ChatGPT引入到了驾驶体验当中。这系统可不简单&#xf…...

编程日记 2025/9/21 23:29:06

无线信道的噪声与干扰

目录 1. 无线信道(wireless channel)与电磁波 2.1 电磁波的传输(无线信道传输) 2.2 视线(line of sight)传播与天线高度 2. 信道的数学模型 2.1 调制信道模型 2.1.1 加性噪声/加性干扰 2.1.2 乘性噪声/乘性干扰 2.1.3 随参信道/恒参信道 2.2 编码信道模型 2.3 小结 …...

编程日记 2025/9/10 15:39:58

MySQL 8.0 OCP 1Z0-908 101-110题

Q101.which two queries are examples of successful SQL injection attacks? A.SELECT id, name FROM backup_before WHERE name‘; DROP TABLE injection; --’; B. SELECT id, name FROM user WHERE id23 oR id32 OR 11; C. SELECT id, name FROM user WHERE user.id (SEL…...

编程日记 2025/9/22 1:14:12