当前位置:网站首页>DOM node operation
DOM node operation
2020-11-07 17:19:00 【Irving the procedural ape】
DOM Node operation
1. Node Overview
The three basic properties of a node :
- Node type nodeType
- The name of the node nodeName
- Node values nodeValue
- Element nodes nodeType by 1( The main operation in actual development )
- Attribute node nodeType by 2
- Text node nodeType by 3( The text node contains text 、 Space 、 Line break, etc )
2. Node level
utilize DOM Trees can divide nodes into different hierarchical relationships , Common is Father son brother hierarchy .
2.1 Parent node
node.parentNode
- parentNode Property can return the nearest parent of a node
- If the specified node has no parent , Then return to nill
2.2 Child node
1.parentNode.childNodes // standard
parentNode.childNode Returns a collection of children of a specified node , The set is an instant update set .
notes :
- The return value contains all nodes , Include element nodes 、 Text nodes, etc
- If you just want to get the element nodes inside , It needs to be dealt with specially . So it is not recommended to use childNodes
// Just want to get the processing of the element node inside var eg = document.querySelector('ol');for(var i = 0;i < ol.childNodes.length;i++) { if (ol.childNodes[i].nodeType == 1) { // So you can pick out the element nodes ...... }}
2.parentNode.children // Nonstandard
parentNode.children Is a read-only property , Returns all child element nodes . It only returns child element nodes . Although it's nonstandard , But it's supported by various browsers , So it can be used safely .
3.parentNode.firstChild
parentNode.firstChild Return to the first child node , No return found null. The return value contains all nodes , Include element nodes 、 Text nodes, etc .
4.parentNode.lastChild
parentNode.lastChild Returns the last node , No return found null. The return value contains all nodes , Include element nodes 、 Text nodes, etc .
5.parentNode.firstElementChild
parentNode.firstElementChild Returns the first child node , No return found null.
6.parentNode.lastElementChild
parentNode.lastElementChild Returns the last child element node , No return found null.
notes :5、6 Methods have compatibility issues ,ie9 The above supports .
because firstChild and lastChild Include other nodes , and firstElementChild and lastElementChild There's a compatibility issue , therefore The solution to get the first or last child element node is :
- If you want the first child element node , have access to parentNode.children[0]
- If you want the last child element node , have access to parentNode.children[parentNode.children.length-1]
2.3 Brother node
1.node.nextSibling
nextSibling Returns the next sibling node of the current element , No return found null. The return value contains all nodes , Include element nodes 、 Text nodes, etc .
2.node.previousSibling
previousSibling Returns a sibling node on the current element , No return found null. return .........
版权声明
本文为[Irving the procedural ape]所创,转载请带上原文链接,感谢
边栏推荐
- 如何创建交互式内核密度图表
- 失眠一个整晚上
- How to deploy Gantt chart quickly and correctly
- Shanghai Pudong Development Bank, which frequently receives penalty tickets, has been cheated by hundreds of millions of yuan in loans, and lacks of internal control?
- 微服務 - 如何進行服務限流和熔斷
- 使用RabbitMQ实现分布式事务
- idea 激活到 2089 失效
- Characteristics of magnetic memory chip STT-MRAM
- In 2020, how can wechat seal numbers be quickly lifted?
- 嘉宾介绍|2020 PostgreSQL亚洲大会中文分论坛:潘娟
猜你喜欢
如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
如何使用甘特图图层和筛选器
2020-11-06:go中,谈一下调度器。
20 XR projects roadshows, nearly 20 capital institutions attended! We sincerely invite you to attend the 2020 qcomm XR eco Partner Conference
win7如何快速打cmd并到达所要的目录
2018中国云厂商TOP5:阿里云、腾讯云、AWS、电信、联通 ...
Windows 10 Bluetooth management page 'add Bluetooth or other devices' option click no response solution
A kind of super parameter optimization technology hyperopt
Characteristics of magnetic memory chip STT-MRAM
Getting started with varhart xgantt
随机推荐
Python3 operating gitlab
Characteristics of magnetic memory chip STT-MRAM
About Devops seven misunderstandings, 99% of people have been hit!
k-vim安装及The ycmd server SHUT DOWN (restart with ':YcmRestartServer')这种错误的解决方法
Three steps to understand Kerberos Protocol easily
Mobile pixel adaptation scheme
Knowledge competition of garbage classification
The advantages and functions of psychological counseling app
2020-11-06:go中,谈一下调度器。
QT audio and video development 46 video transmission UDP version
抽絲剝繭——門面和調停者設計模式
Plug in bilibilibili new version 0.5.5
A kind of super parameter optimization technology hyperopt
嘉宾介绍|2020 PostgreSQL亚洲大会中文分论坛:潘娟
条形码识别性能低,如何优化Dynamsoft Barcode Reader解码性能
Using JSON webtoken (JWT) to generate token in nodejs
Win7 AppCrash (solution)
Insomnia all night
“非洲用户的付费意愿并不低”——专访四达时代研发总监张亮
20个XR项目路演,近20个资本机构出席!诚邀您参加2020 Qualcomm XR生态合作伙伴大会