当前位置:网站首页>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
- Experiment one
- idea 激活到 2089 失效
- 使用LWA和Lync模拟外部测试无边缘单前端环境
- K-vim installation and the ycmd server shut down (restart with ': ycmrestartserver')
- Windows 10 Bluetooth management page 'add Bluetooth or other devices' option click no response solution
- jenkins pipline stage 设置超时
- Plug in bilibilibili new version 0.5.5
- 失眠一个整晚上
- Three steps to understand Kerberos Protocol easily
猜你喜欢
ImageMagick - 添加水印
About Devops seven misunderstandings, 99% of people have been hit!
The first choice for lightweight GPU applications is the NVIDIA vgpu instance launched by Jingdong Zhilian cloud
HMS core push service helps e-commerce app to carry out refined operation
python3操作Jenkins模块api
How to solve the problem of blank page in Google Chrome browser
Practice of Xiaoxiong school development board: real equipment access of smart street lamp sandbox experiment
[doodling the footprints of Internet of things] Introduction to Internet of things
The advantages and functions of psychological counseling app
Using rabbitmq to implement distributed transaction
随机推荐
gitlab 持续集成开发环境之CI/CD
南京标识标牌设计制作,导视VI系统设计
汽车维修app开发的好处与功能
Chinese sub forum of | 2020 PostgreSQL Asia Conference: Pan Juan
Logo design company, Nanjing
7. Swarm builds clusters
CI / CD of gitlab continuous integrated development environment
条形码识别性能低,如何优化Dynamsoft Barcode Reader解码性能
STlink下载出现st-link usb communication error解决方法
聊聊先享後付
Come on in! Take a few minutes to see how reentrantreadwritelock works!
VARCHART XGantt入门教程
Stm32f030c6t6 compatible to replace mm32spin05pf
课堂练习
Solution to st link USB communication error in stlink Download
抽絲剝繭——門面和調停者設計模式
如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
20 XR projects roadshows, nearly 20 capital institutions attended! We sincerely invite you to attend the 2020 qcomm XR eco Partner Conference
K-vim installation and the ycmd server shut down (restart with ': ycmrestartserver')
如何使用甘特图图层和筛选器