js DOM模型操作

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]可以访问第i+1个节点 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); }

　　推荐阅读

　　javascript 显示当前系统时间代码

1.在<head></head>中加入下列代码复制代码代码如下: <script language=JavaScript> var timerID = null; var timerRunning = false; function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunn>>>详细阅读

本文标题：js DOM模型操作

地址：http://www.17bianji.com/kaifa2/JS/27354.html

1/2 1