除了根节点，其他节点都有三种层级关系。

父节点关系（parentNode）：直接的那个上级节点

子节点关系（childNodes）：直接的下级节点

同级节点关系（sibling）：拥有同一个父节点的节点

注意:
1. 根节点和非根节点都可以没有子节点, 但根节点一定没有父节点, 而非根节点一定有, 且有且仅有一个父节点.

2. 子节点可以有多个, 父节点只能有一个.

3. 同级节点也叫 兄弟节点 , 他们有同样的父节点, 但子节点不一样.

4. 在 js 中, 根节点为 document.

怎样理解 DOM 的三种层级关系的更多相关文章

  1. EF Core 快速上手——EF Core的三种主要关系类型

    系列文章 EF Core 快速上手--EF Core 入门 本节导航 三种数据库关系类型建模 Migration方式创建和习修改数据库 定义和创建应用DbContext 将复杂查询拆分为子查询   本 ...

  2. PD的CDM模型中的三种实体关系

    PD的CDM模型中的三种实体关系 本文摘自:http://www.cnblogs.com/syf/articles/2480580.html PD 正向工程使用说明:http://download.c ...

  3. C++中的三种继承关系

    C++中的三种继承关系 先看类中声明成员时的三种访问权限 public : 可以被任意实体访问 protected : 只允许子类及本类的成员函数访问 private : 只允许本类的成员函数访问 在 ...

  4. 一个简单的例子理解Kubernetes的三种IP地址类型

    很多Kubernetes的初学者对Kubernetes里面三种不同的IP地址和工作机制理解得不是很清楚. 本文我们通过一个最简单的例子来学习. 用如下命令行创建一个基于nginx的deployment ...

  5. 理解java的三种代理模式

    代理模式是什么 代理模式是一种设计模式,简单说即是在不改变源码的情况下,实现对目标对象的功能扩展. 比如有个歌手对象叫Singer,这个对象有一个唱歌方法叫sing(). 1 public class ...

  6. 举例理解Hibernate的三种状态

    初学Hibernate,了解到Hibernate有三种状态:transient(瞬时状态),persistent(持久化状态)以及detached(游离状态). 它们之间有如下转换图来说明: 1.tr ...

  7. 【Web前端Talk】“用数据说话，从埋点开始”-带你理解前端的三种埋点

    埋点到底是什么呢? 引用自百科的原话是,埋点分析网站分析的一种常用的数据采集方法.因此其本质是分析,但是靠什么分析呢?靠埋点得到的数据.通俗来讲,就是当我想要在某个产品上得到用户的一些行为数据用来分析 ...

  8. 一篇文章让你理解Ceph的三种存储接口(块设备、文件系统、对象存储)

    “Ceph是一个开源的.统一的.分布式的存储系统”,这是我们宣传Ceph时常说的一句话,其中“统一”是说Ceph可以一套存储系统同时提供块设备存储.文件系统存储和对象存储三种存储功能.一听这句话,具有 ...

  9. 锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)

    1.jQuery对象就是通过jQuery包装DOM对象后产生的对象.   2.jQuery对象和DOM对象的相互转换.   良好的书写风格: var $input=$("input" ...

随机推荐

  1. js毫秒数转换为具体日期

    [1].毫秒数转换为具体日期 function getMyDate(str) {    var oDate = new Date(str),    oYear = oDate.getFullYear( ...

  2. laravel-5.6路由命名

    1.第一种:通过route路由中的as关键字来实现 1 Route::get('api/user',['as'='web.user'],'messageController@userInformati ...

  3. JDK与CGlib动态代理的实现

    应用的原型为 执行者:房屋中介Agency(分为JDKAgency.CGlibAgency) 被代理对象:程序员Programmer 被代理对象的实现接口:租户Tenement(CGlibAgency ...

  4. js对象和jQuery对象的区别

    (1)js对象的三种基本定位方式 (A)通过ID属性:document.getElementById() (B)通过NAME属性:document.getElementsByName() (C)通过标 ...

  5. Java堆大小[z]

    JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制. 32位系统下,一般限制在1.5G~2G:64为操作系统对内存 ...

  6. linux简单命令---网络编程

    ---------------------------------------------------------------------------------------------------- ...

  7. [SOME_MUTATION] (state) {// mutate state}Vuex中使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名

    使用常量替代 Mutation 事件类型 使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式.这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可 ...

  8. 爬取汽车之家新闻图片的python爬虫代码

    import requestsfrom bs4 import BeautifulSouprespone=requests.get('https://www.autohome.com.cn/news/' ...

  9. python之pip使用技巧

    pip 镜像临时使用:pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyspider永久:直接在user目录中创建一个pip目录:C: ...

  10. 解决 ThinkPHP 5 把控制器下的文件夹当做控制器输出的问题

    目录结构: application/home/controller/user_info/User.php 输入路由:/home/user_info/user/index 看样子没毛病,但会报错: 这是 ...