DOM可以做什麼?(二) – Javascript教程_JS教程_技術文章 – 程式設計聯盟

結合使用getElementById()和getElementsByTagName()
有時候我們可能不希望選中網頁中的所有的段落,而是選中特定部分的段落(或者是其它元素)。其實我們可以借用以上兩個函數來實現,例如如下的代碼就會先找到id為content的元素,再進一步選中它內部的段落。
cparas = document.getElementById("content").getElementsByTagName("p");
點擊一下下面的按鈕,就可以看到都選中的哪些段落。留意本頁左上角那個有邊框而沒有設置背景顏色的段落。由於它沒有在id為content的p內,所以沒有被選中。
=========================================================================================================================================
訪問DOM節點3——通過節點關系
註意:DOM的節點並不是孤立的,因此可以通過DOM節點之間的相對關系對它們進行訪問
如字面意思,parentNode用於訪問父節點。firstChild和lastChild則分別用於訪問某個節點的第一個子結點和最後一個子結點。其中,nodeName是隻讀的,元素節點的nodeName和標簽名字一樣,屬性節點的nodeName就是該屬性,文字節點的nodeName永遠是#text,文檔節點的nodeName是#document。
 
應用實例
HTML代碼:
<p>
    <p id="test">我是第一個p的文字</p>
    <p id="test2">我是第二個p的文字,span的文字</p>
</p>
JavaScript代碼
<script type="text/javascript">
function getTest(){
        var x = document.getElementById("test");
        x.style.border = "1px dashed";
}
function getParent(){
        var x = document.getElementById("test");
        x.parentNode.style.border = "1px dashed";
}
function getFirst(){
        var x = document.getElementById("test");
        alert(x.firstChild.nodeValue);
}
function getLast(){
        var x = document.getElementById("test");
        alert(x.lastChild.nodeValue);
}
</script>
 
實際效果:
我是第一個p的文字
我是第二個p的文字,span的文字
getTest()
getParent()
getFirst()
getLast()
其它訪問DOM節點的屬性
除瞭上面的parentNode、firstChild和lastChild,我們還有childNodes,它表示的是一個節點的所有子結點;而previousSibling和nextSibling則分別表示上一個和下一個相鄰的節點。

摘自 劉海闖的專欄

發佈留言