如何从 HTML 中获取具有相似类的特定元素（使用 JavaScript）？

Question

如何使用 JavaScript 从 HTML 中获取某个元素。我有这个代码。

<div class="Content"> 

 <div class="First Block">
  <div class="num">Text From First Block</div>
 </div>

 <div class="Second Block">
  <div class="num">Text From Second Block</div>
 </div>

 <div class="Third Block">
  <div class="num">Text Third Second Block</div>
 </div>

</div>

我想写“来自第二块的文本”。如果我写这段代码

console.log(document.querySelector('.num').innerText);

我会收到“来自第一块的文本”

Answer 1

你可以使用 document.querySelectorAll

console.log(document.querySelectorAll(".num")[1].innerText)

<div class="Content"> 

 <div class="First Block">
  <div class="num">Text From First Block</div>
 </div>

 <div class="Second Block">
  <div class="num">Text From Second Block</div>
 </div>

 <div class="Third Block">
  <div class="num">Text Third Second Block</div>
 </div>

</div>

Answer 2

您可以通过一些简单的方法完成此操作。

使用父选择器.Second.Block。像这样：

document.querySelector('.Second.Block > .num').innerText

此外，querySelector() 允许您指定伪类，例如 :nth-child()。像这样：

document.querySelector('.Block:nth-child(2) > .num').innerText

并用querySelectorAll()，引用为集合，在方括号中表示索引。像这样：

document.querySelectorAll('.num')[1].innerText

console.log(document.querySelector(".Second.Block > .num").innerText);
console.log(document.querySelector(".Block:nth-child(2) > .num").innerText);
console.log(document.querySelectorAll(".num")[1].innerText);

<div class="Content">
    <div class="First Block">
        <div class="num">Text From First Block</div>
    </div>

    <div class="Second Block">
        <div class="num">Text From Second Block</div>
    </div>

    <div class="Third Block">
        <div class="num">Text Third Second Block</div>
    </div>
</div>

Answer 3

您可以使用 getElementsByClassName() 而不是使用 queryselector 而不是输入标签的索引号

console.log(document.getElementsByClassName("Block")[i].innerHTML)

如何从 HTML 中获取具有相似类的特定元素（使用 JavaScript）？

How to get certain element (using JavaScript) from HTML with similar classes?

html

javascript

css

element

queryselector

如何从 HTML 中获取具有相似 类 的特定元素（使用 JavaScript）？

How to get certain element (using JavaScript) from HTML with similar classes?

html

javascript

css

element

queryselector

如何从 HTML 中获取具有相似类的特定元素（使用 JavaScript）？