JavaScript HTML DOM元素 节点操作汇总
前言
在文档对象模型(DOM)中,每个节点都是一个对象。DOM节点有三个重要的属性:
1.nodeName:节点的名称
2.nodeValue:节点的值
3.nodeType:节点的类型
节点类型:元素1,属性2,文本3,注释8,文档9。
一、添加和删除节点(HTML元素)
1、创建节点
1)创建该元素(元素节点);
2)向一个已存在的元素追加该元素。
语法:appendChild(newnode)
eg:
这是一个段落 这是另一个段落
document.createElement("标签名");//创建元素节点
document.createTextNode("文本");//创建文本节点
appendChild();//方法向节点添加最后一个子节点。也可以使用appendChild()方法从一个元素向另一个元素中移动元素。用法:a.appendChild(b),把b添加到a内。
2.添加节点
appendChild();//在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法,eg:同上。
insertBefore();//insertBefore()方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
eg:
JavaScript HTML varotest=document.getElementById("test"); varnewli=document.createElement("li"); newli.innerHTML="php"; //otest.insertBefore(newli,otest.lastChild); otest.insertBefore(newli,otest.childNodes[1]);
3.删除节点
removeChild()//removeChild()方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回NULL。
语法:nodeObject.removeChild(node)
eg:
这是一个段落。 这是另一个段落。
DOM需要清楚需要删除的元素,以及它的父元素。先找到希望删除的子元素,然后使用其parentNode属性来找到父元素。
4.替换节点
replaceChild//把一个给定父元素里面的一个子节点替换为另一个子节点。
语法:referencre=element.replaceChild(newChild,oldChild);//newChild:必需,用于替换oldChild的对象。oldChild:必需,被newChild替换的对象。
eg:
JavaScript是一个很常用的技术,为网页添加动态效果。 将加粗改为斜体 functionreplaceMessage(){ varb=document.getElementById("oldnode"); varnewNode=document.createElement("i"); newNode.innerHTML=b.innerHTML; b.parentNode.replaceChild(newNode,b); }
注意:当oldnew被替换时,所有与之相关的属性内容都将被移除。newChild必须先被建立。
5.访问子节点
childNodes//访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
语法:elementNode.childNodes//可用childNodes[i]数组的形式表示第几个子元素
eg:
javascriptjavascript
jQueryPHP
varint=document.getElementsByTagName("div")[0].childNodes; for(vari=0;i "); } document.write("子节点个数:"+int.length+"
");
6.访问子节点的第一和最后项
firstChild//返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点,则该属性返回NULL。
语法:node.firstChild//与elementNode.childNodes[0]是同样的效果。
lastChild//返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点,则该属性返回NULL。
语法:node.lastChild//与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
eg:
javascript
jQueryPHP