如何通过类和id名称获取元素答案

【问题标题】：How to get element by class and id name如何通过类和id名称获取元素
【发布时间】：2022-11-27 10:13:46
【问题描述】：

我有一个这样的javascript代码：

var confirmbutton = document.getElementsByClassName("btn-primary-md");
for (var y=0;y<confirmbutton.length; y++) 
  {
  confirmbutton[y].click();
//...

我正在尝试制作一个 javascript，它将使用以下 html 按下具有相同类和 id 的特定按钮。

<a href="" id="confirm-btn" class="btn-primary-md">Get it Now</a>

但它保留了另一个具有相同类名的类，它不断被按下：

<a href="https://example.com" class="btn-primary-md">Upgrade Now</a>

如何得到

<a href="https://example.com" class="btn-primary-md">Upgrade Now</a>

使用我的javascript？

【问题讨论】：

由于 id 是唯一的，因此只需定位具有该 id 的元素：document.querySelector('#confirm-btn')。
只需使用 querySelector 来提供更具体的选择器，或仅使用 document.getElementById("confirm-btn")。
@Andy 说的。真的，看看你的代码。你得到元素小号（它在函数名中）然后循环遍历它们（for 循环）。不要只是盲目地复制代码。停止并读它。如果您不了解它，请进行一些研究。 MDN 是一个很好的起点：developer.mozilla.org/en-US
我们都希望你没有犯错误，你建立了一个你的 ID 不是唯一的页面......

标签： javascript getelementbyid getelementsbyclassname

【解决方案1】：

您可以使用 document.querySelectorAll 通过 ID 和类获取按钮：

let confirmButtons = document.querySelectorAll("#confirm-btn.btn-primary-md");

for (let i = 0; i < confirmButtons.length; i++) {
  console.log("The button text is: " + confirmButtons[i].innerText);
}

<a href="" id="confirm-btn" class="btn-primary-md">Get it Now</a>
<a href="https://example.com" class="btn-primary-md">Upgrade Now</a>

但是，正如 @Andy 在 cmets 中已经建议的那样，您最好仅通过 ID 获取按钮（假设您的 ID 在页面上是唯一的）。

【讨论】：