1.數組元素childNodes[0]有更直觀易讀的優點,這邊在介紹一個有同樣功能的屬性,且更加語義化-------->firstChild屬性
假設我們需要目標元素節點下的所有子元素中的第一個子元素我們可以這樣做:
目標元素節點下的子元素節點數組.firstChild 這句代碼等價於 目標元素節點下的子元素節點數組[0];
目標元素節點.childNodes[0] 這句代碼等價於 目標元素節點.firstChild;
與此類推當我們需要目標元素節點下的所有子元素節點中的最后一個元素我們可以這樣做:
目標元素節點下的子元素節點數組.lastChild 這句代碼等價於 目標元素節點下的子元素節點數組[目標元素節點下的子元素節點數組.length-1]
目標元素節點.childNodes[目標元素節點.childNodes.length-1]=目標元素節點.lastChild;
從上面的描述中,發現firstChild屬性和lastChild屬性更加的語義化,而且代碼更加的簡潔,方便我們記憶;
注意：firstChild和lastChild只能對單個節點就行操作,不能對節點數組進行操作;
作用:如果我們想改變一個文本節點的值,那就是用DOM提供的nodeValue屬性,它是用來得到(和設置)一個文本節點的值；
如下代碼：
<body> <p id="description"> hello world! </p> <script type="text/javascript"> var p = document.getElementById("description"); alert(p.nodeValue); </script> </body>
上面這段代碼,犯了典型的錯誤,大多數人可能沒有注意,這一點我在之前的隨筆http://www.cnblogs.com/GreenLeaves/p/5692576.html中有介紹nodeType的問題,我們獲取的p是一個元素節點,<p>元素本身的nodeValue值是一個null值,而且最重要的是nodeValue屬性是用來獲取文本節點的值的。
所以輸出:null. 這個是一個小細節,也是一個小知識點.需要注意。
正確的獲取<p>標簽里面文本的做法是獲取<P>標簽下文本節點的節點值。代碼如下: ---這里<p>標簽代表一個元素節點
<body> <p id="description"> hello world! </p> <script type="text/javascript"> var p = document.getElementById("description"); alert(p.childNodes[0].nodeValue); </script> </body>
學完nodeValue屬性后我們能給我們的JS圖片庫加一個新的功能。