JS回归基础之DOM 

1. 节点层次

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法。

1.1 Node类型

DOM1 级 定义了一个 Node 接口，该接口将由 DOM 中的所有节点类型实现。
每个节点都有一个 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)

1.1.1 nodeName 和 nodeValue 属性

1.1.2 节点关系

childNodes：获取子节点，保存着一个 NodeList 对象，是一个类数组对象。
对 arguments 对象使用 Array.prototype.slice()方法可以将其转换为数组。而采用同样的方法，也可以将 NodeList 对象转换为数组：

//在 IE8 及之前版本中无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

parentNode：获取父节点
previousSibling：获取上一个节点
nextSibling：获取下一个节点
ownerDocument: 整个文档的文档节点
hasChildNodes(): 方法，包含子节点返回ture

1.1.3 操作节点

appendChild()
insertBefore()
replaceChild()
removeChild()
cloneNode()：复制节点
normalize()

1.2 Document类型

Document 节点具有下列特征：

nodeType 的值为 9；
nodeName 的值为"#document"；
nodeValue 的值为 null；
parentNode 的值为 null；
ownerDocument 的值为 null；
其子节点可能是一个 DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或 Comment。

1.2.1 文档的子节点

document.documentElement：取得对<html>的引用
document.body：取得对<body>的引用
document.doctype：取得对<!DOCTYPE>的引用

1.2.2 文档信息

document.title: 文档标题
document.URL：取得完整的 URL
document.domain：取得域名
document.referrer：取得来源页面的 URL

1.2.3 查找元素

getElementById()
getElementsByTagName()
getElementsByName()

1.2.4 特殊集合

document.anchors：包含文档中所有带 name 特性的<a>元素；
document.applets：包含文档中所有的<applet>元素
document.forms：包含文档中所有的<form>元素
document.images：包含文档中所有的<img>元素
document.links：包含文档中所有带 href 特性的<a>元素

1.2.5 文档写入

write()
writeln()
open()
close()

1.3 Element类型

Element 节点具有以下特征：

nodeType 的值为 1
nodeName 的值为元素的标签名
nodeValue 的值为 null
parentNode 可能是 Document 或 Element
其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或
EntityReference

1.3.1 HTML 元素

每个 HTML元素中都存在的下列标准特性:

id: 元素在文档中的唯一标识符
title: 有关元素的附加说明信息，鼠标放上去显示。
lang：元素内容的语言代码，很少使用。
dir：语言的方向
className：与元素的class 特性对应，即为元素指定的CSS类。

1.3.2 取得特性

getAttribute()

div.id
div.getAttribute("id")

根据H5规范，自定义特性应该加上data- 前缀以便验证，由于style和onclick特性，只有在取得自定义特性时，才会使用getAttribute()方法。

1.3.3 设置特性

setAttribute(“mycolor”, “red”)
removeAttribute(“mycolor”)

1.3.4 attributes 属性

attributes 属性中包含一个NamedNodeMap，与 NodeList 类似，也是一个“动态”的集合。

1.3.5 创建元素

 document.createElement("div")

1.3.6 元素的子节点

1.4 Text类型

Text 节点具有以下特征：

nodeType 的值为 3；
nodeName 的值为"#text"；
nodeValue 的值为节点所包含的文本；
parentNode 是一个 Element；
不支持（没有）子节点。

1.4.1 创建创建文本节点

document.createTextNode()

扫描二维码关注公众号，回复： 12637059 查看本文章

1.4.2 规范化文本节点

normalize()方法

1.4.3 分割文本节点

splitText()

1.5 Comment类型

Comment 节点具有下列特征：

nodeType 的值为 8；
nodeName 的值为"#comment"；
nodeValue 的值是注释的内容；
parentNode 可能是 Document 或 Element；
不支持（没有）子节点。

document.createComment()创建注释节点

1.6 CDATASection类型

CDATASection 类型只针对基于 XML 的文档，表示的是 CDATA 区域。
nodeType 的值为 4；

1.7 DocumentType类型

包含着与文档的 doctype 有关的所有信息，nodeType 的值为 10；

1.8 DocumentFragment类型

nodeType 的值为 11；

1.9 Attr类型

元素的特性在 DOM 中以 Attr 类型来表示，nodeType 的值为 2；

2. DOM扩展

对 DOM 的两个主要的扩展是 Selectors API（选择符 API）和 HTML5。

2.1 选择符 API

querySelector()
querySelectorAll()
matchesSelector()

2.2 元素遍历

childElementCount：返回子元素（不包括文本节点和注释）的个数；
firstElementChild：指向第一个子元素；firstChild 的元素版；
lastElementChild：指向最后一个子元素；lastChild 的元素版；
previousElementSibling：指向前一个同辈元素；previousSibling 的元素版；
nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。
解决了空白文本节点的问题。

2.3 HTML5

2.3.1 与类相关的扩充

getElementsByClassName()
classList 属性
 add(value)：将给定的字符串值添加到列表中;
 contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false;
 remove(value)：从列表中删除给定的字符串;
 toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

//删除"disabled"类
div.classList.remove("disabled"); 
//添加"current"类
div.classList.add("current"); 
//切换"user"类
div.classList.toggle("user"); 
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
    
     
 //执行操作
)

2.3.2 焦点管理

document.activeElement 属性：获取DOM 中当前获得了焦点的元素。
**document.hasFocus()**方法：确定文档是否获得了焦点

2.3.3 HTMLDocument的变化

readyState 属性
 loading：正在加载文档；
 complete：已经加载完文档。
兼容模式
compatMode: 渲染模式,

if (document.compatMode == "CSS1Compat"){
    
     
 alert("Standards mode"); //标准模式
} else {
    
     
 alert("Quirks mode");  //混杂模式
}

head 属性
document.head：引用文档的<head>元素

2.3.4 字符集属性

document.charset

2.3.5 自定义数据属性

HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。

2.3.6 插入标记

innerHTML 属性
outerHTML 属性
insertAdjacentHTML()方法

2.3.7 scrollIntoView()方法

方便开发人员更好地控制页面滚动。

2.4 专有扩展

目前没有成为的 DOM 扩展的标准，成为专有扩展。将来可能会成为标准。说白了就是备胎的意思。

2.4.1 children属性

和childNodes类似，区别是children只获取元素子节点

2.4.2 contains()方法

用来判断某个节点是不是另一个节点的后代

alert(document.documentElement.contains(document.body)); //true

2.4.3 插入文本

innerText 属性
outerText 属性

2.4.5 插入文本

HTML5 在将scrollIntoView()纳入规范之后，仍然还有其他几个专有方法可以在不同的浏览器中使用。

scrollIntoViewIfNeeded(alignCenter)
scrollByLines(lineCount)
scrollByPages(pageCount)

document.defaultView.getComputedStyle(myDiv, null);document.defaultView.getComputedStyle(myDiv, null);

3. DOM2和DOM3

获取元素计算后属性

document.defaultView.getComputedStyle(myDiv, null);