Javascript的各種節點操作實例示範程式碼_javascript技巧

代碼如下：

複製代碼 代碼如下: BR> BR> BR>

bbb aaa bbb ccc AAA BBB CCC //搞清楚這三種元素節點屬性節點文字節點 // 1:元素節點(對於元素節點，nodeName保存的總是元素的標籤名，而nodeValue的值始終是null) var element_node=document.getElementById('test'); / /alert(element_node.nodeType); // 1 //alert(element_node.nodeName); // input //alert(element_node.nodeValue); // null // 2:屬性節點 var attr_node=document.getElementById('test').getAttributeNode('name'); alert(attr_node.nodeType); // 2 alert(attr_node.nodeName); // name 屬性名稱 alert(attr_node.nodeValue); // nn 屬性值 // 3:文字節點 var all=document.getElementById('t').firstChild; //alert(all. nodeType); // 3 //alert(all.nodeName); // #text //alert(all.nodeValue); // bbb 文字內容 var tt1=document.getElementById(' t1'); //alert(tt1.firstChild.innerHTML); // aaa //alert(tt1.lastChild.innerHTML); // ccc var tt2=tt1.Nodes[1] .innerHTML; //alert(tt2);// bbb var tt3=tt1.parentNode.getAttribute('name'); //alert(tt3); // parent_test var tt4=tt1.childNodes[1]; //alert(tt4.nextSibling.innerHTML); // ccc //alert(tt4.previousSibling.innerHTML); //aaa // node方法的詳細介紹 var tt5=document.getElementById('test'); var tt6=document.getElementById('t') // hasChildNodes()方法：判定節點是否有子節點，有回傳true，沒有回傳false //alert(tt5.hasChildNodes()); // false //alert(tt6.hasChildNodes()); // true //removeChild()方法：移除一個節點 var first_node=document.getElementById('t1').firstChild; //document.getElementById('t1').removeChild(first_node); // 刪除第一個節點節點 // appendChild()方法：新增一個節點如果文件樹中已經存在該節點，則將它刪除，然後在新位置插入。 var first_node=document.getElementById('t1').firstChild; //document.getElementById('t1').appendChild(first_node); // 變成了最後一個節點 /// replaceChild()方法：從文件樹中刪除（並返回）指定的子節點，用另一個節點來替換它 //insertBefore()方法：在指定節點的前面插入一個節點，如果已經存在，則刪除原來的，然後在新位置插入。 var newd=document.createElement("span"); newd.innerHTML="eee"; //document.getElementById('t1').appendChild(newd); // 載入一個子節點 var oldd=document.getElementById('t1').lastChild; //document.getElementById('t1').replaceChild(newd,oldd); // 取代最後一個子節點 / /document.getElementById('t1').insertBefore(newd,oldd); // 在指定位置前面插入一個節點aaabbbeeeccc // cloneNode()方法：複製一個節點，該方法有一個參數，true表示同時複製所有的子節點，false表示近複製目前節點。 var what=document.getElementById('fuzhi').cloneNode(true).innerHTML; document.getElementById('m').innerHTML=what; body>

Javascript的各種節點操作實例示範程式碼_javascript技巧

相關文章