javascript - 使用 Javascript 选择嵌套元素

Question

如何选择嵌套元素

例如

我们有一个类似的东西（这是在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>

现在，就像这样，页面上有多个 li 元素，但只有一个元素<li class="page-list">

现在，从这个 li 我想点击/选择这个

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

它进一步嵌套在<li>

[问题]有人可以帮助我并告诉我如何选择/单击它吗？我也不能使用data-ember-action，因为在 data-ember-action-6289 中，6289 不是固定和随机的（可能因不同的搜索而不同），因此当我创建脚本来执行操作时，它不会知道数据中的数字-余烬行动。

标签： javascript

Answer 1

一个简单的querySelector就可以了：

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>

如果你不能指望data-属性，那么只需选择第三个孩子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>