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

JavaScript-DOM查询

news 2025/12/15 11:40:36

获取元素节点

获取元素节点的子节点

元素节点的属性

节点的修改

        JavaScript中的DOM（文档对象模型）是一种编程接口，它允许JavaScript与HTML文档交互。创建DOM查询，可以使用多种方法.

获取元素节点

1. getElementById()

– 通过id属性获取一个元素节点对象

var element = document.getElementById("elementID");

2. getElementsByTagName()

– 通过标签名获取一组元素节点对象

var elements = document.getElementsByTagName("tagname");

3. getElementsByName()

– 通过name属性获取一组元素节点对象

let nameInputs = document.getElementsByName('name');

获取元素节点的子节点

1. getElementsByTagName()

– 该方法返回指定标签名的后代节点列表，可以是单个元素或多个元素。例如，以下代码会返回所有的 p 元素

<body><h1>标题</h1><p>这是段落1</p><p>这是段落2</p><ul><li>列表项1</li><li>列表项2</li></ul>
</body>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs); // NodeList(2) [ <p>这是段落1</p>, <p>这是段落2</p> ]

2. childNodes

– 该属性返回当前节点包含的所有子节点。包括元素节点、文本节点、注释节点等。例如，以下代码会返回 body 元素的所有子节点

<body><h1>标题</h1><p>这是段落</p>
</body>
const bodyNode = document.body;
const childNodes = bodyNode.childNodes;
console.log(childNodes); // NodeList(3) [ #text "", <h1>标题</h1>, #text "" ]

3. firstChild

– 该属性返回当前节点的第一个子节点。如果节点没有子节点，则返回 null。例如，以下代码会返回 body 元素的第一个子节点

<body><h1>标题</h1><p>这是段落</p>
</body>
const bodyNode = document.body;
const firstChild = bodyNode.firstChild;
console.log(firstChild); // #text ""

4. lastChild

– 该属性返回当前节点的最后一个子节点。如果节点没有子节点，则返回 null。例如，以下代码会返回 body 元素的最后一个子节点

<body><h1>标题</h1><p>这是段落</p>
</body>
const bodyNode = document.body;
const lastChild = bodyNode.lastChild;
console.log(lastChild); // #text ""

元素节点的属性

• 获取，元素对象.属性名，元素节点的属性指的是元素节点对象（如div、p、input等）所具有的属性。常见的元素节点属性有value、id、className等。其中，value属性对应的是输入框、文本框等表单元素的值；id属性对应的是元素的唯一身份标识符；className属性对应的是元素的CSS类名。

例：

element.value

element.id

element.className

<input type="text" id="username" class="inputStyle" value="John Doe">
<script>const inputEle = document.getElementById("username");console.log(inputEle.value); // 输出：John Doeconsole.log(inputEle.id); // 输出：usernameconsole.log(inputEle.className); // 输出：inputStyle
</script>

• 设置，元素对象.属性名=新的值

例：element.value = “hello”

element.id = “id01”

element.className = “newClass”

//首先获取了一个id为“username”的输入框，然后使用该元素对象的属性获取了其value、id、className属性的值，并输出到控制台中。接着，将该输入框的value、id、className属性的值分别设置成了“Jane Doe”、“userid”、“newInputStyle”，最后再次输出该输入框的标签<input type="text" id="username" class="inputStyle" value="John Doe">
<script>const inputEle = document.getElementById("username");inputEle.value = "Jane Doe";inputEle.id = "userid";inputEle.className = "newInputStyle";console.log(inputEle); // 输出<input type="text" id="userid" class="newInputStyle" value="Jane Doe">
</script>

• nodeValue

– 文本节点是指节点包含文本内容的节点，可以通过nodeValue属性获取和设置文本节点的内容。例如，以下代码创建了一个文本节点并获取了它的内容

var text = document.createTextNode("Hello world!"); //创建文本节点
var content = text.nodeValue; //获取文本节点的内容
console.log(content); //输出："Hello world!"
text.nodeValue = "Goodbye world!"; //设置文本节点的内容
console.log(text.nodeValue); //输出："Goodbye world!"

• innerHTML

– 元素节点是指节点包含开始和结束标签的节点，可以通过innerHTML属性获取和设置元素节点内部的html代码。例如，以下代码获取了一个div元素节点内部的html代码，并将其修改为一个带有链接和图片的html代码

var div = document.getElementById("myDiv"); //获取div元素节点
var content = div.innerHTML; //获取div元素节点内部的html代码
console.log(content); //输出原始html代码
div.innerHTML = '<a href="https://www.google.com/">Google</a><br><img src="image.jpg">'; //设置新的html代码
console.log(div.innerHTML); //输出新的html代码

节点的修改

• 创建节点

– document.createElement(标签名)

// 创建一个新的段落元素节点
let p = document.createElement('p');// 添加一些文本内容
p.textContent = '这里是一个新创建的段落。';// 将该段落添加到文档中的body元素中
document.body.appendChild(p);

• 删除节点

– 父节点.removeChild(子节点)

// 获取要删除的节点
let p = document.querySelector('p');// 获取其父节点并删除该子节点
p.parentNode.removeChild(p);

• 替换节点

– 父节点.replaceChild(新节点 , 旧节点)

// 获取要被替换的旧节点
let oldP = document.querySelector('p');// 创建一个新的段落元素节点
let newP = document.createElement('p');
newP.textContent = '这是新的段落。';// 获取其父节点并用新节点替换旧节点
oldP.parentNode.replaceChild(newP, oldP);

• 插入节点

– 父节点.appendChild(子节点)

// 创建一个新的段落元素节点
let p = document.createElement('p');
p.textContent = '这是一个新的段落。';// 获取将要添加新节点的父节点
let parent = document.querySelector('#parent');// 在父节点的末尾添加新节点
parent.appendChild(p);

– 父节点.insertBefore(新节点 , 旧节点)

// 创建一个新的段落元素节点
let p = document.createElement('p');
p.textContent = '这是一个新的段落。';// 获取将要添加新节点的父节点
let parent = document.querySelector('#parent');// 获取将要插入的位置的子节点
let referenceNode = parent.querySelector('div');// 将新节点插入到该位置之前
parent.insertBefore(p, referenceNode);

相关文章：

JavaScript-DOM查询

获取元素节点 获取元素节点的子节点 元素节点的属性 节点的修改 JavaScript中的DOM&#xff08;文档对象模型&#xff09;是一种编程接口&#xff0c;它允许JavaScript与HTML文档交互。创建DOM查询&#xff0c;可以使用多种方法. 获取元素节点 1. getElementById() – 通…...

编程日记 2023/8/31 21:46:00

大数据-玩转数据-Flink 水印

一、Flink 中的水印 在Flink的流式操作中, 会涉及不同的时间概念&#xff1a; 1.1 处理时间 是指的执行操作的各个设备的时间&#xff0c;对于运行在处理时间上的流程序, 所有的基于时间的操作(比如时间窗口)都是使用的设备时钟。比如, 一个长度为1个小时的窗口将会包含设备…...

编程日记 2023/8/31 21:44:58

【Apollo】阿波罗自动驾驶系统：驶向未来的智能出行（含源码安装）

前言 Apollo (阿波罗)是一个开放的、完整的、安全的平台&#xff0c;将帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统&#xff0c;快速搭建一套属于自己的自动驾驶系统。 开放能力、共享资源、加速创新、持续共赢是 Apollo 开放平台的口号。百度把自己所拥有的强大、…...

编程日记 2023/8/31 21:42:56

网络-Netty

how pipeline.addLast(ChannelHandler)...

编程日记 2023/8/31 21:41:55

如何使用vue-smooth-dnd

Vue Smooth DnD是一个基于Vue的平滑易用的拖放库。它提供了简单易用的API和可自定义的样式。 要使用Vue Smooth DnD&#xff0c;可以按照以下步骤进行操作&#xff1a; 安装Vue Smooth DnD npm install vue-smooth-dnd --save 在组件中引入Vue Smooth DnD import VueSmoot…...

编程日记 2023/8/31 21:40:54

为AWS认证做好准备：一份全面的备考指南

随着云计算的快速发展&#xff0c;越来越多的专业人士选择获取AWS&#xff08;亚马逊网络服务&#xff09;认证。这个认证不仅可以证明你对AWS的理解和专业技能&#xff0c;还有助于你在云计算领域获得更好的工作机会。 以下是一份全面的备考指南&#xff0c;帮助你为AWS认证做…...

编程日记 2023/8/31 21:39:51

尚硅谷SpringMVC

九、HttpMessageConverter...

编程日记 2023/8/31 21:38:50

django的简易的图书管理系统jsp书店进销存源代码MySQL

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 django的简易的图书管理系统 系统有1权限&#xff1a…...

编程日记 2023/8/31 21:37:48

力扣125. 验证回文串

125. 验证回文串 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&#xff0c;如果它是 回文串 &#xff0c;返回 true &…...

编程日记 2023/8/31 21:36:47

用WebStorm创建Mock数据

WebStorm是一款强大的集成式开发环境&#xff0c;它集成了许多实用的功能&#xff0c;包括Mock数据的创建。 下面是用WebStorm创建Mock数据的步骤&#xff1a; 打开WebStorm&#xff0c;选择一个项目或新建一个项目&#xff1b;在项目中创建一个名为“mock”的文件夹&#xf…...

编程日记 2023/8/31 21:35:46

Python钢筋混凝土结构计算.pdf-已知弯矩确定混凝土梁截面尺寸

计算原理 确定混凝土梁截面的合理尺寸通常需要考虑弯矩、受力要求和约束条件等多个因素。以下是一种常见的计算公式&#xff0c;用于基于已知弯矩确定混凝土梁截面的合理尺寸&#xff1a; 请注意&#xff0c;以上公式仅提供了一种常见的计算方法&#xff0c;并且具体的规范和设…...

编程日记 2023/8/31 21:33:43

【正点原子STM32连载】第二十四章 高级定时器PWM输入模式实验 摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html# 第二…...

编程日记 2023/8/31 21:32:42

Adapter Tuning Overview：在CV，NLP，多模态领域的代表性工作

文章目录 Delta TuningAdapter Tuning in CVAdapter Tuning in NLP Delta Tuning Adapter Tuning in CV 题目: Learning multiple visual domains with residual adapters 机构&#xff1a;牛津VGG组 论文: https://arxiv.org/pdf/1705.08045.pdf Adapter Tuning in NLP …...

编程日记 2023/8/31 21:31:41

velocity一个基于Java的模板引擎

参考&#xff1a;https://blog.csdn.net/m0_51517236/article/details/126175283 http://www.51gjie.com/javaweb/896.html...

编程日记 2023/8/31 21:30:38

异步servlet

我们日常使用的 SpringMVC&#xff0c;基本上都不是异步 Servlet&#xff0c;而学习 WebFlux&#xff0c;异步 Servlet 是基础&#xff0c;WebFlux。 1.什么是异步 Servlet 先来说说什么是非异步 Servlet。 在 Servlet3.0 之前&#xff0c;Servlet 采用 Thread-Per-Request 的方…...

编程日记 2023/8/31 21:29:37

煤矿皮带运输智能监控算法 opencv

煤矿皮带运输智能监控算法通过opencvpython深度学习算法网络模型&#xff0c;煤矿皮带运输智能监控算法实时监测皮带运输过程中的各种异常情况&#xff0c;如跑偏、撕裂、堆料异常等&#xff0c;一旦检测到异常情况&#xff0c;立即发出告警并采取相应的措施&#xff0c;以保障…...

编程日记 2023/8/31 21:28:36

Docker搭建elasticsearch+kibana测试

最近需要做大数据画像&#xff0c;所以先简单搭建一个eskibana学习使用&#xff0c;记录一下搭建过程和遇到的问题以及解决办法 1.拉取es和kibana镜像 在拉取镜像之前先搜索一下 elasticsearch发现是存在elasticsearch镜像的&#xff0c;我一般习惯性拉取最新镜像&#xff0c…...

编程日记 2023/8/31 21:27:34

QT(C++)-QTreeview节点折叠与展开

文章目录 1、前言2、QTreeview全部展开与折叠3、QTreeview某个节点展开与折叠3.1 节点折叠与展开的信号与槽3.2 槽函数的实现3.3 某个节点展开与折叠 1、前言 最近要用QT开发项目&#xff0c;对QT不是很熟&#xff0c;就根据网上的查到的知识和自己的摸索&#xff0c;将一些经…...

编程日记 2023/8/31 21:26:33

项目 - 后端技术栈转型方案

前言 某开发项目的后端技术栈比较老了&#xff0c;现在想换到新的技术栈上。使用更好的模式、设计思想、更合理的架构等&#xff0c;为未来的需求迭代做铺垫。怎么办呢&#xff1f;假设系统目前在线上运行着的&#xff0c;直接整体换的话耗时太久&#xff0c;且中间还有新的需…...

编程日记 2023/8/31 21:25:31

Oracle权限语句

授予权限&#xff1a;grant 权限 to 用户名; 撤销权限&#xff1a;revoke 权限 from 用户名; 常用&#xff1a; 创建用户&#xff1a; create user zhangsan identified by zhangsan; grant connect, resource to zhangsan; //授权zhangsan用户连接权限 grant create …...

编程日记 2023/8/31 21:24:30

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/12/7 16:06:34

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/12/13 15:51:25

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/12/8 9:13:58

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/12/14 22:02:31

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/12/9 19:36:52

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

编程新知 2025/12/1 23:09:54

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

编程新知 2025/12/9 7:12:03

恶补电源：1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

编程新知 2025/12/5 2:21:03