|
|
例：<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]可以访问第i+1个节点 |
parentNode | Node | 指向节点的父节点，如果已是根节点，则返回null |
previousSibling | Node | 指向前一个兄弟节点，如果已是第一个节点，则返回null |
nextSibling | Node | 指向后一个兄弟节点，如果已是最后一个节点，返回null |
Attributes | NameNodeMap | 包含一个元素特性的Attr对象，仅用于元素节点 |
className | String | 节点的CSS类 |
innerHTML | String | 某个标记之间的所有内容，包括代码本身 |
（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);
}
JavaScript技术：js DOM模型操作，转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
