源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js DOM模型操作

  • 时间:2022-09-12 03:06 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js DOM模型操作
DOM模型中的节点:元素节点、文本节点、属性节点 例:<a href=”http://www.cnblogs.com/shuz”>私のdotnet小屋</a> (1)a是元素节点 (2)“私のdotnet小屋”是文本节点 (3)href=”http://www.cnblogs.com/shuz”是属性节点 DOM节点的属性
[b]属性[/b] [b]类型[/b] [b]说明[/b]
[b]nodeName[/b] String 节点名称,根据节点的类型而定义
[b]nodeValue[/b] String 节点的值,根据节点的类型而定义
[b]nodeType[/b] Number 节点类型,1为元素节点,2为属性节点,3为文本节点
[b]firstChild[/b] Node 指向childNodes列表的第一个节点
[b]lastChild[/b] Node 指向childNodes列表的最后一个节点
[b]childNodes[/b] NodeList 所有子节点列表,childNodes[i]可以访问第i+1个节点[i][/i]
[b]parentNode[/b] Node 指向节点的父节点,如果已是根节点,则返回null
[b]previousSibling[/b] Node 指向前一个兄弟节点,如果已是第一个节点,则返回null
[b]nextSibling[/b] Node 指向后一个兄弟节点,如果已是最后一个节点,返回null
[b]Attributes[/b] NameNodeMap 包含一个元素特性的Attr对象,仅用于元素节点
[b]className[/b] String 节点的CSS类
[b]innerHTML[/b] String 某个标记之间的所有内容,包括代码本身
[b]DOM节点的方法[/b] (1)访问节点: 【通过标签名】 document.getElementsByTagName(sTagName)方法:返回一个包含某个相同标签名的元素节点列表 【通过标签ID】 document.getElementById(sElementId)方法:返回Id为指定值的元素节点 【访问前一个节点】兼容IE和FireFox (自定义)
[u]复制代码[/u] 代码如下:
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 (自定义)
[u]复制代码[/u] 代码如下:
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节点
[u]复制代码[/u] 代码如下:
function insertAfter(oNewNode,oTargetNode){ var oParentNode=oTargetNode.parentNode; if(oParentNode.lastChild==oTargetNode) oParentNode.appendChild(oNewNode); else oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling); }
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部