Question

我是HTML新手，特别是HTML5。

我尝试选择ID为mr的标头，并将其更改为para作为其类别的项目数的长度。

我的浏览器视图中似乎没有任何变化。

不确定原因。感谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        var items = document.getElementsByClassName("para");
        var log = document.getElementById("mr");
        log.innerText = items.length;
    </script>
    <title>Title</title>
    <html lang="en"/>

</head>
<body>
    <header>
        <h1 id="mr">This is a header</h1>
    </header>

    <nav>
        <a href="index.html">Index</a>
    </nav>

    <section>
        <h1>Section 1</h1>

        <article>
            <p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
        </article>

        <article>
            <p class="para"> <mark>here is some more shit</mark></p>
        </article>

    </section>

    <footer>

    </footer>
</body>
</html>

Answer 1

脚本运行时，DOM和mr都不存在。

选项1

只需将script部分放在关闭正文标记

之前

 <script>
            var items = document.getElementsByClassName("para");
            var log = document.getElementById("mr");
            log.innerText = items.length;
        </script> 
     </body>

选项2

如果您仍想将其放入head标记内，请将js放入window.onload

<script>
     window.onload=function(){   
       var items = document.getElementsByClassName("para");
        var log = document.getElementById("mr");
        log.innerText = items.length;
     }
    </script>

Plunker

Answer 2

你必须记住关于HTML的事情是它从上到下阅读和解析。意味着顶部的东西首先被渲染，而后面的东西则被渲染。将JS放在正文末尾或将其推迟到页面加载通常是一种很好的做法。

＆＃13;

<body>
  <h1 id="mr">This is a header</h1>
  <p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
  <p class="para">
    <mark>here is some more stuff</mark>
  </p>

  <script>
    var items = document.getElementsByClassName("para");
    var log = document.getElementById("mr");
    log.innerText = items.length;
  </script>
</body>

</html>

＆＃13;

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
    function startup() {
    var items = document.getElementsByClassName("para");
    var log = document.getElementById("mr");
    log.innerText = items.length;
    }
</script>
<title>Title</title>
<html lang="en"/>

</head>
<body onload="startup();">
    <header>
        <h1 id="mr">This is a header</h1>
</header>

<nav>
    <a href="index.html">Index</a>
</nav>

<section>
    <h1>Section 1</h1>

    <article>
        <p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
    </article>

    <article>
        <p class="para"> <mark>here is some more shit</mark></p>
    </article>

</section>

<footer>

</footer>
</body>
</html>

脚本在页面加载之前运行，为了解决这个问题，我们在主体加载后运行代码。

Answer 4

将您的js代码放在document.onload事件中的scripts标记中，因为在此事件之后将确保在触发此事件时，DOM元素已加载并准备好由DOM API访问。

 <script>
  document.onload = function(){

        var items = document.getElementsByClassName("para");
        var log = document.getElementById("mr");
        log.innerText = items.length;

  };
 </script>

Answer 5

首先，您的脚本应该在最后帮助加载用户首先看到的内容更快，并且确保所有DOM元素都被加载。第二个我会用log.innerText替换log.innerHTML，因为不知何故log.innerText对我来说真的不起作用，我更喜欢log.innerHTML，因为你可以使用html标签和东西。

所以这是一个至少适用于我的脚本：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Title</title>
  <html lang="en" />

</head>

<body>
  <header>
    <h1 id="mr">This is a header</h1>
  </header>

  <nav>
    <a href="index.html">Index</a>
  </nav>

  <section>
    <h1>Section 1</h1>

    <article>
      <p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
    </article>

    <article>
      <p class="para">
        <mark>here is some more stuff</mark>
      </p>
    </article>

  </section>

  <footer>

  </footer>
  <script>
    var items = document.getElementsByClassName("para");
    var log = document.getElementById("mr");
    log.innerHTML = items.length;
  </script>
</body>

</html>

＆＃13;

不能在html dom中选择id或class

5 个答案: