【前端】关于DOM节点
参考这个: 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节点的更多相关文章
- 前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- 将HTML字符转换为DOM节点并动态添加到文档中
将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...
- angular.js 动态插入删除dom节点
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...
- 前端基础 DOM & BOM
推荐阅读:http://www.cnblogs.com/yuanchenqi/articles/6893904.html#_label3 BOM对象 window 对象 所有浏览器都支持 window ...
- DOM节点的创建、插入、删除、查找、替换
在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作. 一.创建DOM节点 使用的命令是 var oDiv = document.createElem ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- 深入理解DOM节点关系
× 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...
- 深入理解DOM节点类型第五篇——元素节点Element
× 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...
- 深入理解DOM节点类型第六篇——特性节点Attribute
× 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...
随机推荐
- C#生成新浪微博短网址 示例源码
using System; using System.Collections.Generic; using System.Linq; using System.Text; using DotN ...
- Apache Hudi在华米科技的应用-湖仓一体化改造
徐昱 Apache Hudi Contributor:华米高级大数据开发工程师 巨东东 华米大数据开发工程师 1. 应用背景及痛点介绍 华米科技是一家基于云的健康服务提供商,拥有全球领先的智能可穿戴技 ...
- 浏览器调用接口正常,jmeter调不通的可能原因
首先,还是http状态码介绍(网上都能找到这些简介): 1xx 信息,服务器收到请求,需要请求者继续执行操作 2xx 成功,操作被成功接收并处理 3xx 重定向,需要进一步的操作以完成请求 4xx 客 ...
- 面霸篇:Java 集合容器大满贯(卷二)
面霸篇,从面试角度作为切入点提升大家的 Java 内功,所谓根基不牢,地动山摇. 码哥在 <Redis 系列>的开篇 Redis 为什么这么快中说过:学习一个技术,通常只接触了零散的技术点 ...
- [luogu2303]Longge的问题
1 #include<bits/stdc++.h> 2 using namespace std; 3 #define ll long long 4 ll n,ans; 5 ll phi(l ...
- 前端---梳理 http 知识体系 2
为什么要有HTTPS HTTP 天生具有明文的特点,整个传输过程完全透明,任何人都能够在链路中截获.修改或者伪造请求 / 响应报文,数据不具有安全性.仅凭HTTP 自身是无法解决的,需要引入新的HTT ...
- 【状压dp】Hamiton路径
描述 给定一张 n(n≤20) 个点的带权无向图,点从 0~n-1 标号,求起点 0 到终点 n-1 的最短Hamilton路径. Hamilton路径的定义是从 0 到 n-1 不重不漏地经过每个点 ...
- 洛谷 P5401 - [CTS2019]珍珠(NTT+二项式反演)
题面传送门 一道多项式的 hot tea 首先考虑将题目的限制翻译成人话,我们记 \(c_i\) 为 \(i\) 的出现次数,那么题目的限制等价于 \(\sum\limits_{i=1}^D\lflo ...
- java数组中Arrays类
使用Arrays类之后要先导入包,即在开头添加这行: import.java.util.Arrays 1,排序:Arrays.sort(数组名) 排序后为数组升序. 2,将数组转换成字符串:Array ...
- CSS区分Chrome和Firefox
CSS区分Chrome和FireFox 描述:由于Chrome和Firefox浏览器内核不同,对CSS解析有差别,因此常会有在两个浏览器中显示效果不同的问题出现,解决办法如下: /*Chrome*/ ...