JS DOM 编程复习笔记--父元素、子元素和兄弟元素（三）

article/2025/9/26 16:25:57

今天我们来复习DOM中的获取父元素、子元素和兄弟元素的API，它们主要有parentNode、firstChild、firstElementChild、lastChild、lastElementChild、childNodes、children、nextElementSibling、nextSibling、previousElementSibling、previousSibling等。

目录

  • 获取父元素 - parentNode

  • 获取子元素 -firstChild、firstElementChild、lastChild、lastElementChild、childNodes、children

  • 获取兄弟元素 - nextElementSibling、nextSibling、previousElementSibling、previousSibling

获取父元素

parentNode 属性

获取DOM树中指定节点的父节点，我们可以使用parentNode 属性

let parent = node.parentNode;

parentNode 为只读属性

Document 和 DocumentFragment 没有父节点，所以 parentNode 属性将会为 null。

parentNode 例子

下面是一个简单的页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript parentNode</title>
</head>
<body><div id="main"><p class="note">这是一个段落</p></div><script>let note = document.querySelector('.note');console.log(note.parentNode);</script>
</body>
</html>

控制台打印结果

image-20211019150342852

如果没有指定的元素没有父元素 parentNode 属性也会为 null。

获取子元素

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Child Elements</title>
</head>
<body><ul id="menu"><li class="first">首页</li><li>产品</li><li class="current">新闻</li><li>博客</li><li>投资者</li><li>文档</li><li class="last">关于我们</li></ul>
</body>
</html>

firstChild

获取指定元素的第一个子节点，使用 firstChild 属性

let firstChild = parentElement.firstChild;

如果父元素没有任何子元素，则firstChild 返回null。firstChild 属性返回一个子节点，它可以是任何节点类型，例如元素节点、文本节点或注释节点。

let content = document.getElementById('menu');
let firstChild = content.firstChild.nodeName;
console.log(firstChild);// 输出：
// #text

上面的代码输出#text，而不是li节点，这是因为ul和li之间有一段空白。

在HTML中任何空格（单个空格、多个空格、回车符和制表符）都将创建一个 #text 节点。 要删除 #text 节点，可以删除空格，如下所示

<ul id="menu"><li class="first">首页</li><li>产品</li></ul>

如果我要获取第一个元素类型的子节点，我们可以使用firstElementChild属性

let firstElementChild = parentElement.firstElementChild;

下面代码将输出第一个li元素

let content = document.getElementById('menu');
console.log(content.firstElementChild);// 输出：
// <li class="first">首页</li>

lastChild

同理要获取节点的最后一个子节点，我们使用 lastChild 属性

let lastChild = parentElement.lastChild;

和firstChild一样，如果想获取最后一个子元素，使用lastElementChild 属性

let lastChild = parentElement.lastElementChild;

下面代码将会返回ui最后一个li元素

let menu = document.getElementById('menu');
console.log(menu.lastElementChild);// 输出：
// <li class="last">关于我们</li>

childNodes

获取指定元素的子元素NodeList，使用childNodes属性

let children = parentElement.childNodes;

和firstChild，lastChild相似

childNodes 属性返回具有任何节点类型的所有子元素。 要仅获取元素节点类型的子元素，请使用 children 属性：

let children = parentElement.children;

下面代码将获取ul下的所有子元素

let menu = document.getElementById('menu');
let children = menu.children;
console.log(children);

输出如下图

image-20211019152812056

兄弟元素

如何获取一个元素的下一个兄弟元素、前一个兄弟元素和所有兄弟元素，假如我们的HTML结构如下

<ul id="menu"><li>首页</li><li>产品</li><li class="current">新闻</li><li>博客</li><li>投资者</li><li>文档</li><li>关于我们</li>
</ul>

下一个兄弟元素

要获取下一个兄弟元素，使用 nextElementSibling 属性

let nextSibling = currentNode.nextElementSibling;

如果指定元素是父级下的最后一个元素，那么nextElementSibling 返回 null。

let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;
console.log(nextSibling);// 输出：
// <li>博客</li>

获取指定元素的所有下一个相邻的兄弟元素，我们可以加个while循环

let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;while(nextSibling) {console.log(nextSibling);nextSibling = nextSibling.nextElementSibling;
}

上一个兄弟元素

同理，获取上一个兄弟元素，使用 previousElementSibling 属性

let current = document.querySelector('.current');
let prevSibling = currentNode.previousElementSibling;

如果指定元素是父级下的第一个元素，那么previousElementSibling 返回 null。

let current = document.querySelector('.current');
let prevSiblings = current.previousElementSibling;
console.log(prevSiblings);// 输出：
// <li>产品</li>

同理，获取指定元素的所有上一个相邻的兄弟元素，我们可以加个while循环

let current = document.querySelector('.current');
let prevSibling = current.previousElementSibling;
while(prevSibling) {console.log(prevSibling);prevSibling = prevSibling.previousElementSibling;
}

获取所有兄弟元素

要获取指定元素的所有兄弟元素，我们可以按照下面逻辑

  • 首先查找指定元素的父元素，如果没有返回，说明没有任何兄弟元素
  • 第二获取父元素下的第一个子节点
  • 第三将第一个元素添加到siblings数组中
  • 第四选择第一个元素的下一个兄弟元素
  • 最后，循环三、四步骤，直到没有下一个兄弟元素节点
let getSiblings = function (e) {// 存储所有兄弟元素let siblings = []; // 如果没有父元素，返回if(!e.parentNode) {return siblings;}// 父元素的第一个子元素let sibling  = e.parentNode.firstChild;// 循环，记录所有兄弟元素while (sibling) {if (sibling.nodeType === 1 && sibling !== e) {siblings.push(sibling);}sibling = sibling.nextSibling;}return siblings;
};

示例代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JavaScript Siblings</title>
</head>
<body><ul id="menu"><li>首页</li><li>产品</li><li class="current">新闻</li><li>博客</li><li>投资者</li><li>文档</li><li>关于我们</li></ul><script>let getSiblings = function (e) {// 存储所有兄弟元素let siblings = []; // 如果没有父元素，返回if(!e.parentNode) {return siblings;}// 父元素的第一个子元素let sibling  = e.parentNode.firstChild;// 循环，记录所有兄弟元素while (sibling) {if (sibling.nodeType === 1 && sibling !== e) {siblings.push(sibling);}sibling = sibling.nextSibling;}return siblings;};let siblings = getSiblings(document.querySelector('.current'));siblingText = siblings.map(e => e.innerHTML);console.log(siblingText);</script>
</body>
</html>

上面代码将输出:

['首页', '产品', '博客', '投资者', '文档', '关于我们']

总结

这些很基础的DOM操作API可能平时大家用的比较少，都是借助于JQuery或者Vue、React这些MVVM这些框架，但大家要明白这些技术的底层原理也是这些很基础的DOM操作，只不过把脏活累活都帮你干了。

今天就到这里，明天继续讲讲动态创建DOM元素、动态插入。

如果你想跟着我一起复习DOM知识，微信搜索【小帅的编程笔记】，每天更新


http://chatgpt.dhexx.cn/article/VbaQCAel.shtml

相关文章

jquery 在兄弟节点前、或兄弟节点后添加最新元素

jquery 在兄弟节点前、或兄弟节点后添加最新元素

使用 jquery 封装好的方法操作 dom&#xff0c;非常方便 1、在兄弟节点前添加最新元素 使用 before() 方法 演示代码如下 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script src"js/jquery-…
阅读更多...
CSS第一章：4.元素关系（兄弟、祖后代关系）；关系选择器

CSS第一章：4.元素关系（兄弟、祖后代关系）；关系选择器

总览 1.元素关系 2.关系选择器 一、元素关系 1.元素关系1&#xff1a;父子 父元素&#xff1a;直接包含子元素的元素叫做父元素 子元素&#xff1a;直接被父元素包含的元素叫做子元素 2.元素关系2&#xff1a;祖先后代 祖先元素&#xff1a;直接或间接包含后代元素的元素…
阅读更多...
选择兄弟元素中的第几个元素

选择兄弟元素中的第几个元素

:nth-child(anb) 这个CSS伪类首先找到所有当前元素的兄弟元素&#xff0c;然后按照位置先后顺序从1开始排序&#xff0c;选择的结果为CSS伪类:nth-child括号中表达式&#xff08;anb&#xff09;匹配到的元素集合&#xff08;n0&#xff0c;1&#xff0c;2&#xff0c;3...&am…
阅读更多...
兄弟元素选择器

兄弟元素选择器

兄弟元素选择器 语法1&#xff1a;前一个元素 后一个元素作用&#xff1a;选中一个元素后紧挨着的指定的兄弟元素。语法2&#xff1a;前一个元素 ~ 后边一类元素作用&#xff1a;选中后边的所有兄弟元素 举例1&#xff1a; <!DOCTYPE html> <html lang"en&qu…
阅读更多...
Thinking -- CSS从根解决选择前一个兄弟元素

Thinking -- CSS从根解决选择前一个兄弟元素

Thinking系列&#xff0c;旨在利用10分钟的时间传达一种可落地的编程思想。 开发中遇到这样一个诉求&#xff1a;特定class的元素单独占一行&#xff0c;现需要针对其前一个兄弟元素增加相应标识&#xff0c;以使其占据所在行的剩余所有空间。 换句话&#xff1a;就是如何选中…
阅读更多...
JS 兄弟元素和兄弟节点

JS 兄弟元素和兄弟节点

获取兄弟节点和兄弟元素 例子&#xff1a; //body内容<ul id"ul">wwwwww<!-- 我是注释 --><li>我是li标签1</li><li id"li2">我是li标签2</li><li>我是li标签3</li><li>我是li标签4</li><…
阅读更多...
css-知识点（学习笔记）

css-知识点（学习笔记）

一、鼠标悬停样式 hover伪类基础用法 在前端学习的初期&#xff0c;想必大家用的很多的属性之一就有hover吧,hover伪类元素使用的三种情况 1、 hover用于父子元素 父子元素直接在父元素的id或者class或者标签名后紧接着:hover 然后空格子元素的名字就可以了。 2、 hover用于…
阅读更多...
RPC原理及其调用过程

RPC原理及其调用过程

RPC原理及其调用过程 远程过程调用&#xff0c;简称为RPC&#xff0c;是一个计算机通信协议&#xff0c;它允许运行于一台计算机的程序调用另一台计算机的子程序&#xff0c;而无需额外地为这个交互作用编程。 RPC与传统的HTTP对比 优点&#xff1a; 1. 传输效率高(二进制传输…
阅读更多...
用简单的方式去描述RPC原理

用简单的方式去描述RPC原理

接下来我们就讲RPC&#xff1a;远程过程调用。其实RPC仅仅是一个概念&#xff0c;RPC没有协议没有框架&#xff0c;平时我们说的RPC框架其实是简称&#xff0c;很多人被带偏了&#xff0c;以为RPC是一个协议或者是框架&#xff0c;所以你以后如果听到RPC框架&#xff0c;你要立…
阅读更多...
RPC核心原理是什么？以及常用技术有哪些？

RPC核心原理是什么？以及常用技术有哪些？

前面一篇文章有提到过RPC&#xff0c;那么RPC是什么呢&#xff1f; RPC&#xff08;Remote Procedure Call&#xff09;&#xff0c;代表远程过程调用&#xff0c;通过网络通信调用不同的服务&#xff0c;共同支撑一个软件系统&#xff0c;微服务实现的基石技术。使用RPC可以解…
阅读更多...
RPC框架原理简介

RPC框架原理简介

什么是RPC框架&#xff1f; RPC&#xff0c;全称为Remote Procedure Call&#xff0c;即远程过程调用&#xff0c;是一种计算机通信协议。 比如现在有两台机器&#xff1a;A机器和B机器&#xff0c;并且分别部署了应用A和应用B。假设此时位于A机器上的A应用想要调用位于B机器上…
阅读更多...
RPC通信原理

RPC通信原理

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、RPC是什么&#xff1f;二、RPC原理总…
阅读更多...
RPC框架面试总结-RPC原理及实现

RPC框架面试总结-RPC原理及实现

一、什么是RPC RPC是远程调用过程的简写&#xff0c;是一个协议&#xff0c;处于网络通信协议的第五层&#xff1a;会话层&#xff0c;其下就是TCP/IP协议&#xff0c;在建立在其基础上的通信会话协议。RPC定义了交互的模式&#xff0c;而应用程序使用这些模式&#xff0c;来访…
阅读更多...
RPC原理与FastRPC实现

RPC原理与FastRPC实现

0. 起因 最近看文档&#xff0c;发现一些组件是通过FastRPC来进行沟通的&#xff0c;并且偶尔看到某些场景下在FastRPC上的时间消耗好像也蛮可观&#xff0c;恰好FastRPC是开源的&#xff0c;因此决定看看FastRPC具体的实现。 1. RPC简介 当初在学Java的时候&#xff0c;初遇…
阅读更多...
RPC原理详解

RPC原理详解

转自&#xff1a;http://www.cnblogs.com/metoy/p/4321311.html RPC 功能目标 RPC 的主要功能目标是让构建分布式计算&#xff08;应用&#xff09;更容易&#xff0c;在提供强大的远程调用能力时不损失本地调用的语义简洁性。 为实现该目标&#xff0c;RPC 框架需提供一种透…
阅读更多...
RPC原理介绍

RPC原理介绍

面向服务架构SOA 任何大型网站的发展都伴随着网站架构的演进。网站架构一般最初是单应用设计&#xff0c;然后逐渐经历面向对象设计和模块化设计的架构&#xff0c;最终发展到面向服务的服务化架构。在单应用设计架构体系当中&#xff0c;我们关注的是方法和实体&#xff1b;而…
阅读更多...
RPC 原理与实现

RPC 原理与实现

文章目录 1. RPC 简介1.1 什么是RPCReference: LPC & IPC (本地过程调用) 1.2 为什么要用RPC1.2.1 系统架构的演进1.2.2 Web 服务的技术结构1.2.2 SOAP &#xff08; Simple Object Access Protocol&#xff09;1.2.2 REST&#xff08;Representational State Transfort&am…
阅读更多...
RPC核心原理

RPC核心原理

了解RPC RPC全称Remote Procedure Call,即远程过程调用.其中远程需要跨机器,跨机器需要可靠的网络编程技术实现,无论是Java原生的网络编程模型还是Netty都会让代码中出现大量与业务无关的网络编程代码,RPC技术则是为了解决这个问题的.它帮助我们屏蔽网络编程的细节,实现调用远…
阅读更多...
RPC原理(1)之深入RPC原理简介

RPC原理(1)之深入RPC原理简介

一、RPC调用原理图 下面这张图是我们微服务一次Http调用请求图&#xff1a; 首先在请求的过程中我们知道是有三次握手&#xff0c;四次挥手的流程&#xff0c;具体流程如下&#xff1a; 1.浏览器请求服务器(订单服务)&#xff0c;请求建立连接&#xff0c;首先客户端向服务器…
阅读更多...
RPC原理简述

RPC原理简述

RPC&#xff08;Remote Procedure Call&#xff09;&#xff1a;远程过程调用&#xff0c;它是一种通过网络从远程计算机程序上请求服务&#xff0c;而不需要了解底层网络技术的思想。 RPC 是一种技术思想而非一种规范或协议&#xff0c;常见 RPC 技术和框架有&#xff1a; 应…
阅读更多...
推荐文章

Copyright @ 2022~2023