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
   

   

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

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

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);