Методы jQuery и DOM, такие как document.getElementById и $(“#id”), обычно используются для поиска элементов на веб-странице и управления ими. Однако иногда эти методы не могут найти нужный элемент, что приводит к скрытым сбоям или ошибкам, таким как

«Uncaught TypeError: невозможно установить для свойства onclick значение null»

or

«Uncaught TypeError: Не удается прочитать свойство addEventListener со значением null».

При работе с методами jQuery или DOM, такими как document.getElementById, может быть неприятно, когда элемент, который вы пытаетесь найти, не найден. Для этого есть несколько возможных причин, и в этой статье мы рассмотрим некоторые из наиболее распространенных.

Наиболее распространенные причины

Одна из наиболее распространенных причин того, что методы jQuery или DOM не находят элемент, заключается в том, что код JavaScript помещается перед элементом DOM. Браузеры анализируют HTML-документы сверху вниз, поэтому элементы добавляются в DOM, а скрипты выполняются по мере их обнаружения. Это означает, что порядок вашего кода имеет значение. Если ваш скрипт пытается найти элемент, который появляется позже в разметке, он не сможет его найти, потому что этот элемент еще не добавлен в DOM.

Рассмотрим следующий пример:

<script>
console.log(document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
console.log(document.getElementById("test")); // <div id="test">test div</div>
</script>

В этом примере первый скрипт пытается найти элемент с идентификатором «test», но не может, потому что элемент еще не добавлен в DOM. Однако второй скрипт может найти элемент, потому что он выполняется после того, как элемент был добавлен в DOM.

3 решения с короткими примерами

Итак, что вы можете сделать, чтобы исправить это? Есть несколько вариантов:

  • Переместите свой сценарий. Один из вариантов — просто переместить свой сценарий вниз по разметке, минуя элементы, к которым вы хотите получить доступ.
<body>
  <button id="test">click me</button>
  <script>
    document.getElementById("test").addEventListener("click", function() {
      console.log("clicked:", this);
    });
  </script>
</body><!-- closing body tag -->
  • Атрибут defer: если вы связываете внешний скрипт, вы можете использовать атрибут defer, который указывает браузеру выполнить скрипт после того, как документ будет проанализирован.
<script defer src="script.js"></script>
  • Документ готов. Другой вариант — использовать функцию готовности документа jQuery, которая позволяет выполнять код только после полной загрузки документа.
$(document).ready(function() {
  console.log(document.getElementById("test")); // <div id="test">test div</div>
});

Выкуп

Это лишь некоторые из возможных причин, по которым методы jQuery или DOM не находят элемент, и несколько способов исправить это. Понимая порядок, в котором элементы добавляются в DOM и как выполняются сценарии, вы можете быть уверены, что ваш код находит нужные элементы.