当前位置:网站首页>DOM节点操作
DOM节点操作
2020-11-07 17:19:00 【程序猿欧文】
DOM节点操作
1. 节点概述
节点的三个基本属性:
- 节点类型nodeType
- 节点名称nodeName
- 节点值nodeValue
- 元素节点 nodeType为1(实际开发中的主要操作)
- 属性节点 nodeType为2
- 文本节点 nodeType为3(文本节点包含文字、空格、换行等)
2. 节点层级
利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。
2.1 父级节点
node.parentNode
- parentNode属性可以返回某节点的最近一个父节点
- 如果指定的节点没有父节点,则返回nill
2.2 子节点
1.parentNode.childNodes // 标准
parentNode.childNode返回包含指定节点的子节点的集合,该集合为即时更新的集合。
注:
- 返回值里包含了所有的节点,包括元素节点、文本节点等
- 如果只想获得里面的元素节点,则需要专门处理。所以这种情况下不建议使用childNodes
// 只想获得里面的元素节点的处理var eg = document.querySelector('ol');for(var i = 0;i < ol.childNodes.length;i++) { if (ol.childNodes[i].nodeType == 1) { // 这样就可以选出元素节点 ...... }}
2.parentNode.children // 非标准
parentNode.children是一个只读属性,返回所有的子元素节点。它只返回子元素节点。虽然它是非标准,但是得到了各个浏览器的支持,因而可以放心使用。
3.parentNode.firstChild
parentNode.firstChild返回第一个子节点,找不到返回null。返回值里包含了所有的节点,包括元素节点、文本节点等。
4.parentNode.lastChild
parentNode.lastChild返回最后一个节点,找不到返回null。返回值里包含了所有的节点,包括元素节点、文本节点等。
5.parentNode.firstElementChild
parentNode.firstElementChild返回第一个子元素节点,找不到返回null。
6.parentNode.lastElementChild
parentNode.lastElementChild返回最后一个子元素节点,找不到返回null。
注:5、6方法存在兼容性问题,ie9以上才支持。
由于firstChild和lastChild包含其他节点,而firstElementChild和lastElementChild又有兼容性问题,所以获取第一个子元素节点或最后一个子元素节点的解决方法为:
- 如果想要第一个子元素节点,可以使用parentNode.children[0]
- 如果想要最后一个子元素节点,可以使用parentNode.children[parentNode.children.length-1]
2.3 兄弟节点
1.node.nextSibling
nextSibling返回当前元素的下一个兄弟节点,找不到返回null。返回值里包含了所有的节点,包括元素节点、文本节点等。
2.node.previousSibling
previousSibling返回当前元素上一个兄弟节点,找不到返回null。返.........
版权声明
本文为[程序猿欧文]所创,转载请带上原文链接,感谢
https://my.oschina.net/mikeowen/blog/4707624
边栏推荐
- Reserved battery interface, built-in charge and discharge circuit and electricity meter, quickly help easily handle hand-held applications
- RFID fixed assets management system for fire equipment
- 快進來!花幾分鐘看一下 ReentrantReadWriteLock 的原理!
- JS array the usage of array is all here (array method reconstruction, array traversal, array de duplication, array judgment and conversion)
- 11. Service update
- 2018中国云厂商TOP5:阿里云、腾讯云、AWS、电信、联通 ...
- 把 4个消息队列都拉到一个群里后,他们吵起来了
- 聊聊先享後付
- 条形码识别器Dynamsoft Barcode Reader v7.5全新上线!
- Mobile pixel adaptation scheme
猜你喜欢
Git SSH bad permissions
Nanjing logo design and production, guide VI system design
jenkins pipline stage 设置超时
How to deploy Gantt chart quickly and correctly
Exclusive interview with Yue Caibo
如何解决谷歌Chrome浏览器空白页的问题
课堂练习
Exclusive interview with alicloud database of | 2020 PostgreSQL Asia Conference: Wang Xu
Two dimensional code location and alarm system of Expressway
JVM class loading mechanism
随机推荐
频收罚单的浦发银行:增收不增利,曾遭骗贷数亿元,内控缺位?
20 XR projects roadshows, nearly 20 capital institutions attended! We sincerely invite you to attend the 2020 qcomm XR eco Partner Conference
垃圾分类知识竞赛
confd
Logo design company, Nanjing
RECH8.0版本学习 days 12 rh134部分
JS string - string string object method
Talk about sharing before paying
Mobile pixel adaptation scheme
And how to solve the conflict between pop-up menu and pop-up menu
[graffiti Internet of things footprints] panoramic introduction of graffiti cloud platform
REM: the solution of PC and mobile
Windows 10 Bluetooth management page 'add Bluetooth or other devices' option click no response solution
Rech8.0 learning days 12 rh134
Blazor 準備好為企業服務了嗎?
Knowledge competition of garbage classification
失眠一个整晚上
课堂练习
【原創】ARM平臺記憶體和cache對xenomai實時性的影響
How does LeadTools detect, read and write barcodes