Question

我试图学习如何使用JS来操纵DOM，而在我操作时，我控制台记录了我想要改变的h1元素。我注意到，当我在控制台上记录了元素时，它说他们的innerHTML和textContent与我在控制台日志语句之后更改它的值相同。

为什么控制台日志语句反映了我对h1元素的未来更改？

这是我的JS代码

var allh1 = document.querySelectorAll("h1")
console.log(allh1); //innerHTML and textContent both listed as "now all h1's are changed here"
for (var i = 0; i < allh1.length; i++) {
  allh1[i].textContent = "Now all h1's are changed"; //I gave them that textContent in this line
}

这是我的HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>Getting started with jQuery</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                color: rgb(16, 10, 102);
            }
        </style>
    </head>
    <body>

    <h1 id="heading">What is jQuery?</h1>

    <p>jQuery is the most popular JavaScript library. It gives developers lots of useful functions so they can make their webpage interactive across multiple browsers.</p>

    <p class="note">jQuery is an open source library with a big community of contributors.</p>

    <h1>Why should you learn jQuery?</h1>

    <p>If you learn jQuery, you'll be able to use it in your own webpages, understood other developer's webpages, and have a better understanding generally about how to use libraries.</p>

    <p class="note">Note: jQuery functions use the DOM API (like <code>document.getElementById</code>). You should  learn that first, if you haven't yet.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="jquery_and_vanilla_js_here.js"></script>
</body>
</html>

为什么控制台会记录语句后发生的操作？ JS和DOM

0 个答案: