文档对象模型Dom

  为使我们能够通过编程的方式控制网页,W3C提出了文档对象模型(Document Object Mode-DOM,浏览器通过文档对象模型DOM使Javascript程序可以访问网页上的任何元素,而DOM是网页上XHTML中文档正文的标题、段落、列表、样式、IDclass以及所有其它出现的数据的一个内部表示。

  DOM的主要思想是HTML上每个元素对应于DOM中的一个节点。DOM定义了许多种节点类型来表示节点的多个方面如:

1.文档节点Document——最顶层的节点或者说是根节点,它代表整个HTML文档,所有的其它节点都是附属它的。每个Web文档都是一个文档节点。

2.文档类型节点DocumentType——DTD引用的对象表现形式它不包含子节点。

3.元素节点Element——表示起始标记和结束标记之间的内容,它是唯一可以同时包含属性和子节点的节点类型。

4.文本节点Text——代表HTML文档元素的起始标记和结束标记之间,或者CData Section内容包含的普通文本。这个节点类型不能包含子节点。

5.属性节点Attr——代表元素节点开始标记内指定的属性。这个节点不包含任何子节点

6.注释节点Comment--代表注释,这个节点不包含任何子节点。

在DOM树中,每个节点可以有零个到多个子节点,而每个子节点只能有一个父节点。

属性/方法

类型/返回类型

说明

nodeName

String

节点的名字;根据节点的类型定义

nodeValue

String

节点的值;根据节点的类型定义

nodeType

Number

节点的类型常量值之一

ownerDocument

Document

指向这个节点所属的文档

firstChild

Node

指向在childNodes列表中的第一个节点

lastChild

Node

指向在childNodes列表中的最后一个节点

childNodes

NodeList

所有子节点列表

previousSibling

Node

指向前一个兄弟节点,若该节点就是第一个兄弟节点,则该值为null

 nextSibling

Node

指向后一个兄弟节点,若该节点就是最后一个兄弟节点,则该值为null

hasChildNodes()

Boolean

当childNodes包含一个或多个节点时,返回真

attributes

NameNodeMap

包含了代表一个元素的特性的Attr对象,仅用于Element节点

appendChild(node)

Node

将node添加到childNodes的末尾

 removeChild(node)

Node

从childNodes中删除node

replaceChild(newnode,oldnode)

Node

将childNodes中的oldnode替换成newnode

insertBefore(newnode,refnode)

Node

在childNodes中的refnode之前插入newnode

 

访问指定节点的方法有:

1.getElementsByTagName()——用来返回一个包含所有的tagName(标记名)特性等于某个指定值得元素的NodeList

2.getElementsByName()——用来获取所有name值等于指定值得元素。

3.getElementById()——它将返回id特性等于指定值得元素。

 

 创建和操作节点:

1.createAttributename)——用给定的名称name创建特性节点。

2.createCommenttext)——创建包含文本text的注释节点。

3.createElement_xtagname)——创建标记名为tagname的元素。

4.createTextNodetext)——创建包含文本text的文本节点。

5.createDocumentFragment()--创建文档碎片节点。

 

createElement()——用指定的标记名创建新的Element节点。 

createTextNode()——用指定的文本创建新的TextNode节点。 

appendChild()——通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点。

removeChild()——从文档树中删除并返回指定的子节点。 

replaceChild()——从文档树中删除并返回指定的子节点,用另一个节点替换它。 

insertBefore()——给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。

createDocumentFragment()——创建一个文档碎片,把所有的新节点附加其上,然后一次性的把文档碎片的内容添加到document中。

cloneNode()——复制当前节点,或者复制当前节点以及它的所有子孙节点。

 

 

操作文本节点:

1.appendData(string):将字符串添加在文本节点的文本尾部.

2.deleteData(offset,count):删除文本节点中从指定位置开始的指定数量的字符.

3.insertData(offset,string):将指定字符串插入到文本节点指定的位置中.

4.replaceData(offset,count,string):用给定的字符串替换文本节点指定位置指定数量的文本数据.

5.splitText(offset):将指定位置的文本节点分成两个部分,将右边的部分返回为一个新的文本节点,将左边的部分留在原始位置.

6.substringData(offset,count):从文本节点的文本数据中返回指定位置指定数目的字符串.

table方法

<table/>元素添加内容:

 caption——指向<caption/>元素

 tBodies——<tbody/>元素的集合

 tFoot——指向<tfoot/>元素

 tHead——指向<thead/>元素

 rows——表格中所有行的集合

 createTHead()——创建<thead/>元素并将其放入表格

 createTFoot()——创建<tfoot/>元素并将其放入表格

 createCaption()——创建<caption/>元素并将其放入表格

 deleteTHead()——删除<thead/>元素

 deleteTFoot()——删除<tfoot/>元素

 deleteCaption()——删除<caption/>元素

 deleteRow(position)——删除指定位置上的行

 insertRow(position)——在rows集合中的指定位置上插入一个新行

<tbody/>元素添加内容:

rows——<tbody/>中所有行的集合

deleteRow(position)——删除指定位置上的行

insertRow(position)——在rows集合中的指定位置上插入一个新行

<tr/>元素添加内容:

cells——<tr/>元素中所有的单元格的集合

deleteCell(position)——删除指定位置上的单元格

insertCell(position)——在cells集合中的指定位置上插入一个新的单元格

 

posted on 2014-09-13 21:21  森森赵  阅读(138)  评论(0编辑  收藏  举报

导航