Методы 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 и как выполняются сценарии, вы можете быть уверены, что ваш код находит нужные элементы.