【js面试题】深入理解DOM操作:创建、查询、更新、添加和删除节点

面试题:DOM常见的操作有哪些

引言:
在前端开发中,DOM(文档对象模型)操作是日常工作中不可或缺的一部分。DOM提供了一种以编程方式访问和更新文档内容、结构和样式的接口。
任何htmlxml 文档都可以用dom表示为一个由节点构成的层级结构

<div><p title="title">content</p >
</div>

上述结构中 div、p就是元素的节点 content就是文本的节点,title就是属性节点

本文将详细介绍DOM操作的五个基本方面:创建节点、查询节点、更新节点、添加节点和删除节点,并提供相应的代码示例。

一、创建节点

来源: DOM API允许开发者动态地创建新的HTML元素,并将其添加到文档中。
应用场景: 动态生成内容,如表单验证消息、动态加载的列表项等。
创建节点是DOM操作中非常基础且常用的操作之一。在JavaScript中,我们可以通过document.createElement方法来创建一个新的元素节点。下面是一些创建节点的详细例子,包括创建不同类型的节点和设置它们的属性。

创建元素节点

// 创建一个新的div元素
let newDiv = document.createElement('div');// 创建一个新的段落元素
let newParagraph = document.createElement('p');// 创建一个新的列表项元素
let newListItem = document.createElement('li');

创建文本节点

// 创建一个文本节点
let textNode = document.createTextNode('这是一个文本节点');

创建注释节点

// 创建一个注释节点
let commentNode = document.createComment('这是一个注释');

创建属性节点

// 创建一个属性节点
let classAttribute = document.createAttribute('class');
classAttribute.value = 'my-class';

创建文档片段节点

文档片段节点是DOM操作中一个非常有用的工具,它允许开发者以一种高效的方式处理DOM元素

// 创建一个文档片段节点
let docFragment = document.createDocumentFragment();

扩展

创建多个元素节点并设置属性

// 创建多个元素节点并设置属性
let list = document.createElement('ul');
for (let i = 1; i <= 5; i++) {let listItem = document.createElement('li');listItem.textContent = '列表项 ' + i;list.appendChild(listItem);
}

创建节点并添加到文档中

// 创建一个div元素并添加到body中
let newDiv = document.createElement('div');
document.body.appendChild(newDiv);

创建节点是构建动态网页和应用的基础,通过这些节点,我们可以构建出复杂的用户界面和交互逻辑。

二、查询节点

来源: DOM提供了多种方法来查询文档中的节点,如getElementByIdgetElementsByTagNamequerySelector等。
应用场景: 获取页面元素以进行进一步操作,如事件绑定、样式修改等。

querySelector

querySelector 方法返回文档中匹配指定CSS选择器的第一个元素。如果没有找到匹配的元素,则返回 null

用法:

element = document.querySelector(selectors);

参数:

  • selectors:一个字符串,包含一个或多个CSS选择器,用于指定要返回的元素。

代码用例:

// 获取页面中第一个id为"myElement"的元素
var element = document.querySelector('#myElement');
console.log(element); // 输出匹配的元素// 获取页面中第一个类名为"myClass"的元素
var element = document.querySelector('.myClass');
console.log(element); // 输出匹配的元素// 获取页面中第一个具有特定类名和id的元素
var element = document.querySelector('.myClass#myElement');
console.log(element); // 输出匹配的元素

querySelectorAll

querySelectorAll 方法返回文档中匹配指定CSS选择器的所有元素的静态(不实时更新) NodeList 集合。

用法:

elements = document.querySelectorAll(selectors);

参数:

  • selectors:一个字符串,包含一个或多个CSS选择器,用于指定要返回的元素集合。

代码用例:

// 获取页面中所有类名为"myClass"的元素
var elements = document.querySelectorAll('.myClass');
console.log(elements); // 输出匹配的元素集合// 获取页面中所有具有特定类名和id的元素
var elements = document.querySelectorAll('.myClass#myElement');
console.log(elements); // 输出匹配的元素集合// 遍历所有匹配的元素
elements.forEach(function(element) {console.log(element); // 输出每个匹配的元素
});

querySelectorquerySelectorAll 是非常强大的工具,它们允许开发者使用CSS选择器来查询DOM元素。querySelector 返回第一个匹配的元素,而 querySelectorAll 返回所有匹配的元素。

三、更新节点

来源: DOM允许开发者修改已存在的节点内容或属性。
应用场景: 更新页面上的动态内容,如实时显示时间、更新用户状态等。
在JavaScript中,更新DOM节点的内容和样式是常见的操作。innerHTMLinnerTexttextContentstyle属性是用于更新节点内容和样式的常用方法。下面将分别介绍这些属性的概念和代码用例。

innerHTML

innerHTML属性用于获取或设置指定元素的HTML内容。它返回元素内部的HTML标记,如果设置,则会替换元素内的所有内容。

代码用例:

// 获取元素的HTML内容
var content = document.getElementById('myElement').innerHTML;
console.log(content); // 输出元素的HTML内容// 设置元素的HTML内容
document.getElementById('myElement').innerHTML = '<p>新的内容</p>';

innerText

innerText属性用于获取或设置指定元素及其子元素的文本内容。它返回元素内的纯文本,忽略所有HTML标签,如果设置,则会替换元素内的所有文本内容。

代码用例:

// 获取元素的文本内容
var text = document.getElementById('myElement').innerText;
console.log(text); // 输出元素的文本内容// 设置元素的文本内容
document.getElementById('myElement').innerText = '新的文本内容';

textContent

textContent属性用于获取或设置指定元素及其子元素的文本内容。与innerText类似,它返回元素内的纯文本,但不会忽略脚本和样式元素。如果设置,则会替换元素内的所有文本内容。

代码用例:

// 获取元素的文本内容
var text = document.getElementById('myElement').textContent;
console.log(text); // 输出元素的文本内容// 设置元素的文本内容
document.getElementById('myElement').textContent = '新的文本内容';

style

style属性用于获取或设置指定元素的样式。通过这个属性,可以访问和修改元素的内联样式。

代码用例:

// 获取元素的样式属性
var style = document.getElementById('myElement').style;
console.log(style.color); // 输出元素的文本颜色// 设置元素的样式属性
document.getElementById('myElement').style.color = 'red';
document.getElementById('myElement').style.fontSize = '20px';

结论

innerHTMLinnerTexttextContentstyle属性是更新DOM节点内容和样式的强大工具。innerHTMLinnerText用于获取和设置元素的文本内容,但它们处理HTML的方式不同。textContent提供了一种获取和设置纯文本内容的方法,而style属性允许开发者直接修改元素的样式。

四、添加节点

来源: DOM提供了方法来将新创建或查询到的节点添加到文档的特定位置。
应用场景: 在页面中动态插入新内容,如评论、广告等。
在JavaScript中,向DOM中添加节点是通过一系列方法实现的。innerHTMLinsertBeforesetAttributeappendChild是其中一些常用的方法。下面将分别介绍这些方法的概念和代码用例。

innerHTML

innerHTML属性用于获取或设置指定元素的HTML内容。虽然它主要用于获取和设置内容,但也可以用来添加新内容,因为它会替换掉元素内的所有内容。

insertBefore

insertBefore方法用于在指定的父节点的子节点列表中的某个节点之前插入一个新的节点。它需要两个参数:要插入的新节点和参照节点。

代码用例:

// 获取父节点和要插入的新节点
var parent = document.getElementById('parentElement');
var newNode = document.createElement('p');
newNode.textContent = '这是新添加的段落。';// 获取参照节点
var referenceNode = document.getElementById('referenceElement');// 在参照节点之前插入新节点
parent.insertBefore(newNode, referenceNode);

setAttribute

setAttribute方法用于设置指定元素的属性值。它需要两个参数:要设置的属性名和属性值。

代码用例:

// 获取元素
var element = document.getElementById('myElement');// 设置元素的class属性
element.setAttribute('class', 'new-class');

appendChild

appendChild方法用于将一个节点添加到指定父节点的子节点列表的末尾。它只接受一个参数:要添加的新节点。

代码用例:

// 获取父节点和要添加的新节点
var parent = document.getElementById('parentElement');
var newNode = document.createElement('p');
newNode.textContent = '这是新添加的段落。';// 将新节点添加到父节点的子节点列表末尾
parent.appendChild(newNode);

结论

innerHTMLinsertBeforesetAttributeappendChild是向DOM中添加节点的常用方法。innerHTML可以用来添加新内容,但会替换掉元素内的所有内容。insertBefore允许在特定位置插入新节点。setAttribute用于设置元素的属性值。appendChild则将新节点添加到父节点的子节点列表末尾。

五、删除节点

来源: DOM提供了方法来从文档中移除节点。
应用场景: 清除不再需要的内容,如删除表单中的错误消息、移除已处理的列表项等。
代码示例:

// 删除指定的节点
parentElement.removeChild(newDiv);

结语:

掌握DOM操作是前端开发的基础技能之一。通过创建、查询、更新、添加和删除节点,我们可以灵活地控制页面内容和结构。在实际开发中,合理运用这些操作可以极大地提升用户体验和页面的交互性。希望本文的介绍和示例能够帮助你更好地理解和运用DOM操作。

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

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

相关文章

KIVY Button¶

Button — Kivy 2.3.0 documentation Button Jump to API ⇓ Module: kivy.uix.button Added in 1.0.0 The Button is a Label with associated actions that are triggered when the button is pressed (or released after a click/touch). To configure the button, the s…

【论文速读】| 用于安全漏洞防范的人工智能技术

本次分享论文&#xff1a;Artificial Intelligence Techniques for Security Vulnerability Prevention 基本信息 原文作者&#xff1a;Steve Kommrusch 作者单位&#xff1a;Colorado State University, Department of Computer Science, Fort Collins, CO, 80525 USA 关键…

ISO/OSI七层模型

ISO:国际标准化/ OSI:开放系统互联 七层协议必背图 1.注意事项&#xff1a; 1.上三层是为用户服务的&#xff0c;下四层负责实际数据传输。 2.下四层的传输单位&#xff1a; 传输层&#xff1b; 数据段&#xff08;报文&#xff09; 网络层&#xff1a; 数据包&#xff08;报…

1Panel安装命令脚本大全,多Linux操作系统版本

1Panel安装命令脚本大全&#xff0c;包括RedHat、CentOS、Ubuntu、Debian和openEuler等linux操作系统&#xff0c;码笔记整理1Panel安装命令脚本清单&#xff1a; RedHat/CentOS安装命令&#xff1a; curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh…

【Swoole 的生命周期,文件描述符,协程数量,以及默认值】

目录 Swoole 的生命周期 Swoole 文件描述符&#xff08;FD&#xff09;缓存 Swoole设置协程的数量 Swoole 默认值 Swoole 是一个基于 PHP 的高性能网络通信引擎&#xff0c;它采用 C 编写&#xff0c;提供了协程和高性能的网络编程支持。Swoole 支持多种网络服务器和客户端…

python库 - modelscope

ModelScope 是一个集成的机器学习模型库&#xff0c;旨在简化机器学习模型的使用流程&#xff0c;提供多种预训练模型&#xff0c;涵盖计算机视觉、自然语言处理、语音识别等多个领域。用户可以轻松访问、使用和分享各种预训练的机器学习模型&#xff0c;无需从头开始训练模型&…

Vue项目openlayers中使用jsts处理wkt和geojson的交集-(geojson来源zpi解析)

Vue项目openlayers中使用jsts处理wkt和geojson的交集-(geojson来源zpi解析) 读取压缩包中的shape看上一篇笔记&#xff1a;Vue项目读取zip中的ShapeFile文件&#xff0c;并解析为GeoJson openlayers使用jsts官方示例&#xff1a;https://openlayers.org/en/latest/examples/j…

框选table单元格,高亮展示

td单元格内&#xff0c;有未知层dom结构 <style>.highlight {background-color: yellow;} </style> <table id"myTable"><colgroup><col style"background-color: lightblue;"><col style"background-color: light…

#pragma 指令

#pragma 指令作用是设定编译器的状态或者是指示编译器完成一些特定的动作 message 参数能够在编译信息输出窗口中输出相应的信息 #pragma message(“消息文本”) code_seg参数能够设置程序中函数代码存放的代码段&#xff0c;当我们开发驱动程序的时候就会使用到它 #pragma…

科技创新引领水利行业升级:深入分析智慧水利解决方案的核心价值,展望其在未来水资源管理中的重要地位与作用

目录 引言 一、智慧水利的概念与内涵 二、智慧水利解决方案的核心价值 1. 精准监测与预警 2. 优化资源配置 3. 智能运维管理 4. 公众参与与决策支持 三、智慧水利在未来水资源管理中的重要地位与作用 1. 推动水利行业转型升级 2. 保障国家水安全 3. 促进生态文明建设…

下降npm版本

Node版本与NPM版本对应关系 Node版本与NPM版本对应关系_node对应npm版本-CSDN博客 要降低npm的版本&#xff0c;可以按照以下步骤进行操作 1.首先&#xff0c;打开终端或命令提示符窗口。 2.输入以下命令来检査当前安装的npm版本: npm -v 3.如果你想要降低npm的版本&#xff…

vb.netcad二开自学笔记5:ActiveX链接CAD的.net写法

一、必不可少的对象引用 使用activex需要在项目属性中勾选以下两个引用&#xff0c;若找不到&#xff0c;则浏览定位直接添加下面两个文件&#xff0c;可以看到位于cad的安装路径下&#xff0c;图中的3个mgd.dll也可以勾选。 C:\Program Files\Autodesk\AutoCAD 2024\Autodes…

实战 | YOLOv8使用TensorRT加速推理教程(步骤 + 代码)

导 读 本文主要介绍如何使用TensorRT加速YOLOv8模型推理的详细步骤与演示。 YOLOv8推理加速的方法有哪些? YOLOv8模型推理加速可以通过多种技术和方法实现,下面是一些主要的策略: 1. 模型结构优化 网络剪枝:移除模型中不重要的神经元或连接,减少模型复杂度。 模型精…

中文大模型基准测评2024上半年报告

中文大模型基准测评2024上半年报告 原创 SuperCLUE CLUE中文语言理解测评基准 2024年07月09日 18:09 浙江 SuperCLUE团队 2024/07 背景 自2023年以来&#xff0c;AI大模型在全球范围内掀起了有史以来规模最大的人工智能浪潮。进入2024年&#xff0c;全球大模型竞争态势日益加…

Obsidian 文档编辑器

Obsidian是一款功能强大的笔记软件 Download - Obsidian

降Compose十八掌之『见龙在田』| Modifier

公众号「稀有猿诉」 原文链接 降Compose十八掌之『见龙在田』| Modifier 通过前面的文章我们学会了如何使用元素来构建和填充我们的UI页面&#xff0c;但这只完成了一半&#xff0c;元素还需要装饰&#xff0c;以及进行动画和事件响应&#xff0c;这才能生成完整的UI。这…

2.5章节python中布尔类型

在Python中&#xff0c;布尔类型&#xff08;Boolean type&#xff09;用于表示真&#xff08;True&#xff09;或假&#xff08;False&#xff09;的值。这是编程中非常基础且重要的一个概念&#xff0c;因为它允许程序进行条件判断&#xff0c;从而根据条件执行不同的代码块。…

智慧校园行政办公-红头文件功能概述

在智慧校园的行政办公系统中&#xff0c;红头文件的管理功能是一项重要的组成部分&#xff0c;它极大地提升了文件处理的效率与规范性。该功能围绕文件的创建、审批、归档等关键环节&#xff0c;进行了全面的数字化改造。 首先&#xff0c;系统内置了多种标准化的红头文件模板&…

一文实践强化学习训练游戏ai--doom枪战游戏实践

一文实践强化学习训练游戏ai–doom枪战游戏实践 上次文章写道下载doom的环境并尝试了简单的操作&#xff0c;这次让我们来进行对象化和训练、验证&#xff0c;如果你有基础&#xff0c;可以直接阅读本文&#xff0c;不然请你先阅读Doom基础知识&#xff0c;其中包含了下载、动作…

gsplat中的3D Gaussian Splatting as Markov Chain Monte Carlo的代码解读

总体 https://github.com/nerfstudio-project/gsplat simple_trainer_mcmc.py 2个关键点&#xff1a; 高斯状态转移&#xff08;每100iter调用&#xff09;高斯随机过程&#xff08;每1iter调用&#xff09; relocate_gs 对 alive gs 进行采样&#xff0c;被采样的 alive…