Javascript 获取嵌套元素

在Web开发中，经常需要从DOM中获取元素，然而有时候我们需要获取嵌套在多层元素中的目标元素。本文将介绍如何使用Javascript获取嵌套元素。

通过id获取元素

使用document.getElementById方法可以通过元素id获取元素对象，这个方法只能获取到页面中第一个符合条件的元素对象。

const nestedEl = document.getElementById('my-nested-element');

这个方法仅适用于直接嵌套在body元素中的元素，如果需要获取嵌套在其他元素中的目标元素，需要使用其他方法。

通过class获取元素

使用document.getElementsByClassName可以通过元素class获取所有符合条件的元素对象，这个方法返回的是一个HTMLCollection对象，可以遍历这个集合找到目标元素。

const nestedEls = document.getElementsByClassName('my-nested-class');
for (let i = 0; i < nestedEls.length; i++) {
  if (nestedEls[i].getElementsByTagName('h1')[0]) {
    console.log(nestedEls[i]);
  }
}

通过tag获取元素

使用document.getElementsByTagName可以通过元素tag获取所有符合条件的元素对象，这个方法返回的是一个HTMLCollection对象，可以遍历这个集合找到目标元素。

const nestedEls = document.getElementsByTagName('div');
for (let i = 0; i < nestedEls.length; i++) {
  if (nestedEls[i].getElementsByClassName('my-nested-class')[0]) {
    console.log(nestedEls[i]);
  }
}

通过querySelector获取元素

使用document.querySelector方法可以通过CSS选择器获取符合条件的第一个元素对象，如果需要获取所有符合条件的元素，需要使用document.querySelectorAll方法。

const nestedEl = document.querySelector('div > .my-nested-class');
const nestedEls = document.querySelectorAll('div > .my-nested-class');

以上方法可以满足大部分情况下获取嵌套元素的需求，当然如果有更复杂的情况，可以使用各种组合方式来获取目标元素。