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 nodeType
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节点。它会去除空的文本节点,并且将毗邻的文本节点合并成一个。