не может выбрать id или класс в html dom

Я новичок в HTML и, особенно, HTML5.не может выбрать id или класс в html dom

Я пытаюсь выбрать заголовок с идентификатором 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: // StackOverflow .com/questions/14028959/why-do-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) –

Поместите свой скрипт после фактических элементов DOM. –

Ни пара, ни 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

Первый сценарий должен быть в конце, которые помогают загрузки содержимого пользователь видит первый быстрее, а также это делает Shure, что все DOM элементы загружены. Второй я заменил бы log.innerTextlog.innerHTML, потому что почему-то log.innerText действительно не работает для меня, и я предпочитаю log.innerHTML в любом случае, потому что там вы можете использовать теги html и прочее.

Так Heres скрипт, который работает, по крайней мере для меня:

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

не может выбрать id или класс в html dom

ответ

Смежные вопросы