文档对象模型Dom
为使我们能够通过编程的方式控制网页,W3C提出了文档对象模型(Document Object Mode-DOM),浏览器通过文档对象模型DOM使Javascript程序可以访问网页上的任何元素,而DOM是网页上XHTML中文档正文的标题、段落、列表、样式、ID、class以及所有其它出现的数据的一个内部表示。
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.createAttribute(name)——用给定的名称name创建特性节点。
2.createComment(text)——创建包含文本text的注释节点。
3.createElement_x(tagname)——创建标记名为tagname的元素。
4.createTextNode(text)——创建包含文本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集合中的指定位置上插入一个新的单元格