JavaScript【5】DOM模型

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/81404.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STM32烧录程序正常，但是运行异常

STM32烧录程序正常，但是运行异常

一、硬件配置问题 BOOT引脚设置错误 STM32的启动模式由BOOT0和BOOT1引脚决定。若设置为从RAM启动&#xff08;BOOT01&#xff0c;BOOT10&#xff09;&#xff0c;程序在掉电后无法保存&#xff0c;导致复位后无法正常运行。应确保BOOT00&#xff08;从Flash启动&#xff09;15。…
阅读更多...
汽车二自由度系统模型以及电动助力转向系统模型

汽车二自由度系统模型以及电动助力转向系统模型

汽车二自由度系统模型与电动助力转向系统&#xff08;EPS&#xff09;的详细建模方案&#xff0c;包含理论推导、MATLAB/Simulink实现代码及参数说明&#xff1a; 一、二自由度汽车模型 1. 模型描述 包含以下两个自由度&#xff1a; 横向运动&#xff08;侧向加速度&#xf…
阅读更多...
git提交库常用词

git提交库常用词

新功能 feat修改BUG fix文档修改 docs格式修改 style重构 refactor性能提升 perf测试 test构建系统 build对CI配置文件修改 ci修改构建流程、或增加依赖库、工具 chore回滚版本 revert
阅读更多...
JavaScript 时间转换：从 HH:mm:ss 到十进制小时及反向转换

JavaScript 时间转换：从 HH:mm:ss 到十进制小时及反向转换

关键点 JavaScript 可以轻松实现时间格式&#xff08;HH:mm:ss 或 HH:mm&#xff09;与十进制小时&#xff08;如 17.5&#xff09;的相互转换。两个函数分别处理时间字符串到十进制小时&#xff0c;以及十进制小时到时间字符串的转换&#xff0c;支持灵活的输入和输出格式。这…
阅读更多...
LLM智能体新纪元：深入解析MCP与A2A协议，赋能智能自动化协作

LLM智能体新纪元：深入解析MCP与A2A协议，赋能智能自动化协作

LLM智能体&#xff08;LLM agents&#xff09;是能够自主行动以实现特定目标的AI系统。在实际应用中&#xff0c;智能体能够将用户请求拆解为多个步骤&#xff0c;利用知识库或API获取数据&#xff0c;最终整合出答案。这让智能体相比于传统独立聊天机器人拥有更强大的能力——…
阅读更多...
[PMIC]PMIC重要知识点总结

[PMIC]PMIC重要知识点总结

PMIC重要知识点总结 摘要&#xff1a;PMIC (Power Management Integrated Circuit) 是现代电子设备中至关重要的组件&#xff0c;负责电源管理&#xff0c;包括电压调节、电源转换、电池管理和功耗优化等。PMIC 中的数字部分主要涉及控制逻辑、状态机、寄存器配置、通信接口&am…
阅读更多...
PYTHON训练营DAY28

PYTHON训练营DAY28

类 &#xff08;一&#xff09;题目1&#xff1a;定义圆&#xff08;Circle&#xff09;类 要求&#xff1a; 包含属性&#xff1a;半径 radius。包含方法&#xff1a; calculate_area()&#xff1a;计算圆的面积&#xff08;公式&#xff1a;πr&#xff09;。calculate_circ…
阅读更多...
机器学习-人与机器生数据的区分模型测试 -数据筛选

机器学习-人与机器生数据的区分模型测试 -数据筛选

内容继续机器学习-人与机器生数据的区分模型测试 使用随机森林的弱学习树来筛选相对稳定的特征数据 # 随机森林筛选特征 X data.drop([city, target], axis1) # 去除修改前的城市名称列和目标变量列 y data[target] X_train, X_test, y_train, y_test train_test_split(X…
阅读更多...
Data whale LLM universe

Data whale LLM universe

使用LLM API开发应用 基本概念 Prompt Prompt 最初指的是自然语言处理研究人员为下游任务设计的一种任务专属的输入模板。 Temperature 使用Temperature参数控制LLM生成结果的随机性和创造性&#xff0c;一般取值设置在0~1之间&#xff0c;当取值接近1的时候预测的随机性较…
阅读更多...
Azure 应用的托管身份与服务主体

Azure 应用的托管身份与服务主体

Microsoft Entra ID -- 前称 Azure Active Directory -- 提供强大的身份验证和授权功能。托管身份和服务主体通过限制凭据暴露的风险来帮助确保对 Azure 资源的访问安全。 托管身份为Azure原生应用程序自动管理身份&#xff0c;而服务主体则非常适合需要访问Azure资源的外部应…
阅读更多...
16 C 语言布尔类型与 sizeof 运算符详解：布尔类型的三种声明方式、执行时间、赋值规则

16 C 语言布尔类型与 sizeof 运算符详解：布尔类型的三种声明方式、执行时间、赋值规则

1 布尔类型 1.1 布尔类型概述 布尔类型用于表示逻辑上的真&#xff08;true&#xff09;和假&#xff08;false&#xff09;两种状态&#xff0c;是编程中条件判断和逻辑运算的基础。在 C 语言中&#xff0c;布尔值的表示方式随着标准的发展而不断完善。 1.2 布尔类型的三种声…
阅读更多...
【C++详解】string各种接口如何使用保姆级攻略

【C++详解】string各种接口如何使用保姆级攻略

文章目录 一、string介绍二、string使用构造函数析构函数赋值运算符重载string的遍历修改方法1、下标[]2、迭代器3、范围for 迭代器使用详解const迭代器反向迭代器&#xff08;reverse) Capacity(容量相关)size/lengthmax_sizecapacityclear/emptyshrink_to_fit(缩容)reserve(扩…
阅读更多...
回调函数应用示例

回调函数应用示例

回调函数是一种通过函数指针&#xff08;或引用&#xff09;调用的函数&#xff0c;它在特定事件或条件发生时被另一个函数调用。回调函数的核心思想是将函数作为参数传递&#xff0c;以便在适当的时候执行自定义逻辑&#xff0c;常用于异步编程、事件驱动架构等场景。 业务场景…
阅读更多...
linux标准库头文件解析

linux标准库头文件解析

linuxc标准库 C 标准库&#xff08;C Standard Library&#xff09;包含了一组头文件&#xff0c;这些头文件提供了许多函数和宏&#xff0c;用于处理输入输出、字符串操作、数学计算、内存管理等常见编程任务。。 头文件功能简介<stdio.h>标准输入输出库&#xff0c;包含…
阅读更多...
Unbuntu 命令

Unbuntu 命令

Ubuntu 命令速查表​ ​分类​​命令​​功能描述​​示例/常用选项​​​​文件与目录​ls列出目录内容ls -a&#xff08;显示隐藏文件&#xff09;; ls -lh&#xff08;详细列表易读大小&#xff09; cd切换目录cd ~&#xff08;主目录&#xff09;; cd ..&#xff08;上级…
阅读更多...
怎么在excel单元格1-5行中在原来内容前面加上固定一个字？

怎么在excel单元格1-5行中在原来内容前面加上固定一个字？

环境&#xff1a; WPS 2024 问题描述&#xff1a; 怎么在excel单元格1-5行中在原来内容前面加上固定一个字&#xff1f; 解决方案&#xff1a; 1.在Excel中&#xff0c;如果您想在单元格的内容前面添加一个固定的字&#xff0c;可以通过以下几种方法实现&#xff1a; 方法…
阅读更多...
Linux zip、unzip 压缩和解压

Linux zip、unzip 压缩和解压

zip 命令用于压缩文件&#xff0c;压缩后的文件后缀名为 .zip 。 对应的解压命令是 unzip 。 测试用的目录结构如下&#xff0c; userzn:~/test$ tree . ├── folder1 │ ├── folder111 │ │ └── file1.txt │ └── main1.c ├── folder2 │ ├── …
阅读更多...
【C语言练习】047. 理解递归与循环的转换

【C语言练习】047. 理解递归与循环的转换

047. 理解递归与循环的转换 047. 理解递归与循环的转换1. 递归与循环的基本概念递归循环2. 递归与循环的转换示例1：计算阶乘示例2：汉诺塔问题3. 递归与循环的适用场景递归：循环：一、递归的适用场景与代码示例1. 分治问题2. 树形结构遍历3. 复杂状态问题二、循环的适用场景与…
阅读更多...
我的创作纪念日——《惊变256天》

我的创作纪念日——《惊变256天》

我的创作纪念日——《惊变256天》 机缘收获日常成就憧憬 最近&#xff0c;博主收到了 CSDN 发来的系统消息&#xff0c;这才惊觉&#xff0c;自上次第128天创作纪念日之后&#xff0c;竟又悄然走过了 128 天。站在 256 天这个颇具意义的里程碑前回望&#xff0c;博主在2023 年 …
阅读更多...
Redis 事务与管道：原理、区别与应用实践

Redis 事务与管道：原理、区别与应用实践

在现代分布式系统开发中&#xff0c;Redis 作为高性能的内存数据库&#xff0c;其事务处理和管道技术是开发者必须掌握的核心知识点。本文将深入探讨 Redis 事务和管道的实现原理、使用场景、性能差异以及最佳实践&#xff0c;帮助开发者根据实际需求选择合适的技术方案。 一、…
阅读更多...
最新文章

Copyright @ 2022~2023