码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-07-24 20:56:24      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:javascript   api   node   document   element   

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

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

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

标签:javascript   api   node   document   element   

原文地址:http://blog.csdn.net/jsdchenye/article/details/47043913

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!