JavaScript獲取父元素的多種方法

一、獲取父元素節點

在JavaScript中獲取父元素節點需使用parentNode屬性，該屬性會返回該元素的父元素節點。

const child = document.getElementById('child');
const parent = child.parentNode;
console.log(parent);

上述代碼中，我們通過getElementById方法獲取指定id的子元素，然後利用parentNode屬性獲取子元素節點的父級節點，並將其輸出到控制台。

二、獲取父元素中指定第三個子元素

有時候我們需要獲取父元素中指定的子元素，比如獲取第三個子元素。這時候可以使用children屬性來獲取所有子元素，然後使用數組索引獲取指定子元素。

const parent = document.getElementById('parent');
const thirdChild = parent.children[2];
console.log(thirdChild);

上述代碼中，我們先獲取父元素節點，然後通過children屬性獲取所有子元素，並使用索引獲取指定元素（索引從0開始），這裡獲取第三個子元素並將其輸出到控制台。

三、獲取父元素寬度

獲取元素的寬度可以使用offsetWidth屬性，該屬性會返回該元素的寬度（包括寬度、內邊距和邊框）。

const parent = document.getElementById('parent');
const parentWidth = parent.offsetWidth;
console.log(parentWidth);

上述代碼中，我們獲取父元素節點，然後使用offsetWidth屬性獲取其寬度，並將其輸出到控制台。

四、獲取子元素

在JavaScript中獲取子元素需要使用children屬性，該屬性會返回該元素的所有子元素。

const parent = document.getElementById('parent');
const children = parent.children;
console.log(children);

上述代碼中，我們獲取父元素節點，然後使用children屬性獲取其所有子元素，並將其輸出到控制台。

五、獲取父元素class字元素

可以使用getElementsByClassName方法來獲取指定類名的元素，該方法會返回一個元素集合，通過索引可以訪問其中的元素節點。

const parent = document.getElementById('parent');
const classElements = parent.getElementsByClassName('class-name');
console.log(classElements);

上述代碼中，我們獲取父元素節點，然後使用getElementsByClassName方法獲取指定類名的元素，並將其輸出到控制台。

六、獲取父元素中指定子元素

與獲取指定第三個子元素類似，可以使用querySelector方法來獲取父元素中指定的子元素，該方法可以使用CSS選擇器指定要獲取的元素。

const parent = document.getElementById('parent');
const child = parent.querySelector('child-selector');
console.log(child);

上述代碼中，我們獲取父元素節點，並使用querySelector方法獲取要獲取的子元素，該方法接受一個元素選擇器字元串，我們需要替換為實際要查詢的選擇器，並將其輸出到控制台。

七、獲取父元素下的所有子元素

獲取父元素下的所有子元素可以使用children屬性，該屬性會返回該元素的所有子元素，我們可以配合循環對每個子元素進行操作。

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

上述代碼中，我們獲取父元素節點，然後使用children屬性獲取其所有子元素，通過for循環遍歷每個子元素，並將其輸出到控制台。

八、獲取父元素下的第二個子元素

獲取父元素下的第二個子元素可以使用children屬性，該屬性會返回該元素的所有子元素，只需要指定索引即可。

const parent = document.getElementById('parent');
const secondChild = parent.children[1];
console.log(secondChild);

與獲取第三個子元素類似，這裡我們只需要指定索引為1即可獲取第二個子元素，並將其輸出到控制台。

九、獲取子元素方法

在JavaScript中獲取元素的子元素需要使用children屬性與childNodes屬性，它們之間的區別在於childNodes屬性會獲取包括文本節點在內的所有節點，而children屬性則只會獲取元素節點。使用children屬性獲取子元素一般會更方便。

const parent = document.getElementById('parent');
const children = parent.children;
const childNodes = parent.childNodes;
console.log(children);
console.log(childNodes);

上述代碼中，我們獲取父元素節點，並使用children屬性獲取所有子元素，使用childNodes屬性獲取所有子節點，然後將它們分別輸出到控制台。

十、獲取兄弟節點元素

在JavaScript中獲取元素的兄弟節點需要使用previousSibling屬性、nextSibling屬性或者利用parent屬性獲取父元素下的子元素，然後再使用上述屬性獲取前一個或者後一個兄弟節點元素。

const child = document.getElementById('child');
const previousSibling = child.previousSibling;
const nextSibling = child.nextSibling;
const siblings = Array.from(child.previousElementSibling.parentNode.children).filter(element => element !== child);
console.log(previousSibling);
console.log(nextSibling);
console.log(siblings);

在上述代碼中，我們首先獲取指定子元素，然後使用previousSibling屬性獲取前一個兄弟節點元素，使用nextSibling屬性獲取後一個兄弟節點元素，最後利用parent屬性獲取父元素下的所有子元素，並配合filter方法過濾掉該子元素來獲取其他兄弟節點元素，將它們輸出到控制台。

以上就是JavaScript獲取父元素的多種方法，在實際開發中，針對不同的場景需要靈活使用這些方法來操作DOM。