QuerySelector with specified index in Javascript (like [1]) - Stack Overflow

admin管理员组

文章数量:1344220

How do I make:

document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];

but with querySelector?

---

My guess would be:

document.querySelector(".first[1] > .second[2]");

But that doesn't work.

How do I make:

document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];

but with querySelector?

---

My guess would be:

document.querySelector(".first[1] > .second[2]");

But that doesn't work.

• javascript
• queryselector

Share Improve this question Follow asked Feb 27, 2021 at 21:15 Tobias H.Tobias H. 50522 gold badges77 silver badges2222 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

In your original selection you're grabbing the second element with the class of .first and the third element with the class of .second that is also the child of the former. With this in mind you could use the nth-of-type pseudo selector for both classes and count up accordingly. The only difference with this method in parison to the JS you have now is that it doesn't use the zero-index.

// document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];

document.querySelector('.first:nth-of-type(2) .second:nth-of-type(3)').style = 'border: 1px solid red;'

.first {
  border: 1px solid black;
  padding: 10px;
}

.first:nth-of-type(2) {
  margin-top: 10px;
}

<div class="first">
  <div class="second">Second (1)</div>
  <div class="second">Second (2)</div>
  <div class="second">Second (3)</div>
</div>

<div class="first">
  <div class="second">Second (1)</div>
  <div class="second">Second (2)</div>
  <div class="second">Second (3)</div>
</div>

document.querySelector(".first:nth-of-type(2) .second:nth-of-type(3)").style.color = "red"

<div class="first">
  <div class="second">second1</div>
  <div class="second">second2</div>
  <div class="second">second3</div>
  <div class="second">second4</div>
</div>
<div class="first">
  <div class="second">second1</div>
  <div class="second">second2</div>
  <div class="second">second3</div>
  <div class="second">second4</div>
</div>

You don't need the > operator of the querySelector, you could use the following syntax:

document.querySelector('.first:nth-child(1) .second:nth-child(2)');

Within this HTML code:

var test = document.querySelector('.first:nth-child(1) .second:nth-child(2)').innerText;
console.log(test);

<div class="first">

  <div class="second"></div>
  <div class="second">Hello, I'm your selected div!</div>
  <div class="second"></div>

</div>

<div class="first">
</div>

The JS code will produce the output:

Hello, I'm your selected div!

Keep in mind that CSS pseudoselectors start counting from 1, not from 0, so to achieve the example you posted, you'd need to set :nth-child(2) and :nth-child(3).

Also, if you have a different structure, it might as well be worth taking a look at the :nth-of-type selector, as the :nth-child will require to be the nth child of a parent, in an absolute sense. Differently, :nth-of-type will look for the nth (typeof) child of a parent.

本文标签： QuerySelector with specified index in Javascript (like 1)Stack Overflow