如何使用 javascript 和 HTML 将变量设置为 ID 和类中的内容答案

【问题标题】：How to set a variable to something inside an ID and a Class with javascript and HTML如何使用 javascript 和 HTML 将变量设置为 ID 和类中的内容
【发布时间】：2020-10-21 06:57:21
【问题描述】：

所以我有这个 HTML 代码，我想用 java 脚本调用按钮。这是我正在进行的 404 错误页面测试。代码位于 html 正文中，一切正常。

<div class="contain" id="container">
        <div class="content" id="cont">
          <h2>404</h2>
          <h4>Opps! Page not found</h4>
          <p>The page you were looking for doesn't exist. You may have mistyped the adress or the page may            have moved</p>
          <a href="#">Back To Home</a>
        </div>
      </div>

但是我不知道如何为按钮设置 var（或 let 或 const）。当我尝试获取 id 然后获取类名然后获取按钮时出现错误。我什至尝试过类似的方法。

const buttons = document.getElementById("container").getElementById("cont").querySelector('a');

它给了我一个错误，因为它设置了 document.getElementById("container") = null; 我是 HTML 和 Javascript 的新手，所以有帮助！谢谢

【问题讨论】：

嵌套getElementById并没有太大的收获。只需使用= document.querySelector("#cont a")
如果说第一个 id 查找为 null，则表明在执行该表达式时该元素不在 DOM 中。或者你在两个地方之一输入了 id
总是把你的（不是Deferred）<script>标签放在结束之前</body>标签。一个问题仍然存在：你想用 JS 和那个按钮实现什么？
PS：buttons 具有误导性。如果您使用querySelector，则应为button（而不是querySelectorAll）

标签： javascript html

【解决方案1】：

你可以使用 querySelector 方法吗：

var data = document.querySelector("#container #cont a");

console.log(data.href);

<div class="contain" id="container">
        <div class="content" id="cont">
          <h2>404</h2>
          <h4>Opps! Page not found</h4>
          <p>The page you were looking for doesn't exist. You may have mistyped the adress or the page may            have moved</p>
          <a href="#">Back To Home</a>
        </div>
      </div>

【讨论】：

【解决方案2】：

您可以使用调试器。在 «inspector» 选项卡中，右键单击目标元素，然后选择 «copy» «css selector»。

在这种情况下给出：#cont > a:nth-child(4)

见截图：https://i.stack.imgur.com/ICdgO.png

然后你可以使用querySelector，像这样：

document.querySelector("#cont &gt; a:nth-child(4)").textContent = "Modified by js!"

<div class="contain" id="container">
        <div class="content" id="cont">
          <h2>404</h2>
          <h4>Opps! Page not found</h4>
          <p>The page you were looking for doesn't exist. You may have mistyped the adress or the page may            have moved</p>
          <a href="#">Back To Home</a>
    </div>
</div>

【讨论】：