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

JavaScript-DOM查询

news 2026/2/10 2:59:34

获取元素节点

获取元素节点的子节点

元素节点的属性

节点的修改

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查询

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

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

网络-Netty

如何使用vue-smooth-dnd

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

尚硅谷SpringMVC

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

力扣125. 验证回文串

用WebStorm创建Mock数据

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

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

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

velocity一个基于Java的模板引擎

异步servlet

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

Docker搭建elasticsearch+kibana测试

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

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

Oracle权限语句

SpringBoot-17-MyBatis动态SQL标签之常用标签

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

【2025年】解决Burpsuite抓不到https包的问题

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

大模型多显卡多服务器并行计算方法与实践指南

Device Mapper 机制

Python Ovito统计金刚石结构数量

JS手写代码篇----使用Promise封装AJAX请求

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表