第十章 DOM
DOM
DOM（文档对象模型）：针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。
节点层次
节点：节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特短吧，数据，方法。
文档元素：文档元素是文档最外层的元素，文档中的其他所有元素都被包裹在文档元素中。在HTML中，文档元素始终是<html>元素。
HTML元素：元素节点。
特性： 特性节点。
文档类型：文档类型节点。
注释： 注释节点。
Node类型
JS中的所有类型节点都继承自Node类型，所有节点类型共享相同的基本属性和方法。
nodeName: 对于元素节点，nodeName中保存的都是元素的标签名，nodeValue的值始终为null.
nodeValue: 元素的值。
childNodes: 保存着一个nodeList对象。nodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。有length属性。
基于DOM结构动态执行查询的结果，DOM结构的变化能够自动反映在NodeList对象中。
parentNode：指向childnode的父节点。
previousSibling: 节点的前一个同胞节点。
nextSibling: 节点的下一个同胞节点。
操作节点
插入节点
appendChild(): 向childNodes列表末尾添加一个节点。
insertBefore(): 接受俩个参数：要插入的节点， 参照的节点。被插入的节点变成参照节点的前一个同胞节点。
删除节点
replaceChild(): 接受俩个参数： 要插入的节点， 要替换的节点。
removeChild(): 接受一个参数： 移除的节点。
cloneNode(): 复制一个调用这个方法的节点的一个副本。接受一个布尔值参数：表示是否执行深复制。true时，复制整个子节点树（只复制特性。子节点）。false时，只复制本身。
normalize(): 处理文档树种的文本节点。找到空文本阶段就按删除它。找到相邻的文本节点，将他们合并成为一个文本节点。
Document类型
document对象是HTMLDocumen（继承自Document）的一个实例.表示整个HTML页面。document对象是window对象的一个属性。
文档的子节点
documentElement： 始终指向HTML页面中的<HTML>元素。
文档信息：
document.title: 包含<title>元素中的文本。
URL: 包含页面完成的URL(地址栏中显示的URL)。
domain: 包含页面的域名
referrer: 保存着链接到当前页面的那个页面的URL。
var url = document.url; //取得 完整的URL var domain = document.domain; //取得域名 var referrer = document.refeffer; //取得来源页面的URL
Element类型
nodetype： 1;
nodeName: 元素的标签名;
nodeValue: null。
parentNode: 可能是document或Element;
element类型 提供对元素标签名，子节点及特性的访问。
html元素由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示。
操作特性的DOM方法有三个：
取得特性：getAttribute(), 特性的名称不区分大小写。
设置特性：setAttribute(), 接受2个参数： 要设置的特性名，值。如果特性已存在，会已指定的值替换现有的值。即可以操作HTML特性，也可以操作自定义特性。
移除特性：removeAttribute();
Text类型
nodetype： 3;
nodeName: #text;
nodeValue: 节点所包含的文本。
parentNode: 是一个Element;
不支持子节点。
length属性： 保存字符串的数目。
文本方法：
normalize: 合并文本节点，如果在一个包含2个或多个文本节点的父元素上调用，将所有文本节点成一个节点。
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello World!"); element.appendChild(textNode); var anotherNode = document.createTextNode("Yippee!"); element.appendChild(anotherNode); document.body.appendChild(element); console.log(element.childNodes.length); // 2 element.normalize(); console.log(element.childNodes.length); // 1
splitText(): 分割文本节点，将一个文本节点分为俩个，按照指定位置分割。 nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点包含剩下的文本。这个方法会返回一个新文本节点。
var newNode = element.firstChild.splitText(5); console.log(element.firstChild.nodeValue); console.log(newNode); // Hello // " World!Yippee!"
