javascript學習筆記(十八) 獲得頁面中的元素程式碼_基礎知識

1.取得元素

getElementById()方法，透過元素的id取得元素，接受一個參數即要取得元素的id，如果不存在這個id回傳null
注意不要讓表單元素的name和別的元素的id相同，IE8以下的IE瀏覽器用這個方法通過元素的name屬性可以得到該元素
以下面元素為例

這裡是id為「myDiv」的div內容

var document.getElementById("myDiv"); //"myDiv"區分大小寫，取得

元素的引用
getElementsByTagName()方法，透過元素的標籤名稱取得元素，接受一個參數即要取得元素的標籤名，傳回包含0個或多個的NodeList

複製程式碼 程式碼如下:

var images = document.getElementsByTagName("img"); //取得頁面中的所有元素

alert(images.length); //圖像的數量
alert(images[0].src); //第一個圖片元素的src
alert(images.item(0).src); //同上

getElementsByName()方法，透過元素的name屬性取得元素，接受一個參數即要取得元素的name屬性，常用來取得單選按鈕

複製程式碼 程式碼如下:

• label>

var radios = document.getElementsByName("color"); //取得所有name="color"的單選按鈕

2.獲取元素子節點或元素子節點及其後代節點

複製代碼 代碼如下:

• 項目一


• 項目二


• 項目三

註：IE認為

元素有3個子節點，分別是3個元素，其他瀏覽器會認為有7個子節點，包括3個元素和4個文字節點，如果
在一行中：


• 項目一
• 項目二
• 項目三
　　
任何瀏覽器都認為有3個子節點

獲取元素的子節點:

複製代碼 程式碼如下:

var ul = document.getElementById("myList");
for (var i=0,len = ul.childNodes.length ; i if ( ul.childNodes.length[i].nodeType == 1) { //nodeType == 1 說明節點是元素節點，而不是文字節點
//執行某些操作
}
}


取得元素的子節點及其後代節點:

複製程式碼
複製程式碼



複製程式碼
複製程式碼複製程式碼複製程式碼 程式碼如下: var ul = document.getElementById("myList"); var items = ul.getElementsByTagName("li"); //li裡的li也會被取得
3透過節點的屬性找出其它節點
nextSibling屬性指向目前節點的下一個兄弟節點
previousSibling屬性指向目前節點的上一個兄弟節點
firstChild屬性指向第一個子節點，lastChild指向最後一個子節點
childNodes保存所有子節點（其實是NodeList物件）,可以透過方括號的方法存取如someNode.childNodes[0] 存取第一個子節點
parentNode屬性指向父節點

節點關係如下：




NodeList是個陣列對​​象，我們可以把它轉換為數組，函數如下

複製程式碼
複製程式碼



複製程式碼



程式碼如下:


function converToArray (nodes) {
var arrary = null;
try {
array = Array.prototype.slice.call(nodes,0); 🎜>}
catch (ex) {
array = new Array();
for (var i=0,len=nodes.length ; iarray.push (nodes[i]);
} } return array; } var div = document.getElementById("side"); alert(converToArray( div.childNodes));