DOM是文档对象模型的简称，DOM的基本思想是把结构化文档解析成一系列的节点,由这些节点组成数装的DOM树，所有的这些节点和最终的树状结构都有统一的对外接口，达到使用编程语言操作文档的目的，DOM可以理解为XML文档、SVG文档、HTML文档的编程接口API。DOM不属于javascript但是可以通过javascript操作DOM。
节点的概念：
DOM的最小组成单位叫节点(node)，一个文档的树形结构(DOM树)，就是由各种不同的类型的节点组成。
对于HTML文档，节点主要有一下六种类型：
Document节点：文档节点，指整个文档(window.document)。
DocumentType:文档类型节点，指文档的类型，比如<!DOCTYPE html>
Element:元素节点，HTML元素，比如<body>、<p>。
Attribute：属性节点，HTML元素的属性，比如：class = “right”。
Text:文本节点，HTML文档中出现的文本。
DocumentFragment:文档碎片节点，文档的片段。
Node接口在javascript中是作为Node类型来实现的，除了IE所有浏览器都可以访问到这个类型，javascript中所有的节点类型都是继承自node类型，因此所有的节点类型都共享这相同的基本属性和方法。
节点的属性：
//nodeType属性:返回节点的常数值类型 nodeName odeType DOCUMENT_NODE #document 9 ELEMENT_NODE 大写的HTML元素名 1 ATTRIBUTE_NODE 等同于Attr.name 2 TEXT_NODE #text 3 DOCUMENT_FRAGMENT_NODE #document-fragment 11 DOCUMENT_TYPE_NODE 等同于DocumentType.name 10返回当前节点的相关节点//ownerDocument //返回当前节点所在的钉刺文档对象，即document对象 var doc = nod.ownerDoctype; doc === document //true nextSibling //返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null，注意，该属性包括文本节点，节点后有空格，返回文本节点，内容为空格。 previoussibling //返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。同样，前面有空格，返回一个内容为空的文本节点。 parentNode //返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：element节点、document节点和documentfragment节点。 parentElement //返回当前节点的父Element节点。如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null。下列属性返回当前内容 textContent //属性返回当前节点和它的所有后代节点的文本内容。 <div id="divA">This is <span>some</span> text</div> document.getElementById("divA").textContent // This is some text //该属性可读写，可自动对HTML标签转义。 document.getElementById(‘foo‘).textContent = ‘<p>GoodBye!</p>‘ //自动解释为文本<p>而不会当作标签处理，对于Text节点和Comment节点，该属性的值与nodeValue属性相同 nodeValue //返回或设置当前节点的值，格式为字符串。但是，该属性只对Text节点、Comment节点、XML文档的CDATA节点有效，其他类型的节点一律返回null。//返回当前节点的子节点 childNodes //返回一个NodeList集合，成员包括当前节点的所有子节点。除了HTML元素节点，该属性返回的还包括Text节点和Comment节点。如果当前节点不包括任何子节点，则返回一个空的NodeList集合。由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。 var ulElementChildNodes = document.querySelector(‘ul‘).childNodes; firstNode //返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。注意，除了HTML元素子节点，该属性还包括文本节点和评论节点。 lastChild //返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。baseURI //返回一个字符串，由当前网页的协议、域名和所在的目录组成，表示当前网页的绝对路径。如果无法取到这个值，则返回null。该属性不仅document对象有（document.baseURI），元素节点也有（element.baseURI）。通常情况下，它们的值是相同的。
Node节点的方法
appendChild() //接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。如果参数节点是文档中现有的其他节点，appendChild方法会将其从原来的位置，移动到新位置。 var p = document.createElement("p"); document.body.appendChild(p); hasChildNodes //方法返回一个布尔值，表示当前节点是否有子节点。//方法与节点操作有关 cloneNode() //cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。 insertBefore //方法用于将某个节点插入当前节点的指定位置。它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。该方法返回被插入的新节点。如果insertBefore方法的第二个参数为null，则新节点将插在当前节点的最后位置，即变成最后一个子节点。 removeChild //接受一个子节点作为参数，用于从当前节点移除该节点。它返回被移除的节点。 replaceChild //用于将一个新的节点，替换当前节点的某一个子节点。它接受两个参数，第一个参数是用来替换的新节点，第二个参数将要被替换走的子节点。它返回被替换走的那个节点。
下面方法用于节点的互相比较。 contains //接受一个节点作为参数，返回一个布尔值，表示参数节点是否为当前节点的后代节点。 compareDocumentPosition //与contains方法完全一致，返回一个7个比特位的二进制值，表示参数节点与当前节点的关系。 二进制值 数值 含义 000000 0 两个节点相同 000001 1 两个节点不在同一个文档（即有一个节点不在当前文档） 000010 2 参数节点在当前节点的前面 000100 4 参数节点在当前节点的后面 001000 8 参数节点包含当前节点 010000 16 当前节点包含参数节点 100000 32 浏览器的私有用途 可以使用比特位运算符检查结果 isEqualNode //返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。 normailize //用于清理当前节点内部的所有Text节点。它会去除空的文本节点，并且将毗邻的文本节点合并成一个。
时间： 2024-10-12 08:13:32