DOM 子节点 和兄弟节点

最新推荐文章于 2025-05-22 09:38:13 发布
最新推荐文章于 2025-05-22 09:38:13 发布
阅读量562 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Winge_Fish/article/details/58670669
本文详细介绍了DOM操作中的firstChild、firstElementChild等属性的使用方法及其兼容写法，并对比了标准与非标准环境下这些属性的区别。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

firstChild

元素.firstChild : 只读 属性 第一个子节点

  • 标准下： firstChild会包含文本类型的节点

  • 非标准下： 只包含元素节点

firstElementChild
  • 元素.firstElementChild: 只读 属性 标准下获取第一个元素类型的子节点，非标准下是不存在

结合起来的兼容写法：

var oFirst = oUl.fistElementChild || oUl.firstChild;
lastChild 和 lastElementChild
  • 元素.lastChild || 元素.lastElementChild

跟fistChild 类似

nextSibling 和 nextElementSibling
  • 元素.nextSibling || 元素.nextElementSibling
    下一个兄弟节点
previousSibling 和 previousElementSibling
  • 元素.previousSibling || 元素.previousElementSibling
    下一个兄弟节点
DOM的节点的插入 插入子节点与兄弟节点
时光不顾的博客
12-15 3248
无标题文档              function showinsert(){  //添加子节点             var str=document.getElementById("mydiv");             var zif="段落五";             var obj=document.createElement("p");  //添加哪类节点   
dom 兄弟节点（获取）
qq_45827064的博客
05-17 638
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
35.关于父节点，子节点，兄弟节点
qq_53630069的博客
09-19 467
1. 2.通过构造的方式来获取任意子节点的父节点 <ul id="nima"> <button type="button" id="nmiaf">fsdfasfsaaf</button> <li id="nmaf"></li> <li id="niaf"></li> <li id="miaf"></l...
dom访问节点
ymmygtl的专栏
09-24 291
通过使用 getElementById() 方法 通过使用 getElementsByTagName() 方法 通过使用 getElementsByClassName() 方法
JavaScript父节点、子节点和兄弟节点
芋泥啵啵月亮的博客
08-10 1233
概述 之前获取元素的方法像 document.getElementById document.getElementsByTagName document.querySelector 是利用DOM提供的方法来获取元素逻辑性不强并且非常繁琐。 还可以利用节点层级关系来获取元素。 利用父子兄节点关系获取元素。逻辑性强，但兼容性稍差。 一般，任何节点都具有nodeType节点类型、nodeName节点名称和nodeValue节点值这三个基本属性。 节点类型 nodeType的取值 元素节点 1
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
在给定的文件内容中，我们可以看到如何使用JavaScript来操作DOM，具体是在一个HTML文档中插入新的子节点和兄弟节点。 知识点1：DOM节点的分类 在DOM中，节点可以是不同类型的实体，例如元素节点、文本节点或属性...
JS获取子节点、父节点和兄弟节点的方法实例总结
10-18
本文主要针对获取子节点、父节点和兄弟节点的方法进行了详尽的实例总结，并在操作过程中需要注意的技巧与事项进行了分析。 首先，获取子节点是日常开发中的基础操作。有多种方式可以获取子节点，包括但不限于使用...
14DOM 节点兄弟与子节点操作及兼容性封装大揭秘！
最新发布
前端基地
05-22 810
本文深度剖析 DOM 节点操作，涵盖lastElementChild、nextElementSibling等属性，详细对比其与firstElementChild等属性的使用规则，还给出nextElementSibling等属性的兼容性封装方法，助你无惧浏览器差异，轻松搞定 DOM 节点操作！
DOM 脚本编程中的兄弟节点
09-05
兄弟节点是指在同一个父节点下，拥有相同层级的子节点，它们之间通过`previousSibling`和`nextSibling`属性相互关联。这两个属性允许开发者遍历DOM树中同一级别的节点，从而实现对页面元素的动态操作。 当提到"兄弟...
xpath兄弟结点语法
MarkAdc的博客
07-08 6388
代码 from lxml import etree html = """ <div> <hello> 我是hello标签 </hello> <a id="1" href="www.baidu.com"> 我是第1个a标签 </a> <p> 我是p标签0 </p> <a id...
兄弟节点（64）
weixin_45147894的博客
07-09 258
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title...
993. 二叉树的堂兄弟节点
hushaoqiqimingxing的博客
04-28 995
在二叉树中，根节点位于深度0处，每个深度为k的节点的子节点位于深度k+1处。 如果二叉树的两个节点深度相同，但父节点不同，则它们是一对堂兄弟节点。 我们给出了具有唯一值的二叉树的根节点root，以及树中两个不同节点的值x和y。 只有与值x和y对应的节点是堂兄弟节点时，才返回true。否则，返回false。 示例 1： 输入：root = [1,2...
element.firstChild
weixin_30544657的博客
04-15 235
摘要 返回当前元素第一个子元素, 如果元素没有子元素返回 null. 语法 childNode = node.firstChild; 如果node有子元素,childNode 是 node第一个子元素的引用, 否则为 null. 范例 这个例子示范使用 firstChild 和以及空白符结点会对使用此属性造成何种影响。参见 注意 部分获取 Gecko DOM 关于...
JS DOM 编程复习笔记--父元素、子元素和兄弟元素（三）
小帅的编程笔记
10-19 1857
今天我们来复习DOM中的获取父元素、子元素和兄弟元素的API，它们主要有parentNode、firstChild、firstElementChild、lastChild、lastElementChild、childNodes、children、nextElementSibling、nextSibling、previousElementSibling、previousSibling等。 目录 获取父元素 - parentNode 获取子元素 -firstChild、firstElementChild
初步认识 树和堆
guo2102890559的博客
03-31 423
堆是一种以顺序存储为存储形式的完全二叉树结构，分为大堆小堆两种。大堆的根数据是最大的，大堆的每一个根节点的数据都大于该节点的子节点。小堆相反。逻辑结构是堆，物理结构是数组，用数组来存储每个节点的数据在定义过程中，通过二叉树的性质，可得公式，左子节点leftchild的下标=父节点parent的下标*2+1具体要实现的接口有初始化销毁插入向上调整删除向下调整判断堆是否为空返回根的数据等等。。。
数据结构——树
wfm19970的博客
07-22 1651
1.树(Tree)基本概念 节点、根节点、父节点、子节点、兄弟节点 一棵树可以没有任何节点，称为空树 一棵树可以只有1个节点，也就是只有根节点 子树、左子树、右子树 节点的度(degree) :子树的个数 树的度:所有节点度中的最大值 叶子节点(leaf) :度为0的节点 非叶子节点:度不为0的节点 层数(level):根节点在第1层，根节点的子节点在第2层，以此类推(有些教程也从第0层开始计算) 节点的深度(depth) :
二叉树的相关概念及其性质
派拉斯兔子的博客
11-10 1969
树型结构 树（Tree）的基本概念 节点：每个元素称为结点 根节点：一棵树最多有一个根节点， 父节点：若一个结点含有子结点，则这个结点称为其子结点的父结点 子节点：一个结点含有的子树的根结点称为该结点的子结点 兄弟节点：具有相同父结点的结点互称为兄弟结点 一棵树可以没有任何节点，称为空树。 一棵树可以只有1个节点，也就是只有根节点。 子树、左子树、右子树 节点的度（degree）：子树的个数 树的度：所有节点度中最大值。 叶子节点（leaf）：度为0的节点
JavaScript学习笔记3——JavaScript操作DOM对象
qq_45569406的博客
08-22 339
JavaScript学习笔记3——JavaScript操作DOM对象
dom获取节点（子节点、兄弟节点、父节点）
热门推荐
张木期的博客
07-16 1万+
今天在做一个项目拿兄弟节点的事，刚开始拿不到，后来网上查了一下，于是 便找到方法了，下面把我的问题写出来，话不多说直接上问题， 遇到的问题是我要通过点击删除按钮删除这一行数据，后端给的接口要传的参数就是设备编号（imei），重点是这个列表本身也是动态的数据，用框架渲染出来的，然后就想到了用dom节点来删除，还算比较简单， 我要获取的就是imei，然后通过ajxa调用接口删除，完美实现，下面是源码...
理解DOM：节点操作与模型解析
根节点之下是父节点和子节点的关系，父节点是位于一个节点之上，而子节点则是位于其下方的节点。兄弟节点是指在同一层级上并具有相同父节点的节点。后代节点指的是一个节点所有子节点及其子节点的集合，而叶子节点则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值