Ngắn gọn và đơn giản: Bởi vì các yếu tố bạn đang tìm kiếm không tồn tại trong tài liệu (chưa).
Đối với phần còn lại của câu trả lời này, tôi sẽ sử dụng getElementByIdlàm ví dụ, nhưng cũng áp dụng getElementsByTagName, querySelectorvà bất kỳ phương pháp DOM khác mà các yếu tố lựa chọn.
Lý do có thể
Có hai lý do tại sao một yếu tố có thể không tồn tại:
Một yếu tố với ID thông qua thực sự không tồn tại trong tài liệu. Bạn nên kiểm tra kỹ xem ID bạn chuyển có getElementByIdthực sự khớp với ID của một yếu tố hiện có trong HTML (được tạo) không và bạn đã không viết sai ID (ID có phân biệt chữ hoa chữ thường !).
Ngẫu nhiên, trong phần lớn các trình duyệt hiện đại , có triển khai querySelector()và querySelectorAll()phương thức, ký hiệu kiểu CSS được sử dụng để truy xuất một phần tử id, ví dụ: document.querySelector('#elementID')trái ngược với phương thức mà phần tử được lấy bởi phần tử idbên dưới document.getElementById('elementID'); trong lần đầu tiên #nhân vật là điều cần thiết, trong lần thứ hai, nó sẽ dẫn đến yếu tố không được lấy ra.
Yếu tố không tồn tại tại thời điểm bạn gọi getElementById.
Trường hợp sau là khá phổ biến. Trình duyệt phân tích và xử lý HTML từ trên xuống dưới. Điều đó có nghĩa là mọi cuộc gọi đến một phần tử DOM xảy ra trước khi phần tử DOM đó xuất hiện trong HTML, sẽ thất bại.
Hãy xem xét ví dụ sau:
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
Các divxuất hiện sau khi các script. Tại thời điểm này kịch bản được thực thi, nguyên tố này không tồn tại được nêu ra và getElementByIdsẽ trở lại null.
jQuery
Điều tương tự cũng áp dụng cho tất cả các bộ chọn với jQuery. jQuery sẽ không tìm thấy các phần tử nếu bạn viết sai chính tả của bạn hoặc bạn đang cố chọn chúng trước khi chúng thực sự tồn tại .
Một twist được thêm vào là khi không tìm thấy jQuery vì bạn đã tải tập lệnh mà không có giao thức và đang chạy từ hệ thống tệp:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
Cú pháp này được sử dụng để cho phép các kịch bản để tải thông qua HTTPS trên một trang với giao thức https: // và để tải phiên bản HTTP trên một trang với giao thức http: //
Nó có tác dụng phụ đáng tiếc là cố gắng và không tải file://somecdn.somewhere.com...
Các giải pháp
Trước khi bạn thực hiện một cuộc gọi đến getElementById(hoặc bất kỳ phương pháp DOM cho rằng vấn đề), đảm bảo các yếu tố mà bạn muốn truy cập tồn tại, tức là DOM được nạp.
Điều này có thể được đảm bảo bằng cách chỉ cần đặt JavaScript của bạn sau phần tử DOM tương ứng
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
trong trường hợp đó, bạn cũng có thể đặt mã ngay trước thẻ body đóng ( </body>) (tất cả các thành phần DOM sẽ có sẵn tại thời điểm tập lệnh được thực thi).
Các giải pháp khác bao gồm nghe các sự kiện load [MDN] hoặc DOMContentLoaded [MDN] . Trong những trường hợp này, việc bạn đặt mã JavaScript ở đâu không quan trọng, bạn chỉ cần nhớ đặt tất cả mã xử lý DOM trong trình xử lý sự kiện.
Thí dụ:
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
Xin vui lòng xem các bài viết tại quirksmode.org để biết thêm thông tin về xử lý sự kiện và sự khác biệt trình duyệt.
jQuery
Trước tiên hãy chắc chắn rằng jQuery được tải đúng cách. Sử dụng công cụ phát triển của trình duyệt để tìm hiểu xem các tập tin jQuery đã được tìm thấy và sửa URL nếu nó không (ví dụ như thêm http:hoặc https:chương trình ngay từ đầu, điều chỉnh con đường, vv)
Nghe load/ DOMContentLoaded sự kiện chính xác là những gì jQuery đang làm với.ready() [docs] . Tất cả các mã jQuery của bạn có ảnh hưởng đến phần tử DOM nên bên trong đó xử lý sự kiện.
Trong thực tế, hướng dẫn jQuery nêu rõ:
Hầu như mọi thứ chúng ta làm khi sử dụng jQuery đọc hoặc thao tác mô hình đối tượng tài liệu (DOM), chúng ta cần đảm bảo rằng chúng ta bắt đầu thêm các sự kiện, vv ngay khi DOM sẵn sàng.
Để làm điều này, chúng tôi đăng ký một sự kiện sẵn sàng cho tài liệu.
$(document).ready(function() {
// do stuff when DOM is ready
});
Ngoài ra, bạn cũng có thể sử dụng cú pháp tốc ký:
$(function() {
// do stuff when DOM is ready
});
Cả hai đều là tương đương.