如何通过路径获取元素而非 class 或 id

Question

我正在努力寻找答案，我想要一种谈论元素的方式，但由于我正在添加到的系统是动态的，我无法通过其ID进行引用。不过，我可以指定包含它的div的类名...本质上，我正在寻找的是以下类型的内容：

var disAb=document.getElementBySomething("div.ContainerDiv select")

当我提到“路径”一词时，我指的是在CSS中引用它的方式（请参见代码引用）。

谢谢大家！

- Phish

---

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll - Felix Kling

document.querySelectorAll - Virus721

谢谢大家，这一切都在于知道在哪里寻找的知识，对吧..？但我可以这样做 - querySelector(div.ContainerDiv td tr p)吗？还是只需要querySelector(div.containerDiv)？ - Phish

Answer 1

你需要使用 document.querySelector 或者 document.querySelectorAll，然后通过层级路径来引用它们：

示例 HTML 代码

<div class="ContainerDiv">
   <table>
   <tr>
      <td>
        <div>
           <select>
              <option>Some options</option>
           </select>
        </div>
      </td>
   </tr>
   </table>
</div>

JS

获取单个元素

var select=document.querySelector("div.ContainerDiv table tr td div select");
select.id = "someid";

对于多个元素

var selects=document.querySelectorAll("div.ContainerDiv select");
selects[0].id = "someid";

当然，您不需要使用层次结构的每个部分，例如您可以只使用：div.ContainerDiv select或div.ContainerDiv table select等。

- Patrick Evans

---

我遇到了错误 Uncaught TypeError: document.querySelector(...).click is not a function。 - user14097926

@prabhav 你的意思是 querySelectorAll().click 不是一个函数，因为 querySelector 只返回 dom 元素或 null，如果它返回了 null，那么你会得到不同的错误消息。如果你确实指的是 querySelectorAll，那是因为它返回一个集合（无论是否找到任何元素），并且它没有 click 方法，你需要访问集合中的单个项来访问它们的 click 方法，例如 querySelectorAll(...)[1].click()。 - Patrick Evans

不，我只是使用了 document.querySelector(...).click，然后我从复制粘贴错误信息中得到了那个错误消息。 - user14097926