首页 > 代码库 > 文档对象模型(DOM)

文档对象模型(DOM)

 

w3c提出了文档对象模型DOM(Document Object Mode)。浏览器通过DOM使Javascript可以访问页面上的元素,而DOM是网页上XHTML中正文标题、段落、列表、样式、ID、class以及所有其他出现的数据的一个内部表示。

一、理解DOM

DOM中定义了许多种节点类型:

1、文档节点Document

2、文档类型节点DocumentType

3、文档片段节点DocumentFragment

4、元素节点Element

5、文本节点Text

6、属性节点Attr

7、CDataSection节点

8、注释节点Comment

所有类型的节点有一些共同的属性和方法。

nodeName:节点名字;

nodeValue:节点的值;

nodeType:节点类型;

ownerDocument:指向这个节点所属的文档;

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

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

previousSibling:指向前一个兄弟节点

nextSibling:指向后一个兄弟节点

hasChildNodes():当ChildNodes包含一个或多个节点是,放回true;

attributes:包含了代表一个元素的特性的Attr对象

appendChild(node):将node添加到childNodes的结尾

removeChild(node):从childNodes中删除node

replaceChild(newnode,oldnode):将oldnode替换为newnode

insertBefore(newnode,refnode):在refnode之前插入newnode

二、使用DOM

1、访问相关节点

     Document.documentElement访问<htlm/>元素

     ChildNodes.length获取子节点数量

     Document.body指向<body/>元素

2、处理元素属性

getNamedItem(name)-返回nodeName属性值等于name的节点

removeNamedItem(name)-删除nodeName属性值等于name的节点

setNamedItem(node)-将node添加到列表中,按其nodeName属性进行索引

item(pos)-想NodeList一样,返回在pos的节点

DOM定义了三个元素方法来帮助访问特性:

getAttribute(name)

setAttribute(name,newvalue)

removeAttribute(name)

3、访问指定节点

1)getElementsByTagName()方法

2)getElementsByName()方法 

3)getElementById()方法

4、创建和操作节点

createAttribute(name)用给定名称name创建特性节点

createComment(text)创建包含文本text的注释节点

createDocumentFragment()创建文档碎片节点

createElement(tagname)创建标记名为tagname的元素

createTextNode(text)创建包含文本text的文本节点

1)createElement()、createTextNode()、appendChild()

2)removeChild()、replaceChild()、insertBefore()

3)createDocumentFragment()

4)cloneNode(true)把元素以及所有子节点一起复制

cloneNode(false)只复制元素

5、操作文本节点

AppendData(string)将字符串添加在文本节点尾部

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

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

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

splitText(offset)将指定位置的文本节点分为2个部分,将右边部分返回为一个新的文本节点,左边不变

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

三、table方法

<table/>元素添加了以下内容:

Caption-指向<caption/>元素

tBodies-<tbody/>元素集合

tFoot-指向<tfoot/>元素

tHead-指向<thead/>元素

rows-表格中所有行的集合

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

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

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

deletetTHead()-删除<thead/>元素

deletetTFoot()-删除<tfoot/>元素

deletetCaption()-删除<caption/>元素

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

insertRow(position)-在rows集合中指定位置插入新行

<tbody/>元素添加了以下内容:

Rows-<tbody/>中所有行的集合

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

insertRow(position)-在rows集合中指定位置插入新行

<tr/>元素中添加了以下内容:

Cells-<tr/>元素中所有单元格的集合

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

insertCell(position)-在cells集合中指定位置插入新单元格

 

文档对象模型(DOM)