不能在html dom中選擇id或class

我是新來的HTML，特別是HTML5。不能在html dom中選擇id或class

我試圖選擇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>

來源

2016-03-08 magna_nz

的[爲什麼jQuery的或DOM方法等的getElementById找不到元素？]可能的複製（HTTP：//計算器.COM /問題/ 14028959 /爲什麼此結果jQuery的或-A-DOM的方法 - 例如-AS-的getElementById而不是找到的最元素） –

將你的腳本實際DOM元素之後。 –

當腳本運行時，para和mr都不存在於DOM中。

選項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

來源

2016-03-08 06:32:32 brk

你必須要記住HTML的事情是，它的讀取和解析從頂部到底部。意味着頂部的事物會在底部發生，而事件發生在底部。將JS放在主體的末尾或將其推遲到頁面加載通常是很好的做法。

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

來源

2016-03-08 06:33:07 JustGage

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

腳本運行的頁面加載之前，要解決這個問題，我們運行一次身體負荷的代碼。

來源

2016-03-08 06:33:27

把你的js代碼在document.onload事件中的腳本標籤，因爲這件事之後將確保由時間觸發此事件的DOM元素被加載並可以通過DOM API來訪問。

<script> 
    document.onload = function(){ 

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

    }; 
</script>

來源

2016-03-08 06:33:56 gurvinder372

首先你的腳本應該在這有助於加載用戶首先看到更快，同時它使所有的DOM元素裝載舒爾內容結束。其次，我將與log.innerHTML取代log.innerText因爲莫名其妙log.innerText並沒有真正工作對我來說，我更喜歡log.innerHTML反正因爲你可以使用HTML標籤之類的東西。

因此，繼承人一個腳本，爲我的作品至少：

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

來源

2016-03-08 06:53:04

不能在html dom中選擇id或class

回答

相關問題