首頁 > 開發者 > JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>DOM常用屬性和方法</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY id="bb"> <table id="tab" border=1><thead id="Thead"><tr><th onClick="sortTable('tab',0,'int')" style="cursor:pointer">ID</th><th onClick="sortTable('tab',1)" style="cursor:pointer">姓名</th><th onClick="sortTable('tab',2,'int')" style="cursor:pointer">年齡</th><th onClick="sortTable('tab',3,'date')" style="cursor:pointer">出生日期</th></tr></thead><tbody id="Tbody"><tr id="tr1"><td width=100 id="ID">1</td><td id="name" width="100">張三</td><td id="age" width="100">25</td><td id="date" width="100">1970-9-9</td></tr><tr id="tr2"><td width=100 id="ID">3</td><td id="name" width="100">李四</td><td id="age" width="100">18</td><td id="date" width="100">1980-9-9</td></tr><tr id="tr3"><td width=100 id="ID">2</td><td id="name" width="100">王五</td><td id="age" width="100">19</td><td id="date" width="100">1990-9-9</td></tr><tr id="tr4"><td width=100 id="ID">6</td><td id="name" width="100">續寫</td><td id="age" width="100">22</td><td id="date" width="100">1965-9-9</td></tr><tr id="trr" name="rr"><td width=100 id="ID1">5</td><td id="name" width="100">經典</td><td id="age" width="100">30</td><td id="date" width="100">1950-9-9</td></tr></tbody></table><div id="textDiv">測試</div><div id="txt"></div><div id="removeDiv">removeDiv</div><div id="txtDiv">aaa</div><form name="form1"></form><form name="form2"></form><a href="#" name="a1">超連結一</a><a href="#" name="a2">超連結二</a> </BODY> <script type="text/javascript" > //返回指定id的元素節點function $(id){return id ? document.getElementById(id) : id ;} /* */var oHtml = document.documentElement; //得到<html>元素 alert("節點名稱："+oHtml.nodeName);alert("節點類型："+oHtml.nodeType);//擷取<head> 元素的幾種方法，效果一樣var oHead = document.head;oHead = oHtml.firstChild;oHead = oHtml.childNodes.item(0);oHead = oHtml.childNodes[0];oHead = oHtml.children.item(0);oHead = oHtml.children[0]; //擷取 <body>元素的幾種方法，效果一樣var oBody = document.body;oBody = oHtml.lastChild;oBody = oHtml.childNodes.item(1);oBody = oHtml.childNodes[1];oBody = oHtml.children.item(1);oBody = oHtml.children[1];alert(oHead.parentNode == oHtml); //head節點的父節點是html節點，返回 true alert(oBody.parentNode == oHtml); //body節點的父節點是html節點，返回 true alert(oBody.previousSibling == oHead); //body節點的上一個兄弟節點是head節點 ，返回 true alert(oHead.nextSibling == oBody);//head節點的下一個兄弟節點是body節點，返回 true alert(oHead.ownerDocument == document); //判斷head節點的根項目是否指向Document，返回 true alert(oBody.ownerDocument == document); //判斷body節點的根項目是否指向Document，返回 true var tdArray = document.getElementsByTagName("td"); //得到一個td標籤的集合for(var i=0;i<tdArray.length;i++){ //遍曆集合，輸出所有標籤的內容alert(tdArray[i].innerHTML); } var node = $("textDiv"); alert(node.innerHTML);//建立一個div元素節點var div = document.createElement("div");alert(div.nodeType); //建立一個文本節點var text = document.createTextNode("建立的文本節點");alert(text.nodeType);var txtNode = $("txt");txtNode.appendChild(text); //將建立的文本節點添加到指定的元素內alert(txtNode.innerHTML); //輸出文本節點的內容//為元素設定屬性值//div.id = "myID"; div.setAttribute("id","myID"); //效果同上，為建立的div設定id屬性alert("div的屬性id的值是："+div.getAttribute("id")); //擷取div的屬性id的值，如果屬性不存在，返回null//設定div中的內容div.innerHTML = "<p>續寫經典</p>";//將建立的div加入到body中var body = document.getElementsByTagName("body")[0];body.appendChild(div);//通過id尋找元素div = $("myID");alert(div.innerHTML); //訪問id為“myID”的元素的內容 //獲得表格的集合var arr = new Array();arr = document.getElementById("tab").rows; //獲得id為“tab”的表格的集合alert("表格的行數為："+arr.length);//刪除表格中指定的一行資料document.getElementById("tab").deleteRow(arr.length-1); var han = {//擷取子節點的集合（ie，ff通用）getChildNodes:function(node){var arr = [];var nodes = node.childNodes;for(var i in nodes){if(nodes[i].nodeType == 1){ //尋找元素節點arr.push(nodes[i]);}}return arr;},//擷取第一個元素子節點（ie，ff通用）getFirstElementChild : function(node){return node.firstElementChild ? node.firstElementChild : node.firstChild ;},//擷取最後一個元素子節點（ie，ff通用）getLastElementChild : function(node){return node.lastElementChild ? node.lastElementChild : node.lastChild ;},//擷取上一個相鄰節點（ie，ff通用）getPreviousSibling : function(node){//找到上一個節點就返回節點，沒找到就返回nulldo{node = node.previousSibling;}while(node && node.nodeType!=1)return node;},//擷取下一個相鄰節點 （ie，ff通用）getNextSibling : function(node){//找到下一個節點就返回節點，沒找到就返回nulldo{node = node.nextSibling;}while(node && node.nodeType!=1)return node;},//將元素插入到指定的node節點後面insertAfter : function(newNode,targetNode){if(newNode && targetNode){var parent = targetNode.parentNode;var nextNode = this.getNextSibling(targetNode);if(nextNode && parent){parent.insertBefore(newNode,nextNode);}else{parent.appendChild(newNode);}}}};//建立一個div元素節點var newDiv = document.createElement("div");newDiv.innerHTML = "一二三四";var div1 = $("textDiv");//將元素插入到指定節點後面han.insertAfter(newDiv,div1); //建立一個div元素節點var newDiv2 = document.createElement("div");newDiv2.innerHTML = "五六七八";var div2 = $("textDiv");//將元素插入到指定節點前面div2.parentNode.insertBefore(newDiv2,div2);//擷取子節點的個數（ie，ff通用）var a2 = han.getChildNodes(Tbody);alert("body子節點長度："+a2.length);//擷取首個子節點的內容 （ie，ff通用）var firstNode = han.getFirstElementChild(tab).innerHTML;alert("tab的首個子節點內容是："+firstNode);//擷取最後一個子節點的內容 （ie，ff通用）var lastNode = han.getLastElementChild(tab).innerHTML;alert("tab的最後一個子節點內容是："+lastNode);alert("tab的父節點名字是："+tab.parentNode.nodeName); //擷取父節點名字alert("tab的父節點類型是："+tab.parentNode.nodeType); //擷取父節點類型alert("tab的父節點值是："+tab.parentNode.nodeValue); //擷取父節點值var node = document.getElementById("Tbody");var myNextSibling;if(han.getNextSibling(node)){myNextSibling = han.getNextSibling(node);alert("Tbody的下一個相鄰的節點名字是："+myNextSibling.nodeName);}else{alert("已經是最後一個節點");}var node1 = document.getElementById("Thead");var myPreviousSibling;if(han.getPreviousSibling(node1)){myPreviousSibling = han.getPreviousSibling(node1);alert("Thead的上一個相鄰的節點名字是："+myPreviousSibling.nodeName);}else{alert("已經是第一個節點");} //複製函數,參數為true時：複製並包括所有子物件；參數為false時：複製但不包括所有子物件var cloneNode = textDiv.cloneNode(true);txtDiv.appendChild(cloneNode);//檢測是否包含有網頁元素( HTML Elements )或 TextNodes 對象。返回boolean類型的值alert(tr3.hasChildNodes());//刪除一個子節點，所有子物件將被一起刪除var remove = bb.removeChild(removeDiv);//替換一個子物件，被替換時，所有與之相關的屬性內容都將被移除var newDIV = document.createElement("div");newDIV.innerHTML = "一生經典";//var replace = bb.replaceChild(newDIV,$("textDiv")); //方法一var replace = $("textDiv").replaceNode(newDIV); //方法二，兩種效果一樣//forms:當前文檔中的所有表單集合alert("<form>表單的個數："+document.forms.length); //擷取集合的長度for(var i=0;i<document.forms.length;i++){//遍曆集合,輸出每一個元素alert(document.forms[i].name);}//links:當前文檔中所有超連結元素的集合alert("<a>元素的個數："+document.links.length); //擷取集合的長度for(var i=0;i<document.links.length;i++){ //遍曆集合，輸出每一個元素alert(document.links[i]);} </script></HTML>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
