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 parentNodechildNodes 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)——为文档添加新的子节点

注意：必须在正确的上下文中调用这些方法。也就是要在包含要替换或删除的节点的元素上执行以上操作。