Node总结
2024-09-05 19:42:58
一. 基本概念
1.1 DOM
DOM(Document Object Model), 把网页转换成JS对象，可以用脚本进行各种操作。浏览器将结构化文档（HTML/XML）解析成一系列的节点形成DOM tree。所有的节点和最终的树状结构都有API。
1.2 节点类型
- 文档节点（document）：9，对应常量
Node.DOCUMENT_NODE - 元素节点（element）：1，对应常量
Node.ELEMENT_NODE - 属性节点（attr）：2，对应常量
Node.ATTRIBUTE_NODE - 文本节点（text）：3，对应常量
Node.TEXT_NODE - 文档片断节点（DocumentFragment）：11，对应常量
Node.DOCUMENT_FRAGMENT_NODE - 文档类型节点（DocumentType）：10，对应常量
Node.DOCUMENT_TYPE_NODE - 注释节点（Comment）：8，对应常量
Node.COMMENT_NODE
二. Node接口
2.1 Node接口属性
- Node.nodeType 返回整数，表示当前节点
- Node.nodeName 如果是element会返回大写的标签名 eg: 'DIV'
- Node.nodeValue 只有文本节点和注释节点有这个值，其余都是null
- Node.textContent 返回当前节点和后代所有节点的文本内容，忽略HTML标签（innerText）
- Node.baseURI 返回当前网页的绝对路径
- Node.nextSibling 返回下一个同级节点
- Node.previousSibling 返回同级的前一个节点
- Node.parentNode 返回父节点（可能是element/document/doucumentfragment）
- Node.parentElement 返回父元素节点
- Node.firstChild / lastChild 返回的可能是文本节点或注释节点
- Node.childNodes /children 对于childNodes会返回所有的节点（包括注释，文本等） 而chilren只返回element
- 对与children[0]返回的一定是element 但是firstChild返回的可能是文本
2.2 Node接口方法
- Node.appendChild() 配合documen.createElement('tagName')
- Node.hasChildNodes() 返回bool
- Node.cloneNode(true/false) true clone子节点，但是会丢失所有的on-属性和eventHandler
- Node.insertBefore(newNode, referenceNode) 把newNode 插在Node内部referenceNode之前
- referenceNode 为null则插在Node最后
- 没有insertAfter，可以通过Node.insertBefore(newNode, referenceNode.nextSibling)
- Node.removeChild(childNode)
- Node.replaceChild(newNode, oldNode)
- Node.contains(node)
- Node.isEqualNode() 返回两个节点的类型、属性、子节点相同
- Node.isSameNode() 返回两个节点是否为同一个节点
三. NodeList 接口
通过Node.childNods document.querySelectorAll() document.getElementsByTagName()等方法获得
- NodeList.prototype.forEach() NodeList是类数组对象，但可以使用forEach
- 通过Array.prototype.slice.call()将其转化成array
- nodelist.forEach( function(item, index, list))
- NodeList.prototype.length
- NodeList.prototype.item(i) 返回第i
- NodeList.prototype.keys() NodeList.prototype.values() NodeList.prototype.entries()
- 可以用for (let key of nodelist.keys())
- for (let value of nodelist.values())
- for (let entry of nodelist.entries())
四. HTMLCollection接口
通过HTMLCollectionm没有forEach循环，只有element元素
- HTMLCollection.prototype.length
- HTMLCollection.prototype.item(i)
五. ParentNode接口
- ParentNode.childern 返回当前节点的元素子节点
- ParentNode.firstElementChild 返回第一个元素子节点
- ParentNode.lastElementChild 返回最后一个元素节点
- ParentNode.append() ParentNode.prepend() 像parent node中插入子节点
六. ChildNode接口
- childNode.remove() 移除某一个node
- childNode.before(node) childNode.after(node) 在某一个node前后插入node，共有一个parentNode
- childNode.replaceWith() 替换当前的节点
七. document对象
最新文章
- java环境搭建和写出一个Helloworld
- PhpStorm 相关激活方式
- POJ2195 最小费用流
- 常见的getchar 与EOF的问题
- 热更新脚本C#light,ulua,Scorpio性能比较
- 【HTML5 video】video标签的部分属性解析
- [Math] Hidden Markov Model
- 初学者对WAMP服务器的设置
- Android常用设计模式（一）
- 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
- [bootstrap] bootstrap 简介和相关网址
- CloudStack4.2 二级镜像存储测试
- [C#][ASP.net] 透过WebBrowser 取得AJAX 后的网页
- IPv4子网掩码回顾
- Nginx之（四）工作原理
- STM32F103驱动GT911
- flex布局实现elment容器布局
- jQuery（五）
- 【鬼畜】UVA - 401每日一题·猛男就是要暴力打表
- HttpDebug下载