querySelector 查找 DOM 元素，该元素在其树中的任何位置都有特定文本

Question

<div>
    <card class="card-class">
        <header class="header-class">Title 1</header>
    </card>
    <div>Stuff</div>
    <card class="card-class"> <-- This one
        <header class="header-class">Title 2</header>
    </card>
    <div>More stuff?</div>
    <card class="card-class">
        <header class="header-class">Title 3</header>
    </card>
</div>

我想使用 2 个条件提取示例中所述的 DOM 元素。我感兴趣的 dom 元素有一个 class card-class 并且在这个 DOM 元素的某处有一个带有 class header-class 的元素里面有个标题。

我需要通过标题文字获得一张特定的卡片。所以在这个例子中，我想要带有 'Title 2' 的卡片元素。有没有办法只用一个选择器而不是 javascript 来实现这个？

Answer 1

不确定 one-liner 是否可行，但这里有一个替代方案：

首先你得到所有“header-class”，它们是“card-class”的后代。然后你遍历它们寻找请求的标题。最后，您访问 parent 组件，这就是您要查找的卡片。

const cards = document.querySelectorAll(".card-class .header-class");

for (let card of cards) {
    if (card.innerHTML === "Title 2") {
        let cardYouAreLookingFor = card.parentElement;
        console.log(cardYouAreLookingFor);
    }
}

希望这对您有所帮助。干杯！

Answer 2

我能看到这一行的唯一可能方法是向元素添加数据属性，然后定位该元素。

const title2 = document.querySelector('.header-class[data-title="Title 2"]');

console.log(title2.textContent);

<div>
  <card class="card-class">
    <header class="header-class" data-title="Title 1">Title 1</header>
  </card>
  <div>Stuff</div>
  <card class="card-class">
    <header class="header-class" data-title="Title 2">Title 2</header>
  </card>
  <div>More stuff?</div>
  <card class="card-class">
    <header class="header-class" data-title="Title 3">Title 3</header>
  </card>
</div>

querySelector 查找 DOM 元素，该元素在其树中的任何位置都有特定文本

querySelector to find a DOM element which has particular text anywhere inside its tree

javascript

html

css

css-selectors