Javascript 无法在html dom中选择id或类_Javascript_Html

Javascript 无法在html dom中选择id或类

javascript html

Javascript 无法在html dom中选择id或类,javascript,html,Javascript,Html,我不熟悉HTML，尤其是HTML5 我试图选择id为mr的标题，并将其更改为类为para的项目数的长度在我的浏览器视图中似乎没有任何变化不知道为什么。谢谢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> var items = document.getElementsByClassName("para");

我不熟悉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>

脚本运行时，DOM中不存在para和mr

选择1

只需在关闭body标记之前放置脚本部分

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

关于HTML，您必须记住的是它是自上而下读取和解析的。也就是说，位于顶部的东西会先渲染，而位于底部的东西会稍后渲染。通常，将JS放在正文的末尾或将其延迟到页面加载时，这是一种很好的做法

这是一个标题这是一个很好的例子

这里还有一些东西

var items=document.getelementsbyclassnamepra； var log=document.getElementByIdmr； log.innerText=items.length；

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

将您的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>

首先，您的脚本应该位于末尾，这有助于更快地加载用户首先看到的内容，并且使舒尔能够加载所有DOM元素。第二，我会用log.innerHTML替换log.innerText，因为log.innerText并不适合我，我更喜欢log.innerHTML，因为在那里你可以使用html标记和其他东西

这是一个至少对我有用的脚本：标题这是一个标题第一节这是一个很好的例子

这里还有一些东西

var items=document.getelementsbyclassnamepra； var log=document.getElementByIdmr； log.innerHTML=items.length；

在实际DOM元素之后放置脚本的可能重复。

<!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>

 <script>
  document.onload = function(){

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

  };
 </script>