当前位置:网站首页>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
边栏推荐
- K-vim installation and the ycmd server shut down (restart with ': ycmrestartserver')
- [graffiti Internet of things footprints] panoramic introduction of graffiti cloud platform
- Mate 40系列发布 搭载华为运动健康服务带来健康数字生活
- 如何解决谷歌Chrome浏览器空白页的问题
- Rech8.0 learning days 12 rh134
- 滴滴的分布式ID生成器(Tinyid),好用的一批
- Using JSON webtoken (JWT) to generate token in nodejs
- In 2020, how can wechat seal numbers be quickly lifted?
- Experiment one
- 一种超参数优化技术-Hyperopt
猜你喜欢
Composition of MRAM cache
Benefits and functions of auto maintenance app development
Application of UHF RFID medical blood management system
三步轻松理解Kerberos协议
Two dimensional code location and alarm system of Expressway
confd
条形码识别器Dynamsoft Barcode Reader v7.5全新上线!
深入浅出大前端框架Angular6实战教程(Angular6、node.js、keystonejs、
Mate 40 series launch with Huawei sports health service to bring healthy digital life
Idea activation to 2089 failure
随机推荐
Experiment one
[doodling the footprints of Internet of things] Introduction to Internet of things
C# 枚举权限 |和||,&和&&的区别
jenkins pipline stage 设置超时
8. Swarm creates maintenance and horizontal extension service
Design pattern of facade and mediator
git 提交规范
甘特图对活动进行分组教程
嘉宾专访|2020 PostgreSQL亚洲大会阿里云数据库专场:王旭
idea 激活到 2089 失效
如何解决谷歌Chrome浏览器空白页的问题
关于DevOps的七大误解,99%的人都曾中过招!
How to deploy Gantt chart quickly and correctly
谈了多年的数字化转型,为什么还有很多企业依然“口头管理”
插件Bilibili新版0.5.5
REM: the solution of PC and mobile
嘉宾专访|2020 PostgreSQL亚洲大会中文分论坛:岳彩波
C語言重點——指標篇(一文讓你完全搞懂指標)| 從記憶體理解指標 | 指標完全解析
How to use Gantt chart layers and filters
STlink下载出现st-link usb communication error解决方法