参考这个: https://juejin.cn/post/6844903849614901261

DOM树的根节点是document对象

DOM节点类型:HTML元素节点(element nodes)外,还有文字节点(text nodes)、注释节点(comment nodes)

常见的DOM节点的选取方式:

// 根据传入的值,找到 DOM 中 id 为 'xxx' 的元素。
document.getElementById('xxx'); // 针对给定的 tag 名称,返回所有符合条件的 NodeList 对象(节点的集合)
document.getElementsByTagName('xxx'); // 针对给定的 class 名称,返回所有符合条件的节点集合
document.getElementsByClassName('xxx'); // 针对给定的 Selector 条件,返回第一个 或 所有符合条件的节点集合
document.querySelector('xxx');
document.querySelectorAll('xxx');

DOM 节点间的查找遍历(Traversing)

由于DOM 节点有分层的概念,于是节点与节点之间的关系,我们大致上可以分成以下两种:

父子关系:除了document之外,每一个节点都会有个上层的节点,我们通常称之为「父节点」 (Parent node),而相对地,从属于自己下层的节点,就会称为「子节点」 (Child node)。

Node.childNodes

所有的DOM节点对象都有childNodes属性,且此种属性无法修改。

我们可以通过Node.hasChildNodes()来检查某个DOM节点是否有子节点。

var node = document.querySelector('#hello');

// 如果 node 內有子元素
if( node.hasChildNodes() ) { // 可以通过 node.childNodes[n] (n 为数字索引) 取得对应的节点
// 注意,NodeList 对象內容为即时更新的集合
for (var i = 0; i < node.childNodes[i].length; i++) {
// ...
};
}

Node.childNodes返回的可能会有这几种:

HTML 元素节点(element nodes)

文字节点(text nodes),包含空格

注释节点(comment nodes)

兄弟关系:有同一个「父节点」的节点,那么他们彼此之间就是「兄弟节点」(Siblings node)。

查看这个节点有没有包含node.contains(givenNode)

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/contains

【前端】关于DOM节点的更多相关文章

  1. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  2. 将HTML字符转换为DOM节点并动态添加到文档中

    将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...

  3. angular.js 动态插入删除dom节点

    angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...

  4. 前端基础 DOM & BOM

    推荐阅读:http://www.cnblogs.com/yuanchenqi/articles/6893904.html#_label3 BOM对象 window 对象 所有浏览器都支持 window ...

  5. DOM节点的创建、插入、删除、查找、替换

    在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作. 一.创建DOM节点 使用的命令是 var oDiv = document.createElem ...

  6. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  7. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  8. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  9. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

随机推荐

  1. C++概述及知识点总结

    经过一段时间的学习,以前从没有接触过C++这个高逼格的语言的小白,逐渐对C++有了更深的了解和认识,C++是c语言的升级版,Bjarne Stroustrup在剑桥大学计算机中心工作.他使用过Simu ...

  2. R数据分析:纵向数据如何做中介,交叉滞后中介模型介绍

    看似小小的中介,废了我好多脑细胞,这个东西真的不简单,从7月份有人问我,我多重中介,到现在的纵向数据中介,从一般的回归做法,到结构方程框架下的路径分析法,到反事实框架做法,从中介变量和因变量到是连续变 ...

  3. [atAGC006D]Median Pyramid Hard

    二分答案,考虑答案是否会大于等于这个mid,显然所有数值分为两类:大于等于mid和小于mid将n个数转化为01串,如果0和1不相邻,那么答案就是第一个数/最后一个数(一定会相同),考虑有连续两个0/1 ...

  4. maven插件慢的解决方案

    -DarchetypeCatalog=local 地址:https://www.cnblogs.com/del88/p/6286887.html

  5. 详解在Linux中安装配置MySQL

    最近在整理自己私人服务器上的各种阿猫阿狗,正好就顺手详细记录一下清理之后重装的步骤,今天先写点数据库的内容,关于在Linux中安装配置MySQL 安装环境 CentOS7 + MySQL5.7 下载安 ...

  6. [省选联考 2021 A/B 卷] 图函数

    考虑到一件事情首先\(u -> u\)是可行的. 所以其实对于\(f(u,G')\) 只要考虑\([1,u]\)的点. 那么考虑其条件等价于\(u -> i\) 和 \(i -> u ...

  7. 洛谷 P6667 - [清华集训2016] 如何优雅地求和(下降幂多项式,多项式)

    题面传送门 wjz:<如何优雅地 AK NOI> 我:如何优雅地爆零 首先,按照这题总结出来的一个小套路,看到多项式与组合数结合的题,可以考虑将普通多项式转为下降幂多项式,因为下降幂和组合 ...

  8. Codeforces 453E - Little Pony and Lord Tirek(二维线段树+ODT)

    Codeforces 题目传送门 & 洛谷题目传送门 一道难度 *3100 的 DS,而且被我自己搞出来了! 不过我终究还是技不如人,因为这是一个 \(n\log^2n\) + 大常数的辣鸡做 ...

  9. MISA(在线)注释叶绿体基因组SSR

    SSR (Simple Sequence Repeat),即简单重复序列,是一种以PCR技术为核心的DNA分子标记技术,也称为微卫星序列或者串联重复. 简单重复顾名思义就是以很短的序列为一个单元,比如 ...

  10. 【GS文献】植物育种中基因组选择的方法、模型及展望

    目录 1. GS/GP在植物育种中的角色 2. GP模型应用 3. GP模型的准确性 4. 植物育种的GS展望 5. 小结 Genomic SelectioninPlant Breeding: Met ...