时间戳

首页 > 解决方案 > 通过类名获取 div 内的嵌套元素

javascript - 通过类名获取 div 内的嵌套元素

问题描述

我正在尝试获取一个span元素，该元素在嵌套的div中有一个main-tag类。但我不想通过q​​uerySelector获取该元素，因为我的 html 文件中有许多具有相同类的元素，我不打算为此使用 ID。

我知道我在递归函数中犯了一些错误。这就是为什么这段代码不起作用。

所以为此我递归地调用一个函数来获取所需的元素。但是undefined由找到的变量返回。

function getElem(cell, name) {
  let found;
  if (cell.classList.contains(name)) return cell;
  else if (cell.children.length === 0) return null;
  else {
    found = Array.from(cell.children).find((element) =>
      element.classList.contains(name)
    );
    if (found === undefined) {
      Array.from(cell.children).forEach((element) => {
        found = getElem(element, name);
      });
    } else return found;
  }
}


console.log(getElem(document.getElementById("block-one"), "main-tag"));
<div id="block-one">
  <div class="something-one">
    <span class="something-two">Hello</div>
    <span class="abc">not found</div>
  </div>
  <div class="here">
    <span class="main-tag">Yes, i am here</div>
    <span class="bogus-tag">never find out</div>
  </div>
</div>

标签： javascripthtml

解决方案

您的标记正在使用预期的</div>位置。</span>

您可以将完整的 CSS 选择器与querySelector. 因此，例如，要在元素 with 中查找类的第一个元素main-tag，id="block-one"您可以这样做：

const element = document.querySelector("#block-one .main-tag");

现场示例：

console.log(document.querySelector("#block-one .main-tag"));
<div id="block-one">
  <div class="something-one">
    <span class="something-two">Hello</span>
    <span class="abc">not found</span>
  </div>
  <div class="here">
    <span class="main-tag">Yes, i am here</span>
    <span class="bogus-tag">never find out</span>
  </div>
</div>

或者，您可以调用querySelector一个元素只查看其后代：

const element = document.getElementById("block-one").querySelector(".main-tag");

现场示例：

console.log(document.getElementById("block-one").querySelector(".main-tag"));
<div id="block-one">
  <div class="something-one">
    <span class="something-two">Hello</span>
    <span class="abc">not found</span>
  </div>
  <div class="here">
    <span class="main-tag">Yes, i am here</span>
    <span class="bogus-tag">never find out</span>
  </div>
</div>

它们之间的一个关键区别是，如果没有id="block-one"元素，第二个会抛出错误。第一个将返回null。您可以使用新的可选链接运算符来解决此问题：

const element = document.getElementById("block-one")?.querySelector(".main-tag");

element将是 A) 匹配元素（如果有）；B）null如果有一个id="block-one"元素但其中没有.main-tag元素；或 C)undefined如果根本没有id="block-one"元素。（即使在没有找到某些东西时document.getElementById返回，可选的链接运算符也会在其左侧操作数是or时产生结果。）nullundefinedundefinednull

或者只使用document.querySelector选项（上面的第一个），它为您提供匹配元素或null.

您似乎不希望从您的 HTML 中获得这个，但是：如果您想允许元素本身具有类的可能性（getElem似乎允许这种可能性），您可以使用组选择器：

const element = document.querySelector("#block-one.main-tag, #block-one .main-tag");

现场示例：

console.log(document.querySelector("#block-one.main-tag, #block-one .main-tag"));
<div id="block-one" class="main-tag">
  <div class="something-one">
    <span class="something-two">Hello</span>
    <span class="abc">not found</span>
  </div>
  <div class="here">
    <span class="main-tag">Yes, i am here</span>
    <span class="bogus-tag">never find out</span>
  </div>
</div>

之所以有效，是因为组的第一个成员#block-one.main-tag（没有空格）仅与id="block-one"具有类的元素匹配。如果block-one没有该类，但它的一个后代有，则由该组的其他成员#block-one .main-tag（带有空格）找到。如果block-one元素有类并且它的一个后代有，则该block-one元素是找到的，因为它在文档顺序中是第一个（在文档顺序中，父元素在其子元素之前）。

推荐阅读