【ECMAScript】DOM节点类型知识点的梳理和总结
1. 前言
? ? ? ? 本篇梳理和总结一下DOM相关知识点。
2. Node类型
| 属性和方法 | 说明 |
| Node.ELEMENT_NODE - 1 Node.ATTRIBUTE_NODE - 2 Node.TEXT_NODE - 3 Node.CDATA_SECTION_NODE - 4 Node.ENTITY_REFERENCE_NODE - 5 Node.ENTITY_NODE - 6 Node.PROCESSING_INSTRUCTION_NODE-7 Node.COMMENT_NODE - 8 Node.DOCUMENT_NODE - 9 Node.DOCUMENT_TYPE_NODE - 10 Node.DOCUMENT_FRAMENT_NODE - 11 Node.NOTATION_NODE - 12 | 节点类型 |
| Node.prototype.nodeName Node.prototype.nodeValue | |
| Node.prototype.childNodes | NodeList的实例，NodeList.prototype.item(index) |
| Node.prototype.parentNode | 指向父节点 |
| Node.prototype.previousSibling | 前一个兄弟节点 |
| Node.prototype.nextSibling | 后一个兄弟节点 |
| Node.prototype.firstChild | 第一个子节点 |
| Node.prototype.lastChild | 最后一个子节点 |
| Node.prototype.hasChildNodes(node) | 功能：是否存在子节点 输入：Node 输出：boolean |
| Node.prototype.ownerDocument | 指向文档节点 |
| Node.prototype.appendChild(newNode) | 功能：在childNodes列表末尾添加新节点newNode，返回新添加节点newNode的引用 输入：Node 输出：Node |
| Node.prototype.insertBefore(newNode,refNode) | 功能：插入到childNodes中的指定位置，即在参考节点refNode前插入新节点newNode，返回新添加节点newNode的引用 输入：Node, Node 输出：Node |
| Node.prototype.replaceChild(newNode, refNode) | 功能：替换childNodes中指定节点，即用newNode去替换参考节点refNode，返回refNode引用 输入：Node, Node 输出：Node |
| Node.prototype.removeChild(node) | 功能：移除childNodes中指定节点，返回被移除的节点引用 输入：Node 输出：Node |
| Node.prototype.cloneNode(deep?) | 功能：复制节点，传true表示深度复制，复制整个子树，否则仅复制节点本身，返回新节点 输入：boolean? 输出：Node |
| Node.prototype.normalize() | 功能：搜索节点的所有后代节点，删除空文本节点，合并同胞文本节点 规范化文本节点 |
3. Document类型
| 属性和方法 | 说明 |
| 节点相关 | |
| document.nodeType等于9 document.nodeName等于‘#document’ document.nodeValue等于null document.parentNode等于null document.ownerDocument等于null | document是HTMLDocument实例化对象 HTMLDocument -> Document->Node |
| HTMLDocument.prototype.documentElement 等同于document.childNodes[0] 或document.firstChild | 快捷引用<html> Document节点的子节点可以是 Node.ELEMENT_NODE - 1 Node.PROCESSING_INSTRUCTION_NODE-7 Node.COMMENT_NODE - 8 Node.DOCUMENT_TYPE_NODE - 10 |
| HTMLDocument.prototype.doctype | 快捷引用<!DOCTYPE html> |
| HTMLDocument.prototype.body | 快捷引用body节点 |
| HTMLDocument.prototype.head | 快捷引用head节点 |
| HTMLDocument.prototype.title | 快捷引用title节点 |
| 文档地址相关 | |
| HTMLDocument.prototype.URL | 取完整URL，和location.href相似 |
| HTMLDocument.prototype.domain（可设置） | 取域名，和locaiton.hostname |
| HTMLDocument.prototype.referrer | 取来源 |
| 定位元素 | |
| HTMLDocument.prototype.getElementById(id) | 功能：通过标签的ID获取元素 输入：string 输出：Node |
| HTMLDocument.prototype .getElementsByTagName(tag) | 功能：通过标签名获取元素 输入：string（标签名字符串） 输出：HTMLCollection（和NodeList很像） |
| HTMLDocument.prototype.anchors | 功能：获取文档所有带name属性的<a>元素，值为HTMLCollection类型 |
| HTMLDocument.prototype.forms | 功能：获取文档中所有<form>元素，值为HTMLCollection类型 |
| HTMLDocument.prototype.images | 功能：获取文档中所有<img>元素，值为HTMLCollection类型 |
| HTMLDocument.prototype.links | 功能：获取文档中所有带href属性的<a>元素，值为HTMLCollection类型 |
| 文档写入 | |
| HTMLDocument.prototype.write() | 功能：向网页输出流写入内容 |
| HTMLDocument.prototype.writeln() | 功能：向网页输出流写入内容，带换行符 |
| HTMLDocument.prototype.open() | 功能：打开网页输出流 |
| HTMLDocument.prototype.close() | 功能：关闭网页输出流 |
| document.createElement(str) | 功能：创建元素 输入：string - 标签字符串 输出：Element |
| document.createTextNode(str) | 功能：创建文本节点 输入：string - 文本 输出：Text |
| document.createComent(str) | 功能：创建注释节点 输入：string - 注释文本 输出：Comment |
| document.createCDATASection(str) | 功能：创建CDATA区块节点 |
| document.createDocumentFragment() | 功能：创建文档片段 输入：无 输出：DocumentFragment |
| document.createAttribute(str) | 功能：创建属性节点 输入：string - 属性名 输入：Attr |
4. Element类型
| 属性和方法 | 说明 |
| nodeType等于1 nodeName值为元素的标签名 （同tagName返回大写标签名） nodeValue值为null parentNode值为Document或Element对象 | HTMLxxxElement -> HTMLElement -> Element -> Node Element类型节点的子节点可以是Element、Text、Coment、ProcessingInstruction、CDATASection、EntityReference等类型节点 |
| id | 元素在文档中惟一标识 |
| className | 一组或一类元素 |
| title | 元素的提示信息 |
| lang | 元素内容的语言 |
| dir | 语言的方向 |
| 属性的获取和设置 差异： ? ? ? ? ? ? ? ?????????DOM对象? ? ? ? ? ? ? ? ? ? ? ? ? getAttribute 针对类? ? ? ? ? ? ‘className’? ? ? ? ? ? ? ? ? ? ??‘class’ 针对style????????CSSStyleDeclaration????????string 针对事件属性? Function? ? ? ? ? ? ? ? ? ? ? ? ? ?源代码 总结：DOM编程中，直接取对象属性，用getAttribute取自定义属性 | |
| Element.prototype.getAttribute(attr) | 功能：获取属性的值 输入：string 输出：any |
| Element.prototype.setAttribute(attr, value) | 功能：新增或更新属性的值 输入：string, any |
| Element.prototype.removeAttribute(attr) | 功能：移除属性 输入：string |
| Element.prototype.getAttributeNode | 功能：获取属性节点 |
| Element.prototype.setAttributeNode | 功能：设置属性节点 |
| Element.prototype.attributes | 功能：返回NamedNodeMap类型数据（属性节点集合，类似NodeList） NamedNodeMap.prototype.getNamedItem(name) NamedNodeMap.prototype.removeNamedItem(name) NamedNodeMap.prototype.setNamedItem(node) NamedNodeMap.prototype.item(pos)? |
?5. Text类型
| 属性和方法 | 说明 |
| nodeType等于3 nodeName值为‘#text’ nodeValue值为文本 parentNode值为Element对象 只能为叶节点，不支持子节点 | Text -> CharacterData->Node |
| CharacterData.prototype.data | 功能：节点的值 |
| CharacterData.prototype .appendData(text) | 功能：向节点末尾添加文本text |
| CharacterData.prototype .deleteData(offset, count) | 功能：从位置offset开始删除count个字符 |
| CharacterData.prototype .insertData(offset, text) | 功能：在位置offset插件text |
| CharacterData.prototype .replaceData(offset, count, text) | 功能：用text替换从位置offset到offset+count的文本 |
| CharacterData.prototype .substringData(offset, count) | 功能：提取从位置offset到offset+count的文本 |
| Text.prototype.splitText(offset) | 功能：在位置offset将当前文本节点拆分为两个文本节点（与Node.prototyype.normalize相反），返回后面的节点 输入：number 输出：Text |
6. Comment类型
| 属性和方法 | 说明 |
| nodeType等于8 nodeName值为'#comment' noadeValue值为注释的内容 parentNode值为Document或Element对象 不支持子节点 | Coment -> CharacterData -> Node |
| 拥有CharacterData原型对象prototype上的所有方法和属性，操作起来和Text类型的节点类似 | |
7. CDATASection类型（XML文档中有效）
| 属性和方法 | 说明 |
| nodeType等于4 nodeName值为‘#cdata-section’ nodeValue值为CDATA区块的内容 parentNode值为Document或Element对象 不支持子节点 | <![CDATA[This is some content.]]> |
8. DocumentType类型
| 属性和方法 | 说明 |
| nodeType等于10 nodeName值为文档类型的名称 nodeValue值为null parentNode值为Document对象 不支持子节点 | document.doctype.nodeName 得到'html' document.doctype.name 得到'html' document.doctype.entities document.doctype.notations |
9. DocumentFragment
| 属性和方法 | 说明 |
| nodeType等于11 nodeName值为'#document-fragment' nodeValue值为null parentNode值为null | DocumentFragment -> Node 子节点可以是Element 、ProcessingInstruction 、 Comment 、Text 、CDATASection或EntityReference 可以联想到<></>和<Fragment></Fragment> |
10. Attr类型
| 性和方法 | 说明 |
| nodeType等于2 nodeName值为属性名 nodeValue值为属性值 parentNode值为null HTML中不支持子节点 XML中支持Text或EntityReference | Attr -> Node 尽管属性节点也是节点，但不认为是DOM树一部分。 属性一般通过Element原型对象方法getAttribute、setAttribute、removeAttribute操作或DOM对象直接操作，而不通过 NamedNodeMap原型对象方法getNamedItem、removeNamedItem、setNamedItem、item操作 |
| Attr.prototype.name | 与nodeName一样 |
| Attr.prototype.value | 与nodeValue一样 |
| Attr.prototype.specified | 布尔值，表示属性是使用默认值还是指定的值 |
备注：NodeList-节点集合、HTMLCollection-元素节点集合、NamedNodeMap - 属性节点集合
注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！