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集合中指定位置插入新单元格