DOM

Node类型

每个节点都有一个nodeType属性，表示该节点的类型。节点类型由定义在Node类型上12个数值常量表示：

  • 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_FRAGMENT_NODE(11)
  • Node.NOTATION_NODE(12)

对元素而言nodeName始终等于元素的标签名，nodeValue始终为null

节点关系

每个节点都有一个childNodes属性，其中包含一个NodeList类数组的实例。反映当前DOM的结构。

可以使用

Array.prototype.slice.call(someNode.childNodes,0)

转换为数组。

使用ES6的Array.from(someNode.childNodes)有同样的效果。

每个节点都有一个parentNode属性，指向其DOM树中的父元素。

而使用previousSibling和nextSibling可以在这个列表的同胞节点间导航。

firstChild和lastChild分别指向childNodes中的第一个和最后一个子节点。

操纵节点

appendChild()在列表末尾添加节点，如果把文档中已经存在的节点传给appendChild()，则这个节点会从之前的位置被转移到新位置。

在列表的特定位置插入节点，insertBefore()方法，方法接收两个参数：要插入的节点和参照节点。调用之后在参照节点之前插入节点。

replaceChild()，替换列表中的节点，被替换的节点会从文档树中完全移除。

cloneNode()会返回与调用它的节点一摸一样的节点，接收一个布尔值参数，表示是否深复制。深复制复制节点及其整个子DOM树。false则只会复制调用该方法的节点。复制返回的节点属于文档所有，但尚未指定父节点。

Document类型

在浏览器中document是HTMLDocument的实例，表示整个HTML页面。document是window对象的属性。

documentElement属性始终指向HTML页面中的<html>元素。

body属性直接指向<body>元素。

文档信息

title属性，包含<title>元素中的文本。修改title属性并不会改变<title>元素。

URL属性包含当前页面的完整URL（地址栏中的URL）。

domain包含页面的域名。

referrer包含链接到当前页面的那个页面的URL。

特殊集合

document.anchors包含文档中所有带name属性的<a>元素。

document.forms包含文档中所有<form>元素

document.images包含文档中所有<img>元素

document.links包含文档中所有带href属性的<a>元素

文档写入

document对象有向网页输出流中写入内容的能力。

对应四个方法：write()、writeln()、open()和close()。

write()和writeln()方法都接收一个字符串参数，可以将整个字符串写入网页中。

Write()简单地写入文本，而writeln()还会在字符串末尾追加一个换行符。

Element类型

表示XML或HTML元素，对外暴露出访问元素标签名、子节点和属性的能力。

可以通过nodeName或tagName属性来获取元素的标签名。

HTML元素
取得属性

每个元素都有零个或多个属性，通常用于为元素或其内容附加更多信息。

getAttribute()获取属性，传入的属性名与它们实际的属性名一样。

通过DOM对象访问的属性中有两个返回的值跟使用getAttribute()取得的值不一样。

首先是style属性，在使用getAttribute()访问style属性时，返回的是CSS字符串。而通过DOM对象的属性访问时，style属性返回的是一个（CSSStyleDeclaration）对象。

第二个属性其实是一类，即事件处理程序（或者事件属性），比如onclick。在元素上使用事件属性时，属性的值是一段JavaScript代码。如果使用getAttribute()访问事件属性，则返回的是字符串形式的源代码。而通过DOM对象的属性访问事件属性时返回的则是一个JavaScript函数。

设置属性

setAttribute()，接收两个参数，要设置的属性名和属性的值。

attributes属性

Element类型时唯一使用attributes属性的DOM节点类型。attributes属性包含一个NamedNodeMap实例，是一个类似NodeList的实时集合。元素的每个属性都表示为一个Attr节点，并保存在这个NamedNodeMap对象中。

创建元素

document.createElemnet()

Text类型

由Text类型表示，包含按字面解释的纯文本，也可能包含转义后的HTML字符，但不含HTML代码。

Text节点中包含的文本可以通过nodeValue属性访问，也可以通过data属性访问。

创建文本节点

Document.createTextNode()，可以用来创建新文本节点，它接收一个参数，即要插入节点的文本。跟设置已有文本节点的值一样，这些要插入的文本也会应用HTML或XML编码。

规范化文本节点

在包含两个或多个相邻文本节点的父节点上调用normalize()时，所有同胞文本节点会被合并为一个文本节点，

拆分文本节点

splitText()这个方法可以在指定的偏移位置拆分nodeValue，将一个文本节点拆分成两个文本节点。

Comment类型

其与Text类型继承同一个基类（CharacterData），因此拥有除splitText()之外Text节点所有的字符串操作方法。

可以使用document.createComment()方法创建注释节点。