js DOM模型操作
2009-12-28 00:00
405 查看
DOM模型中的节点:元素节点、文本节点、属性节点
例:<a href=”http://www.cnblogs.com/shuz”>私のdotnet小屋</a>
(1)a是元素节点
(2)“私のdotnet小屋”是文本节点
(3)href=”http://www.cnblogs.com/shuz”是属性节点
DOM节点的属性
属性
类型
说明
nodeName
String
节点名称,根据节点的类型而定义
nodeValue
String
节点的值,根据节点的类型而定义
nodeType
Number
节点类型,1为元素节点,2为属性节点,3为文本节点
firstChild
Node
指向childNodes列表的第一个节点
lastChild
Node
指向childNodes列表的最后一个节点
childNodes
NodeList
所有子节点列表,childNodes可以访问第i+1个节点[i]
parentNode
Node
指向节点的父节点,如果已是根节点,则返回null
previousSibling
Node
指向前一个兄弟节点,如果已是第一个节点,则返回null
nextSibling
Node
指向后一个兄弟节点,如果已是最后一个节点,返回null
Attributes
NameNodeMap
包含一个元素特性的Attr对象,仅用于元素节点
className
String
节点的CSS类
innerHTML
String
某个标记之间的所有内容,包括代码本身
DOM节点的方法
(1)访问节点:
【通过标签名】
document.getElementsByTagName(sTagName)方法:返回一个包含某个相同标签名的元素节点列表
【通过标签ID】
document.getElementById(sElementId)方法:返回Id为指定值的元素节点
【访问前一个节点】兼容IE和FireFox
(自定义)
【访问后一个节点】兼容IE和FireFox
(自定义)
(2)判断一个节点是否有子节点:
NodeObject.hasChildNodes()方法:当childNodes包含一个或多个节点时,返回true
(3)设置节点属性:
eleNode.getAttribute(attrNode)方法:返回eleNode元素的attrNode属性
eleNode.setAttribute(attrNode,sNewValue)方法:设置eleNode元素的attrNode属性的值为sNewValue
(4)创建节点:
document.createElement(eleNode)方法:创建一个元素节点eleNode
document.createTextNode(textNode)方法:创建一个文本节点textNode
document.createDocumentFragment()方法:创建文档碎片节点
(5)添加节点:
eleNode.appendChild(textNode)方法:将textNode节点添加到childNodes的末尾
(6)删除节点:
oNode.parentNode.removeChild(oNode)方法:从childNodes中删除oNode节点
(7)替换节点:
oNode.parentNode.replaceChild(oNewNode,oOldNode)方法:将childNodes中的oOldNode节点替换成oNewNode节点
(8)在特定节点前插入节点:
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode)方法:在childNodes中的oTargetNode节点之前插入oNewNode节点
(9)在特定节点后插入节点:
(自定义)oTargetNode.parentNode.insertAfter(oNewNode,oTargetNode)方法:在childNodes中的oTargetNode节点之后插入oNewNode节点
例:<a href=”http://www.cnblogs.com/shuz”>私のdotnet小屋</a>
(1)a是元素节点
(2)“私のdotnet小屋”是文本节点
(3)href=”http://www.cnblogs.com/shuz”是属性节点
DOM节点的属性
属性
类型
说明
nodeName
String
节点名称,根据节点的类型而定义
nodeValue
String
节点的值,根据节点的类型而定义
nodeType
Number
节点类型,1为元素节点,2为属性节点,3为文本节点
firstChild
Node
指向childNodes列表的第一个节点
lastChild
Node
指向childNodes列表的最后一个节点
childNodes
NodeList
所有子节点列表,childNodes可以访问第i+1个节点[i]
parentNode
Node
指向节点的父节点,如果已是根节点,则返回null
previousSibling
Node
指向前一个兄弟节点,如果已是第一个节点,则返回null
nextSibling
Node
指向后一个兄弟节点,如果已是最后一个节点,返回null
Attributes
NameNodeMap
包含一个元素特性的Attr对象,仅用于元素节点
className
String
节点的CSS类
innerHTML
String
某个标记之间的所有内容,包括代码本身
DOM节点的方法
(1)访问节点:
【通过标签名】
document.getElementsByTagName(sTagName)方法:返回一个包含某个相同标签名的元素节点列表
【通过标签ID】
document.getElementById(sElementId)方法:返回Id为指定值的元素节点
【访问前一个节点】兼容IE和FireFox
(自定义)
function prevSib(oNode){ var oTempFirstNode=oNode.parentNode.firstChild; //判断是否是第一个节点,如果是则返回null if(oNode==oTempFirstNode) return null; var oTempNode=oNode.previousSibling; //逐一搜索前面的兄弟节点,直到发现元素节点为止 while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null) oTempNode=oTempNode.previousSibling; //三目运算符,如果是元素节点则返回节点本身,否则返回null return (oTempNode.nodeType==1)?:oTempNode:null; }
【访问后一个节点】兼容IE和FireFox
(自定义)
function nextSib(oNode){ var oTempLastNode=oNode.parentNode.lastChild; //判断是否是最后一个节点,如果是则返回null if(oNode==oTempLastNode) return null; var oTempNode=oNode.nextSibling; //逐一搜索后面的兄弟节点,直到发现元素节点为止 while(oTempNode.nodeType!=1 && oTempNode.nextSibling!=null) oTempNode=oTempNode.nextSibling; //三目运算符,如果是元素节点则返回节点本身,否则返回null return(oTempNode.nodeType==1)?oTempNode:null; }
(2)判断一个节点是否有子节点:
NodeObject.hasChildNodes()方法:当childNodes包含一个或多个节点时,返回true
(3)设置节点属性:
eleNode.getAttribute(attrNode)方法:返回eleNode元素的attrNode属性
eleNode.setAttribute(attrNode,sNewValue)方法:设置eleNode元素的attrNode属性的值为sNewValue
(4)创建节点:
document.createElement(eleNode)方法:创建一个元素节点eleNode
document.createTextNode(textNode)方法:创建一个文本节点textNode
document.createDocumentFragment()方法:创建文档碎片节点
(5)添加节点:
eleNode.appendChild(textNode)方法:将textNode节点添加到childNodes的末尾
(6)删除节点:
oNode.parentNode.removeChild(oNode)方法:从childNodes中删除oNode节点
(7)替换节点:
oNode.parentNode.replaceChild(oNewNode,oOldNode)方法:将childNodes中的oOldNode节点替换成oNewNode节点
(8)在特定节点前插入节点:
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode)方法:在childNodes中的oTargetNode节点之前插入oNewNode节点
(9)在特定节点后插入节点:
(自定义)oTargetNode.parentNode.insertAfter(oNewNode,oTargetNode)方法:在childNodes中的oTargetNode节点之后插入oNewNode节点
function insertAfter(oNewNode,oTargetNode){ var oParentNode=oTargetNode.parentNode; if(oParentNode.lastChild==oTargetNode) oParentNode.appendChild(oNewNode); else oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling); }
相关文章推荐
- js DOM模型操作
- 03-创建模型操作---用户添加
- 发布网站页面的对象模型操作
- SharePoint【ECMAScript对象模型系列】-- 08. 组与用户操作(一)
- 加载倾斜摄影模型操作手册
- MOSS 2010:Visual Studio 2010开发体验(24)——如何在浏览器中直接对BCS模型直接进行编辑和新增操作
- ThinkPHP关联模型操作实例分析
- iOS开发·必会的算法操作:字符串数组排序+模型对象数组排序
- 模型的操作
- EntiryFramework中事务操作(三)事务回滚数据模型和数据库不对应问题
- AJ学IOS 之微博项目实战(9)微博模型之时间相关重要操作,判断刚刚,昨天,今年等等
- thinkphp5 模型多次save操作,会产生重复的主键ID
- SharePoint 使用对象模型操作页面上的Web Part
- 【数据库关系模型之关系代数】关系代数的基本操作
- SharePoint服务器端对象模型 之 使用LINQ进行数据访问操作(Part 4)
- PowerDesigner15.1创建模型及生成带注释sql操作手册
- spring多对多模型的实现与操作
- Laravel中使用模型对数据进行操作
- ThinkPHP关联模型操作
- CodeIgniter框架模型(model),视图(view)和控制器(controller)中的文件操作