萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> javascript中parentNode,childNodes,children的應用詳解

javascript中parentNode,childNodes,children的應用詳解

 本篇文章是對javascript中parentNode,childNodes,children的應用進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

"parentNode"   常用來獲取某個元素的父節點. 把 parentNodes 理解為容器, 在容器中有個子節點        例:  <div id="parent"> <b id="child">My text</b> </div>    在上面的代碼中, 你看到把"爹"作為一個 div 容器, 該容器中有個"孩子", 就是粗體的文字部分. 如果你打算用getElementById() 方法獲取粗體元素並且想知道它"爹"是誰, 返回的信息將是一個 div. 演示下面的腳本, 你就知道是怎麼回事啦 ...    引用:  代碼如下: <div id="parent"> <b id="child">My text</b> </div>   <script type="text/javascript"> <!--   alert(document.getElementById("child").parentNode.nodeName); //--> </script>     用 parentNode 不一定只找到一個"爹", "兒子"也可以成為"爹", 如下面的例子 ...    引用:  代碼如下: <div id="parent">          <div id="childparent">            <b id="child">My text</b>          </div> </div>    上面這段代碼中有兩個"爹"和兩個"孩子". 頭一個 div ( id "parent") 是第二個 div (childparent) 的"爹".            在 "childparent" 中有個粗體元素(id "child"), 是 "childparent" div 的"孩子". 那麼, 如何訪問到"爺爺" (id "parent")? 很簡單 ....    引用:   代碼如下: <div id="parent">           <div id="childparent">              <b id="child">My text</b>           </div> </div>   <script type="text/javascript"> <!--   alert(document.getElementById("child").parentNode.parentNode.nodeName);   //--> </script>     注意到兩個 parentNode 連用了嗎? "parentNode.parentNode". 第一個 parentNode 是 div ( id "childparent"), 因為我們要得到最外層的父元素, 所以另外加了一個 parentNode 就到了 div ( id "parent"). 使用 parentNode 不只找到某個元素的 nodeName, 還會更多. 例如, 你可以獲取包含大量元素的父節點, 並在末尾添加一個新的節點. IE 有它自己的名稱叫做 "parentElement", 對於交叉浏覽器腳本建議使用 parentNode.   再啰嗦兩句: 如果將 javascript 放在 html文件頭部, 會發生錯誤. Firefox 會有如下報錯:   document.getElementById("child") has no properties   而 IE 則是:   Object Required   原因是所有的支持 javascript 的浏覽器在完全解析 DOM 之前運行 javascript . 在實際在 Web 編程中,可能會將大多數 javascript 放在 head 標簽中. 為了能夠正常運行, 需要在函數中包裹 alert , 在文檔加載後調用函數. 例如在 Body 標簽中加入 .   parentNode、parentElement,childNodes、children 它們有什麼區別呢? parentElement 獲取對象層次中的父對象。  parentNode 獲取文檔層次中的父對象。  childNodes 獲取作為指定對象直接後代的 HTML 元素和 TextNode 對象的集合。  children 獲取作為對象直接後代的 DHTML 對象的集合。     --------------------------------------------------------   parentNode和parentElement功能一樣,childNodes和children功能一樣。但是parentNode和childNodes是符合W3C標准的,可以說比較通用。而另外兩個只是IE支持,不是標准,Firefox就不支持   --------------------------------------------------------   也就是說parentElement、children是IE自家的東西,別的地方是不認的。  那麼,他們的標准版就是parentNode,childNodes。  這兩個的作用和parentElement、children是一樣的,並且是標准的、通用的。   --------------------------------------------------------   以下是簡單的解釋,注意個別字的差異:  parentNode Property: Retrieves the parent object in the document hierarchy.    parentElement Property:Retrieves the parent object in the object hierarchy.   childNodes:  Retrieves a collection of HTML Elements and TextNode objects that are direct descendants of the specified object.   children:  Retrieves a collection of DHTML Objects that are direct descendants of the object.     parentElement parentNode.parentNode.childNodes用法例子   第一種方法  代碼如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" C> <META NAME="Author" C> <META NAME="Keywords" C> <META NAME="Description" C> <SCRIPT LANGUAGE="JavaScript"> <!-- var row = -1; function showEdit(obj){ var cell2 = obj.parentNode.parentNode.childNodes[1]; var rowIndex = obj.parentNode.parentNode.rowIndex; cell2.innerHTML = "<input type='text' value='"+ cell2.innerHTML +"'>"; if(row != -1){ var oldCell2 = document.getElementById("tb").rows[row].cells[1]; oldCell2.innerHTML = oldCell2.childNodes[0].value; } row = rowIndex; } //--> </SCRIPT> </HEAD> <BODY> <TABLE id="tb"> <TR> <TD><input type="radio" name="rad"></TD> <TD></TD> <TD></TD> </TR> <TR> <TD><input type="radio" name="rad"></TD> <TD></TD> <TD></TD> </TR> <TR> <TD><input type="radio" name="rad"></TD> <TD></TD> <TD></TD> </TR> </TABLE> </BODY> </HTML>   第二種方法  代碼如下: <table border=1 width=100%> <tr>     <td><input name=m type=checkbox ></td>     <td>1111</td>     <td><input name=aaa value="222" disabled></td>     <td><input name=bbb value="333" disabled></td> </tr> <tr>     <td><input name=m type=checkbox ></td>     <td>1111</td>     <td><input name=aaa value="222" disabled></td>     <td><input name=bbb value="333" disabled></td> </tr> <tr>     <td><input name=m type=checkbox ></td>     <td>1111</td>     <td><input name=aaa value="222" disabled></td>     <td><input name=bbb value="333" disabled></td> </tr> </table> <SCRIPT LANGUAGE="JavaScript"> function mm(e) { var currentTr=e.parentElement.parentElement; var inputObjs=currentTr.getElementsByTagName("input"); for(var i=0;i<inputObjs.length;i++) {    if(inputObjs[i ]==e) continue;     inputObjs[i ].disabled=!e.checked; } } </SCRIPT>   獲取HTML中的父控件方法 代碼如下: function setvalue(v,o)     {          //var obj=document.getElementById(''batchRate'');         //windows.         alert(o.parentNode.innerHTML);           alert(o.parentNode); //parentNode此處也是獲取父控件           alert(o.parentElement); //parentElement此處也是獲取父控件           alert(o.parentElement.parentNode); //parentElement.parentNode此處也是獲取父控件           //o.parentNode.bgColor=&quo
copyright © 萬盛學電腦網 all rights reserved