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() | 功能:是否存在子节点 输入:无 输出:boolean |
| Node.prototype.contains(node) | 功能:当前节点后代中是否存在节点node 输入:Node 输出:boolean |
| Node.prototype .compareDocumentPosition(node) | 功能:检测当前节点与节点node之间的关系 输入:Node 输出:0x1 | 0x2 | 0x4| 0x8 | 0x10 |
| 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 |
| Document.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 |
| Document.prototype.doctype | 快捷引用<!DOCTYPE html> |
| Document.prototype.body | 快捷引用body节点 |
| Document.prototype.head | 快捷引用head节点 |
| Document.prototype.title | 快捷引用title节点 |
| 文档地址相关 ||
| Document.prototype.URL | 取完整URL,和location.href相似 |
| Document.prototype.domain(可设置) | 取域名,和locaiton.hostname |
| Document.prototype.referrer | 取来源 |
| 定位元素 ||
| Document.prototype.getElementById(id) | 功能:通过标签的ID获取元素 输入:string 输出:Node |
| Document.prototype .getElementsByTagName(tagName) | 功能:通过标签名获取元素 输入:string(标签名字符串) 输出:HTMLCollection(和NodeList很像) |
| Document.prototype .getElementsByClassName(className) | 功能:通过类名获取所有匹配的后代元素 输入:类名字符串(空格隔开可传多个类名) 输出:NodeList |
| Document.prototype .querySelector(selector) | 功能:匹配该选择器的第一个后代元素,没有匹配返回null 输入:selector字符串 输出:Element | null |
| Document.prototype .querySelectorAll(selector) | 功能:匹配该选择器的后代所有元素,返回NodeList 输入:selector字符串 输出:NodeList |
| Document.prototype.anchors | 功能:获取文档所有带name属性的<a>元素,值为HTMLCollection类型 |
| Document.prototype.forms | 功能:获取文档中所有<form>元素,值为HTMLCollection类型 |
| Document.prototype.images | 功能:获取文档中所有<img>元素,值为HTMLCollection类型 |
| Document.prototype.links | 功能:获取文档中所有带href属性的<a>元素,值为HTMLCollection类型 |
| 文档写入 ||
| Document.prototype.write() | 功能:向网页输出流写入内容 |
| Document.prototype.writeln() | 功能:向网页输出流写入内容,带换行符 |
| Document.prototype.open() | 功能:打开网页输出流 |
| Document.prototype.close() | 功能:关闭网页输出流 |
| Document.prototype .createElement(str) | 功能:创建元素 输入:string - 标签字符串 输出:Element |
| Document.prototype .createTextNode(str) | 功能:创建文本节点 输入:string - 文本 输出:Text |
| Document.prototype .createComent(str) | 功能:创建注释节点 输入:string - 注释文本 输出:Comment |
| Document.prototype .createCDATASection(str) | 功能:创建CDATA区块节点 |
| Document.prototype .createDocumentFragment() | 功能:创建文档片段 输入:无 输出:DocumentFragment |
| Document.prototype .createAttribute(str) | 功能:创建属性节点 输入:string - 属性名 输入:Attr |
| Document.prototype.activeElement | 功能:始终指向当前拥有焦点的DOM元素 |
| Document.prototype.hasFocus() | 功能:判断文档是否拥有焦点 输入:无 输出:boolean |
| Document.prototype.readyState | 功能:表示文档状态 loading | complete |
| Document.prototype.compatMode | 功能:返回渲染模式 标准模式的值'CSS1Compat' 混杂模式的值'BackCompat' |
| Document.prototype.characterSet | 功能:当前文档使用的字符集 |
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 | 语言的方向 |
| 元素遍历 ||
| Element.prototype.childElementCount | 功能:返回子元素数量(不含文本节点和注释节点) |
| Element.prototype.firstElementChild | 功能:指向第一个子元素 |
| Element.prototype.lastElementChild | 功能:指向最后一个子元素 |
| Element.prototype .previousElementSibling | 功能:指向前一个同胞元素 |
| Element.prototype .nextElementSibling | 功能:指向下一个同胞元素 |
| 检索元素 ||
| Element.prototype .getElementsByTagName(tag) | 功能:通过标签名获取元素 输入:string(标签名字符串) 输出:HTMLCollection(和NodeList很像) |
| Element.prototype .getElementsByClassName(className) | 功能:通过类名获取所有匹配的后代元素 输入:类名字符串(空格隔开可传多个类名) 输出:NodeList |
| Element.prototype .querySelector(selector) | 功能:匹配该选择器的第一个后代元素,没有匹配返回null 输入:selector字符串 输出:Element | null |
| Element.prototype .querySelectorAll(selector) | 功能:匹配该选择器的所有后代元素,返回NodeList 输入:selector字符串 输出:NodeList |
| Element.prototype.matches(selector) | 功能:判断后代元素是否存在匹配该选择器的元素 输入:selector字符串 输出:boolean |
| 属性的获取和设置 差异: DOM对象 getAttribute 针对类 'className' 'class' 针对style CSSStyleDeclarationstring 针对事件属性 Function 源代码 总结:DOM编程中,直接取对象属性,用getAttribute取自定义属性 ||
| Element.prototype.getAttribute(attr) | 功能:获取属性的值 输入:string 输出:any |
| Element.prototype.setAttribute(attr, value) | 功能:新增或更新属性的值 输入:string, any |
| Element.prototype.removeAttribute(attr) | 功能:移除属性 输入:string |
| Element.prototype.getAttributeNode(attr) | 功能:获取属性节点 输入:string 输出:Attr |
| Element.prototype.setAttributeNode(attr) | 功能:设置属性节点 输入:Attr |
| Element.prototype.attributes | 功能:返回NamedNodeMap类型数据(属性节点集合,类似NodeList) NamedNodeMap.prototype.getNamedItem(name) NamedNodeMap.prototype.removeNamedItem(name) NamedNodeMap.prototype.setNamedItem(node) NamedNodeMap.prototype.item(pos) |
| Element.prototype.classList | 功能:方便操作className属性 classList是DOMTokenList实例 DOMTokenList.prototype.add(value) 向类名列表添加指定新类名 DOMTokenList.prototype.contains(value) 判断指定类型是否存在 DOMTokenList.prototype.remove(value) 从类名列表删除指定类名 DOMTokenList.prototype.toggle(value) 类名列表中存在指定类名,则删除 不存在,则添加 |
| HTMLElement.prototype.dataset | 功能:方便操作自定义数据属性 div.dataset.appID = 1 <div data-appID='1'></div> dataset是DOMStringMap的实例 |
| Element.prototype.innerHTML | 功能:读取或写入HTML字符串,写入的HTML字符串值以新的DOM子树替换元素中原来包含的所有节点。 |
| Element.prototype.outerHTML | 功能:读取或写入HTML字符串,写入的HTML字符串值以新的DOM树替换包含当前节点本身及其他后代元素。 |
| Element.prototype.innerText | 功能:返回当前节点子代文本节点值的拼接结果 或 将当前节点内部替换成一个文本节点 |
| Element.prototype.outerText | 功能:返回当前节点本身及后代文本节点值的拼接结果 或 将当前节点本身替换成一个文本节点 |
| Element.prototype .insertAdjacentHTML(place, htmlStr) | 输入:beforebegin | afterbegin | beforeend | affterend, string |
| Element.prototype .insertAdjacentText(place, text) | 输入:beforebegin | afterbegin | beforeend | affterend, string |
| Element.prototype.scrollIntoView() | 功能:滚动浏览器窗口或容器元素以便包含元 素进入视口 输入:alignToTop? | scrollIntoViewOptions? |
| Element.prototype.children | 功能:返回Element类型的子元素集合 HTMLCollection |
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 - 属性节点集合
注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~