18-JavaScript-DOM

DOM简介

节点：对象以树的形式保存界面上所有的内容，而HTML页面每一部分都是由节点组成。

DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型

DOM全称: Document Object Model, 即文档模型对象

• 定义了访问和操作 HTML文档(网页)的标准方法
• 学习DOM就是学习如何通过document对象操作网的内容

DOM包含：window、document

window window：是一个全局对象, 代表浏览器中一个打开的窗 口, 每个窗口都是一个window对象

document

• document是window的一个属性, 是属性也是对象
• document: 代表当前窗口中的整个网页
• document对象保存了网页上所有的内容
• 通过document对象就可以操作网页上的内容

获取DOM元素

document属性 / 方法完整表

属性 / 方法	描述
document.createElement()	创建元素节点。
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加句柄
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.anchors	返回对文档中所有 Anchor 对象的引用。
document.baseURI	返回文档的绝对基础 URI
document.body	返回文档的body元素
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
document.createTextNode()	创建文本节点。
document.doctype	返回与文档相关的文档类型声明 (DTD)。
document.documentElement	返回文档的根节点
document.documentMode	返回用于通过浏览器渲染文档的模式
document.documentURI	设置或返回文档的位置
document.domain	返回当前文档的域名。
document.forms	返回对文档中所有 Form 对象引用。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.images	返回对文档中所有 Image 对象引用。
document.implementation	返回处理该文档的 DOMImplementation 对象。
document.importNode()	把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding	返回用于文档的编码方式（在解析时）。
document.lastModified	返回文档被最后修改的日期和时间。
document.links	返回对文档中所有 Area 和 Link 对象引用。
document.normalize()	删除空文本节点，并连接相邻节点
document.normalizeDocument()	删除空文本节点，并连接相邻节点的
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.readyState	返回文档状态 (载入中……)
document.referrer	返回载入当前文档的文档的 URL。
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.strictErrorChecking	设置或返回是否强制进行错误检查。
document.title	返回当前文档的标题。
document.URL	返回文档完整的URL
document.write()	向文档写 HTML 表达式 或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

⚠️注意

getElementById、getElementsByName、getElementsByTagName的区别

• ID具有唯一性。getElementByIdByid返回对象；返回相同id对象中的一个，如果无符合条件的对象，则返回null
• 其余两个：返回数组对象；如果无符合条件的对象，则返回空数组

使用对象获取DOM元素

1. 通过id获取指定元素document.getElementsByClassName("father");
2. 通过class名称获取document.getElementsByClassName("father");
3. 通过name名称获取document.getElementsByName("test")
4. 通过标签名称获取document.getElementsByTagName("div");
5. 通过选择器获取**(重点掌握)**

• querySelector只会返回根据指定选择器找到的第一个元素
• querySelectorAll会返回指定选择器找到的所有元素

let oDivs = document.querySelectorAll(".father");

1. 获取指定元素所有的子元素

let oDiv = document.querySelector("div");
// children属性获取到的是指定元素中所有的子元素
console.log(oDiv.children);

// childNodes属性获取到的是指定元素中所有的节点
console.log(oDiv.childNodes);

可以利用指定元素的属性，使用属性获取指定元素的某一些节点

for(let node of oDiv.childNodes){
    if(node.nodeType === Node.ELEMENT_NODE){
        console.log(node);
    }
}

运用Node调用DOM元素

Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如, 继承同一组方法，或者用同样的方式测试。

从其父类型EventTarget继承属性，可通过Node的属性和方法对元素进行修改

属性	描述	读取
Node.childNodes	返回一个包含了该节点所有子节点的实时的NodeList。NodeList 是动态变化的。如果该节点的子节点发生了变化，NodeList对象就会自动更新。
Node.firstChild	返回该节点的第一个子节点Node，如果该节点没有子节点则返回null。
Node.lastChild	返回该节点的最后一个子节点Node，如果该节点没有子节点则返回null。
Node.nextSibling	返回与该节点同级的下一个节点 Node，如果没有返回null。
Node.parentNode	返回一个当前结点 Node的父节点 。如果没有这样的结点,，比如说像这个节点是树结构的顶端或者没有插入一棵树中， 这个属性返回null。
Node.parentElement	返回一个当前节点的父节点 Element 。 如果当前节点没有父节点或者说父节点不是一个元素(Element), 这个属性返回null。
Node.previousSibling	返回一个当前节点同辈的前一个结点( Node) ，或者返回null（如果不存在这样的一个节点的话）。
Node.nodeType	判断数据类型，返回数值
Node.baseURI	返回一个表示base URL的DOMString。不同语言中的base URL的概念都不一样。 在HTML中，base URL表示协议和域名，以及一直到最后一个'/'之前的文件目录。
Node.nodeName	返回一个包含该节点名字的DOMString。节点的名字的结构和节点类型不同。比如HTMLElement的名字跟它所关联的标签对应，就比如HTMLAudioElement的就是 'audio' ，Text节点对应的是 '#text' 还有Document节点对应的是 '#document'。
Node.isConnected	返回一个布尔值用来检测该节点是否已连接(直接或者间接)到一个上下文对象上，比如通常DOM情况下的Document对象，或者在shadow DOM情况下的ShadowRoot对象。
Node.nodeValue	返回或设置当前节点的值。	否
Node.ownerDocument	返回这个元素属于的 Document对象 。 如果没有Document对象与之关联，返回null。
Node.textContent	返回或设置一个元素内所有子结点及其后代的文本内容。	否

方法	描述
Node.appendChild()	将指定的 childNode 参数作为最后一个子节点添加到当前节点。 如果参数引用了 DOM 树上的现有节点，则节点将从当前位置分离，并附加到新位置。
Node.insertBefore()	在当前节点下增加一个子节点 Node，并使该子节点位于参考节点的前面。
Node.cloneNode()	克隆一个 Node，并且可以选择是否克隆这个节点下的所有内容。默认情况下，节点下的内容会被克隆。
Node.compareDocumentPosition()	比较当前节点与文档中的另一节点的位置。
Node.contains()	返回一个 Boolean 布尔值，来表示传入的节点是否为该节点的后代节点。
Node.getRootNode()	返回上下文对象的根结点。如果shadow root节点存在的话，也可以在返回的节点中包含它。
Node.hasChildNodes()	返回一个Boolean 布尔值，来表示该元素是否包含有子节点。
Node.isDefaultNamespace()	返回一个 Boolean 类型值。接受一个命名空间 URI 作为参数，当参数所指代的命名空间是默认命名空间时返回 true，否则返回 false。
Node.isEqualNode()	返回一个 Boolean 类型值。当两个 node 节点为相同类型的节点且定义的数据点匹配时（即属性和属性值相同，节点值相同）返回 true，否则返回 false。
Node.isSameNode()	返回一个 Boolean 类型值。返回这两个节点的引用比较结果。
Node.lookupPrefix()	返回包含参数 URI 所对应的命名空间前缀的 DOMString，若不存在则返回 null。如果存在多个可匹配的前缀，则返回结果和浏览器具体实现有关。
Node.lookupNamespaceURI()	接受一个前缀，并返回前缀所对应节点命名空间 URI 。如果 URI 不存在则返回 null。传入 null 作为 prefix 参数将返回默认命名空间。
Node.normalize()	对该元素下的所有文本子节点进行整理，合并相邻的文本节点并清除空文本节点。
Node.removeChild()	移除当前节点的一个子节点。这个子节点必须存在于当前节点中。
Node.replaceChild()	对选定的节点，替换一个子节点 Node 为另外一个节点。

Node.nodeType属性

注意区分的大小写

常量	返回值	描述
Node.ELEMENT_NODE	1	一个 元素 节点，例如<p> 和 <div>。
Node.TEXT_NODE	3	Element 或者 Attr 中实际的 文字
Node.CDATA_SECTION_NODE	4	一个 CDATASection，例如<!CDATA[[ … ]]>
Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的 ProcessingInstruction ，例如<?xml-stylesheet ... ?>声明。
Node.COMMENT_NODE	8	一个 Comment 节点。
Node.DOCUMENT_NODE	9	一个 Document 节点。
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的 DocumentType 节点。例如<!DOCTYPE html>就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE	11	一个 DocumentFragment 节点

其余2、5、6、12常量已被弃用，不要使用《MDN》