JavaScript如何獲取子節點

一、獲取指定元素的所有子節點

在JavaScript中，可以使用childNodes屬性獲取指定元素的所有子節點，包括元素、文本節點、注釋節點等。

var element = document.getElementById('parent');
var childNodes = element.childNodes;
for(var i = 0; i < childNodes.length; i++) {
    console.log(childNodes[i]);
}

上述代碼中，首先使用getElementById()方法獲取id為parent的元素，然後使用childNodes屬性獲取其所有子節點，並進行遍歷打印。

二、獲取指定元素的子元素節點

如果只想獲取指定元素的子元素節點，可以使用children屬性。

var element = document.getElementById('parent');
var children = element.children;
for(var i = 0; i < children.length; i++) {
    console.log(children[i]);
}

上述代碼中，children屬性返回的是只包含元素節點的數組，因此使用該屬性可直接獲取指定元素的子元素節點。

三、獲取指定元素的第一個子節點或最後一個子節點

如果只需要獲取指定元素的第一個子節點或最後一個子節點，可以使用firstChild和lastChild屬性。

var element = document.getElementById('parent');
var firstChild = element.firstChild;
var lastChild = element.lastChild;
console.log(firstChild);
console.log(lastChild);

上述代碼中，firstChild屬性返回指定元素的第一個子節點，而lastChild屬性返回指定元素的最後一個子節點。

四、獲取指定元素的指定位置子節點

如果需要獲取指定元素的某個位置的子節點，可以使用childNodes屬性結合下標來實現。

var element = document.getElementById('parent');
var childNodes = element.childNodes;
console.log(childNodes[0]); // 獲取第一個子節點
console.log(childNodes[1]); // 獲取第二個子節點
console.log(childNodes[2]); // 獲取第三個子節點

上述代碼中，childNodes屬性返回的是以0為起始下標的所有子節點，因此可以按照下標的方式來獲取指定位置的子節點。

五、獲取指定元素的指定類型子節點

有時候需要獲取指定元素的某種類型的子節點，比如只獲取元素節點或只獲取文本節點，可以使用nodeType屬性來判斷。

var element = document.getElementById('parent');
var childNodes = element.childNodes;
for(var i = 0; i < childNodes.length; i++) {
    if(childNodes[i].nodeType == 1) {
        console.log(childNodes[i]); // 獲取元素節點
    }
}

上述代碼中，nodeType屬性返回的是節點的類型，1表示元素節點，3表示文本節點，因此可以根據nodeType屬性的返回值來判斷節點的類型。