Using Javascript to select nested element

Question

How can I select a nested element

For example

We have a something like this (this is what Page list looks like when searching for people on linkedin)

<li class="page-list">
      <ol>
            <li class="active">1</li>
            <li><button data-ember-action="" data-ember-action-6289="6289" data-is-animating-click="true">2</button></li>
            <li><button data-ember-action="" data-ember-action-6291="6291">3</button></li>
            <li><button data-ember-action="" data-ember-action-6293="6293">4</button></li>
            <li><button data-ember-action="" data-ember-action-6295="6295">5</button></li>
            <li><button data-ember-action="" data-ember-action-6297="6297">6</button></li>
            <li><button data-ember-action="" data-ember-action-6299="6299">7</button></li>
            <li><button data-ember-action="" data-ember-action-6301="6301">8</button></li>
            <li><button data-ember-action="" data-ember-action-6303="6303">9</button></li>
            <li><button data-ember-action="" data-ember-action-6305="6305">10</button></li>
      </ol>
    </li>

Now, just like this there are multiple li elements on the page but only one element with <li class="page-list">

Now, From this li I want to click/select this

<button data-ember-action="" data-ember-action-6291="6291">3</button>

which is further nested under <li>

[Question] Can someone please help me and tell how can i select/click on this? Also I can't use data-ember-action because in data-ember-action-6289, 6289 is not fixed and random (different for different searches probably) and hence when I create a script to perform the action, It won't know about number in data-ember-action.

Answer 1

A simple querySelector would do it:

console.log(document.querySelector('[data-ember-action-6291="6291"]'))

<li class="page-list">
  <ol>
    <li class="active">1</li>
    <li><button data-ember-action="" data-ember-action-6289="6289" data-is-animating-click="true">2</button></li>
    <li><button data-ember-action="" data-ember-action-6291="6291">3</button></li>
    <li><button data-ember-action="" data-ember-action-6293="6293">4</button></li>
    <li><button data-ember-action="" data-ember-action-6295="6295">5</button></li>
    <li><button data-ember-action="" data-ember-action-6297="6297">6</button></li>
    <li><button data-ember-action="" data-ember-action-6299="6299">7</button></li>
    <li><button data-ember-action="" data-ember-action-6301="6301">8</button></li>
    <li><button data-ember-action="" data-ember-action-6303="6303">9</button></li>
    <li><button data-ember-action="" data-ember-action-6305="6305">10</button></li>
  </ol>
</li>

If you can't count on the data- attributes, then just select the third child of the ol:

console.log(
  document.querySelector('.page-list li:nth-child(3)')
);

<li class="page-list">
  <ol>
    <li class="active">1</li>
    <li><button data-ember-action="" data-ember-action-6289="6289" data-is-animating-click="true">2</button></li>
    <li><button data-ember-action="" data-ember-action-6291="6291">3</button></li>
    <li><button data-ember-action="" data-ember-action-6293="6293">4</button></li>
    <li><button data-ember-action="" data-ember-action-6295="6295">5</button></li>
    <li><button data-ember-action="" data-ember-action-6297="6297">6</button></li>
    <li><button data-ember-action="" data-ember-action-6299="6299">7</button></li>
    <li><button data-ember-action="" data-ember-action-6301="6301">8</button></li>
    <li><button data-ember-action="" data-ember-action-6303="6303">9</button></li>
    <li><button data-ember-action="" data-ember-action-6305="6305">10</button></li>
  </ol>
</li>