JavaScript中DOM关系型节点的获取(JS笔记:二十)

TZOF_ TZOF_ 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 200+累计阅读 258平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄7年
关注
原创 最新推荐文章于 2026-02-16 03:43:22 发布 258 阅读 AI 写同款· GEO 优化 ›
Javascript和Jquery对DOM节点的文本创建、获取及操作 Javascript和Jquery对DOM节点的文本创建、获取及操 javascript和jquery获取，添加，删除等操作DOM节点，文本及属性 如：JS:atteibutes/firstChild/appendChild()/getAttribute() JQ: attr()/next()/siblings()/append()/remove()等 一，Javascript DOM节点... 阅读详情

JavaScript中DOM关系型节点的获取(JS笔记:二十)

DOM中三种关系型节点：

  • 父节点
  • 子节点
  • 相邻兄弟节点
     

DOM关系节点的获取：

  • nodeName返回当前节点的节点名字
  • parentNode返回当前节点的父节点(三种节点)
  • parentElement返回当前节点的父节点(属性节点)
  • childNodes返回当前节点的子节点集合(三种节点)
  • children返回当前节点的子节点集合(属性节点)
  • firstchild返回当前节点的第一个子节点(三种节点)
  • firstElementChild返回当前节点的第一个子节点(属性节点)
  • lastchild返回当前节点的最后一个子节点(三种节点)
  • lastElementChild返回当前节点的最后一个子节点(属性节点)
  • nextSibling返回当前节点的下一个兄弟节点(三种节点)
  • nextElementSibling返回当前节点的下一个兄弟节点(属性节点)
  • previousSibling返回当前节点的上一个兄弟节点(三种节点)
  • previousElementSibling返回当前节点的上一个兄弟节点(属性节点)

 
 
(JS笔记:二十    date:2020-12-24)

收录于
JavaScript

当前文章被收录于：

JavaScript
21 篇文章 0 人学习

JavaScript

订阅专栏 查看详情
标签
#javascript #dom #vue.js #jquery #node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
[Javascript]：DOM概念、DOM操作元素、属性、文本节点详解 DOM全称是文档对象模型，是专门用于操作HTML/XML文档的API（应用程序接口）。DOM将文档看作一颗树，其中的每个成分都是对象，这些对象都看作是节点。可以将文档的一切都理解成节点对象。 DOM的组成部分介绍：文档、对象和模型 Document(文档)：当用浏览器打开一个页面文档时，这个文档就会被转成document对象，然后就可以调用了。后面会提到该对象的用法。 Object(对象)：DOM中的每个节点都是对象，通过对象的属性和方法就能够操作节点。 Model(模型)：DOM将整个文档 阅读详情

相关推荐

【JavaScript】添加DOM节点

HTML DOM树 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 查找节点 通过 id 查找 HTML 元素 var x=document.getElementById("dv"); 通过标签名查找 HTML 元...

apr_su 1360

JavaScript DOM—节点操作

文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。

Jin_Xiang123的博客 1884

JS—DOM节点的使用知识整理

JS—DOM节点的使用知识整理

weixin_52984349的博客 1778

JS DOM中的获取节点和操作节点

HTML除了一些内置属性之外,程序员还可以根据需要自定义一些属性, 自定义的属性建议以data-开头// DOM操作内置属性 DOM对象.内置属性名// 获取自定义属性,也可以获取内置属性,但是获取类名的时候,需要使用class// dom对象.getAttribute("自定义属性名或者内置属性名")// 设置自定义属性,也可以设置内置属性,但是设置类名的时候,需要使用class// dom对象.setAttribute("自定义属性名或者内置属性名", "属性值")

m0_63977330的博客 2226

【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查

DOM，全称是：Document Object Model，文档对象模型，它主要是用于描述HTML文档对象的。一个HTML页面是由许多的标签组成的，例如：html、head、body、div等等标签元素，JS里面将整个的HTML作为一个document文档来进行管理，其中HTML里面的每一个标签都是一个DOM结点。HTML里面所有的DOM结点构成了一颗DOM树，这就有点类似于二叉树了，只不过DOM里面的树是多叉树，因为HTML里面的标签里面可以嵌套许多其他的标签。...

✅ Java 开发工程师 2527

PSM-DID实战指南：Stata代码解析与案例应用

本文详细解析PSM-DID方法在Stata中的实战应用，从理论到代码实现全面覆盖。通过倾向得分匹配（PSM）和双重差分（DID）的结合，有效解决政策评估中的选择偏差问题。文章提供完整的Stata命令代码、样例数据处理技巧和案例应用，帮助研究者准确评估政策效果。

vulkan6gpu的博客 793

JS-DOM对象 替换节点与克隆节点

JS-DOM对象 替换节点 替换节点: 父节点.replaceChild(节点1,节点2) 节点1:是新节点 节点2:老节点 返回值被替换额节点 如果新节点为父节点中已有节点,效果为老节点删除,被替换成为新节点 <!DOCTYPE html> <html> <head> <meta charset="utf-8">...

weixin_45768979的博客 1867

[面试]SoC验证工程师面试常见问题（三）

SoC 验证工程师面试中，SystemVerilog、UVM 和 SystemC 的代码题目通常涵盖面向对象编程、约束随机化、UVM 组件设计、内存建模等主题。通过练习上述示例题目和理解关键点，你可以更好地应对现场编码环节。如果有具体的面试方向（如特定协议验证）或公司偏好，可以提供更多信息，我会进一步定制题目和答案。祝你面试顺利！

元直的博客 1617

JavaScript:DOM——节点获取

解释JavaScript如何与HTML和CSS交互，具体说明JavaScript如何通过操作DOM节点来动态更新网页内容。获取元素修改元素创建和删除元素事件监听器。

2401_87662282的博客 596

从HAL库SPI状态机机制剖析：为什么你的DMA发送会卡在BUSY状态？

本文深入剖析了STM32 HAL库中SPI状态机机制导致DMA发送卡在BUSY状态的常见问题。通过分析状态机设计原理，揭示了混合使用阻塞方式和DMA方式时状态切换冲突的根源，并提供了三种实战解决方案：正确配置SPI中断、使用HAL_SPI_Abort()函数以及手动管理状态机，帮助开发者实现稳定流畅的SPI DMA通信。

bush的博客 268

【Google Play 上架】内部 / 封闭 / 开放 测试全解 — “只跑一个就能上架”？不行！

Google Play新规要求个人开发者账号在2023年11月13日后必须通过封闭测试（Closed testing）才能上架应用。封闭测试需要至少12名测试者连续14天保持参与状态，而内部测试和开放测试不能替代这一要求。三类测试轨道各有特点：内部测试用于快速内部验证，封闭测试是上架必经环节，开放测试面向更广泛用户但非必需。上架流程建议先内部测试修复问题，再启动封闭测试满足14天要求，最后申请生产发布。组织账号和早期个人账号可能不受此限制。开发者应提前规划测试人群，确保持续测试周期，并关注Play Cons

技术小甜甜：传播可落地技术，帮助个人和企业降低解决真实场景问题的成本 2799

【JavaScript】DOM节点操作

DOM节点操作主要包括创建节点、添加节点、删除节点、替换节点、复制节点。在实际开发中、主要操作的是元素节点。

zyh0815的博客 1398

2025B卷最新华为OD机试持续收录中 - 真题题库清单，按考点划分(Python / JS / C++ / JAVA / C语言)

2025B卷最新华为OD机试持续收录中 - 真题题库清单，按考点划分(Python / JS / C++ / JAVA / C语言)

算法大师！ 3057

JS（JavaScript）的DOM操作

天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。 十步杀一人，千里不留行。 事了拂衣去，深藏身与名。 ——《侠客行》 文章目录DOM操作1. DOM介绍2. 查询操作2.1 查询方法2.2 查询示例2.2.1 根据id获取dom2.2.1.1 示例2.2.1.2 结果2.2.2 根据tag获取dom2.2.2.1 示例2.2.2.2 结果2.2.3 根据css样式获取dom2.

感谢阅读 1737

Ascend开发包Acllite安装

设置环境变量，配置程序编译依赖的头文件，库文件路径。“$HOME/Ascend”请替换“Ascend-cann-toolkit”包的实际安装路径。将YOLOV7原始模型转换为适配昇腾310处理器的离线模型（*.om文件），放在model路径下。运行完成后，会在样例工程的out目录下生成推理后的图片，显示对比结果如下所示。可以使用以下两种方式下载，请选择其中一种进行源码准备。请从以下链接获取该样例的输入图片，放在data目录下。执行以下命令，执行编译脚本，开始样例编译。执行运行脚本，开始样例运行。

如果想成为中心，那么就到中心去吧。 318

PCL 从LAS文件中获取点云的颜色【2026最新版】

PCL从LAS文件中获取点云的RGB信息(pcl::PointXYZRGB)并进行可视化。博客长期更新，本文最新更新时间为：2026年5月4日。

点云侠的博客 1720

JS获取DOM节点

1.js获取子节点 2.js获取父节点 3.js获取兄弟节点

shijie 1211

【第三方互联】3、腾讯QQ授权第三方登录

当我们创建的 QQ 互联应用成功后，我们便可以开始使用该应用来实现 QQ 互联 一、获取 APP ID 和 APP Key 1、找到我的应用 2、点击应用，进入详情 这样，我们就获取到了 APP ID 和 APP Key 二、进行开发 1、将 APP ID 、APP Key，以及该应用的信息放入项目中的配置文件中，我使用的是SpringBoot，我放在了 application.y...

JACKAL 22万+

js原生后代选择器_JavaScript DOM查询，原生js实现元素子节点的获取

每个网页都是一个dom树，网页中所有的内容都是这个树上的一个节点。JavaScript的工作就是操作这些节点，对节点进行查增删改操作，或是给节点绑定事件。网页dom树要操作dom节点，首先要获取到dom节点。这里我介绍几个原生js获取元素子节点的方法：一、通过标签的属性值获取后代节点以getElementBy开头的方法，可以根据具体的属性获取元素的后代节点。这些方法不只会获取子节点，他也会获取到所...

weixin_39705850的博客 2734

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明，包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

原生JS获取DOM元素节点的方法总结

前言（日常废话） 本篇文章记录了本人所知道的用原生JS来获取到DOM元素节点的几种办法，做个记录，加深记忆，方便以后复习。 正文 本文所做演示基于下面的HTML结构： 本文内容通过个人理解的分类进行归纳总结，大致的目录骨架如下： 目录 一、通过document顶层方法获取 1、document获取html，head，body标签 1.1、获取html标签 1.2、获取head标签 1.3、获取body标签 2、getElementBy系列获取 2.1、通过ID获取 2.2、通过类名获取 2.

traceur0529的博客 2724

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正

【JavaScript】获取和操作 DOM 节点

只是创建不会显示到页面上，要显示到页面上得使用下面的插入节点。// 父节点.replaceChild(换上节点, 换下节点)：把子节点插入到父节点中，并且放到指定一个节点的前面。：把子节点插入到父节点中，并且是在最后面的位置插入。：若删除的节点中有子节点会一并删除。// li渲染后清空文本域中的内容。// 在创建的li标签中添加按钮。// 判断文本域的内容是否为空。：将子节点从父节点中删除。：在父节点中，使用换上节点。// 给创建的按钮添加类名。// 给创建的按钮添加文本。：创建好的元素节点。

浅陌繁星的博客 1155

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具，可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

DOM：JavaScript如何获取标签所有的兄弟节点

JavaScript可以通过previousSibling和previousElementSibling，nextSibling和nextElementSibling获取紧邻的上一个，下一个兄弟（标签）节点。 但是这么做只能获取一个兄弟节点。如果要获取所有的兄弟节点呢？ 方法一：原生态的JS方法 * 参数：tag 目标标签。 * 功能：返回 tag标签的所有兄弟标签数组 let ...

九天翔龙的技术博客 5198

js Dom节点树

js Dom节点树 1、节点类型 2、节点关系 3、元素节点、元素节点关系 4、查：js获取元素节点常用方法 5、增：创建元素节点 6、删：删除元素节点 7、改：插入元素节点 ...

qq_29590623的博客 1242

JavaScript——DOM编程、JS的对象和JSON

JavaScript——DOM编程、JS的对象和JSON

雷神乐乐的博客 1546

JavaScript DOM 元素节点操作详解

本文总结了JavaScript操作DOM的主要方法，涵盖获取元素、创建和修改节点、操作属性和样式等核心内容。获取元素可通过ID、类名、标签名、CSS选择器等方式，返回HTMLCollection或NodeList。节点操作包括创建、添加、删除、替换和修改内容，推荐使用textContent防XSS攻击。属性操作支持标准属性、自定义data-*属性和通用方法。样式操作包含内联样式、类名修改和计算样式获取。

2401_87008233的博客 1182

JavaScript DOM查询，原生js实现元素子节点的获取

在网页网页开发中，经常会需要获取某个网页元素的子元素，然后对其进行时间绑定、或样式修改等网页行为。这些操作对于jquery来说很容易，但是对于原生js会稍微麻烦一些。 一、childNodes 子节点的操作，大部分人首先想到的肯定是“childNodes”。childNodes属性可以获取节点元素的子节点，并将获取到的子节点封装成一个对象： <div class="test" id...

weixin_30832405的博客 3028
上一篇： JavaScript获取DOM节点的办法(JS笔记:十九)
下一篇： JavaScript中DOM节点类型(JS笔记:二十一)
点赞 0
评论 0
书签 书签 0
TZOF_
TZOF_
博客等级 码龄7年 37粉丝 45原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TZOF_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值