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。