JavaScript——DOM或以树形展示的Web页面

Web网页的一般能够通过document以及document所相关的各种元素组成。当然我们也能够通过层次结构的树形结构在展现Web页面。假设要对一个网页进行改动的话，我们能够通过document对象。Node对象以及Element对象进行相关的操作。

【Document对象】是全部页面元素的全部者或是父节点，绝大多数用来创建新元素实例的工厂方法都是核心document对象的方法。

DOM1——定义了DOM的基础设施，包含模式和API

DOM2——增强了对CSS的支持，改进了对document元素的訪问方法

DOM3——除了对之前版本号的扩展和改进之外，该版本号还增强了支持Web服务的模块，增强了对XML的支持。

这里主要讲述DOM HTML API：

DOM HTML API具有非常好的自描写叙述性。它有专门的对象名称。旨在引入扩浏览器存在的很多BOM实现，方便往后兼容。HTML API不仅从主要的HTMl元素中继承了属
性和方法，还会从核心的Node对象中继承。

绝大多数的HTML对象也是从HTMLElement中继承的。基于同意的元素属性{id,title,lang,dir,className}；每一个HTML对象的名
字都是从HTML正式元素的名称中获取的。比如：HTMLFormElement是HTML中表单元素的接口对象，通过该对象能够訪问该元素中全部的有效元素。

API对象没有构造函数，不能独立于其它对象单独创建。要创建这些接口对象，须要使用一个工厂方法。这个工厂负责生产所需的对象。比如：为了在某个表格的最后
加入一行，我们须要通过工厂方法insertRow来加入一个表格行。var row=table.insertRow(-1)<!--当中table是一个表格对象>；为了为这个新建的表格行加入两个单元格，
能够使用工厂方法insertCell。var cell1=row.insertCell(0);vavr cell2=row.insertCell(1);同一时候能够通过removeCell和removeRow方法来删除表格单元格和表格行。

有些DOM HTML接口并不直接表示特定的HTML元素，而是表示对象的集合。对象的集合能够通过其父元素訪问，如document或form元素，它是用HTMLCollection接
口表示的。HTMLCollection接口仅仅有一个名为length的属性以及两个方法(一)item。參数位数字型的索引值(二)nameItem。參数是字符串。比如。使用DOM訪问图像。使
用item方法var img=document.images.item(0);使用namedItem方法var img=document.images.namedItem("original");

【Node对象】在W3C关于DOM规范中。将文档描写叙述成一个节点的集合。而且以层次结构的树形结构相连接。

能够使用不同的技术訪问网页内容树的节点(一)查询特定类型的全部标签(二)遍历整个树以探索每一个层级上的每一个节点。DOM树种元素之间存在：父子节点。兄弟节点的关系。

这里主要理解DOM Core API：

对于文档树中的每一个节点。都拥有DOM的Node对象中定义的全部基本属性集和基本方法集。

Node对象的属性记录着与DOM树内容相关的信息。包含兄弟节点元素。
子节点元素，父节点元素。

有一些属性用来记录节点的相关信息。包含类型，名字以及值。

Node对象的属性主要包含：nodeName nodeValue nodeType parentNode
childNodes firstChild lastChild等。

节点nodeType属性是数字型的。能够使用DOM规定的一组常量来替代数字訪问每种类型的节点。

比如：ELEMENT_NODE值为1；ATTRIBUTE_NODE值为2；
TEXT_NODE值为3；COMMENT_NODE值为8等等。

可是IE对这样的长亮不支持。这时候能够对Node对象进行扩展或穿件全局的自己定义对象。把这些值保存到一个数组的
属性中。

document对象是与web页面文档之间的核心接口。我们能够使document.getElementById();document.getElementsByTagName();document.getElementsByClass();

来创建新对象。

【Element对象】Element属性并不总是能够通过对象属性訪问的。假设想要使用这种Element属性时，而它不是作为对象类提供的属性。那么我们就能够使用Element方法。我们能够使用这个方案获取，设置和检查属性值是否存在：getAttribute(name)      setAttribute(name,value)       removeAttribute(name);             getAttributeNode(name)

setAttributeNode(name,value)        removeAttributeNode(name);       hasAttribute(name)

实际上document对象能够或多或少的处理上下文中的全部东西，只是有时候你可能须要处理嵌套在其它元素中的元素，这时候可能就须要Node和Element对象。

比如：有两个包括段落元素的div块：第一个div块包括两个段落，第二个块包括一个段落。

<div id="div1">

<p>one</p>

<p>two</p>

</div>

<div id="div2">

<p>three</p>

</div>

怎样才干仅仅获得第一个div块中的段落元素呢？

var div=document.getElementById("div1");

var ps=div.getElementByTagName("p");    //当中的ps就是第一个div块中的两个段落ps[0]和ps[1]

【改动文档树】

web网页能够以层次结构的树形结构呈现，那我们能够通过改动文档树来达到我们所须要的网页。当中document对象的方法来创建新元素实例的工厂方法；Node对象提供了层次树形结构的文档树支持；Element元素提供了一种訪问其上下文内元素的方法。以对嵌套在该元素内的元素进行改动。

document对象的工厂方法：createElement(tagname)——创建特定类型的元素

createDocumentFragment——DocumentFragment是个轻量级的document对象。用于获取文档树中一部分。假设想在DOM树中加入大
量的节点，先使用createDocumentFrgment方法创建一个documentFragment。接着为其加入节点，然后将documentFragment加入到文档树中。

createTextNode(data)——保存页面中的文本

当创建了一个新节点之后。能够使用Node方法将其加入到现有文档树中:

insertBefore(newChild,refChild)——在refChild指定的现有节点前插入新节点

replaceChild(newChild,oldChild)——替换现有节点

removeChild(oldChild)——删除现有子节点

appendChild(newChild)——为文档加入新的子节点

注意：必须在正确的上下文中调用这些方法。

也就是要在包括要替换或删除的节点的元素上运行以上操作。