javascript中的firstchild-js教程-PHP中文網

javascript中的firstchild

阿神

發布： 2017-02-25 17:36:53

原創

2809 人瀏覽過

<ul id="contain">  
     <li><a href="http:/www.php.cn">Microsotf</a></li>  
     <li><a href="http:/www.php.cn">Yahoo</a></li>  
     <li><a href="http:/www.php.cn">Easy</a></li>  
     <li><a href="www.php.cn">W3c/Javascript</a></li>  
     <li><a href="www.php.cn">Design|Source</a></li>  
 </ul>  
var container=document.getElementById("contain");

登入後複製

1、使用firstChild是ul元素下的第一個子節點（包括文字節點、HTML元素節點）。所以按照標準，你這個例子在Firefox和Opera中，Container.firstChild應該要取得空白符的文字節點。而IE不是這樣實現的，如果文字節點只包含空白符，IE會直接跳過。所以在IE中透過container.firstChild你獲得的是li元素節點。

2、firstChild是元素的所有子節點（childNodes）中的第一個子節點，如果元素的第一個子節點沒有變化，則firstChild這個引用也不會有變化。連續取得兩次firstChild是同一個物件。

補充：你要了解引用與物件的關係。 firstChild是指向元素首個子節點的參考。你給的xx函數中，將firstChild引用指向的物件append到父物件的末尾，原來firstChild引用的物件就跳到了container物件的末尾，而firstChild指向了本來是排在第二個的元素物件。如此循環下去，連結就逐一往後跳了。

<body>  
<ul id="action">  
    <li title="第一段文字">第一个</li>  
    <li title="第二段文字">第二个</li>  
</ul>  
<script type="text/javascript">  
    var attr_p = document.getElementById("action");  
    alert(attr_p.childNodes[1].childNodes[0].nodeValue);  
</script>  
</body>

登入後複製

如果要取得id為action的ul的第一個li內的文字節點（如取得：第一個），可以使用…childNodes[1].childNodes[0].nodeValue這種方法找到，使用…childNodes[1].firstChild.nodeValue同樣可以找到第一個li的文字節點，結論childNodes[0]等價於firstChild，無論何時何地，重要需要存取childNodes[]數組的第一個元素，我們就可以把它寫成firstChild，DOM也提供一個與之對應的lastChild屬性。要注意的是，ff的空格節點問題，可以使用nodeType屬性對節點類型判斷，直到發現元素節點為止。