2013-06-14 35 views
29

Tôi đã gặp sự cố.Sự khác nhau giữa việc đặt kịch bản vào đầu và phần thân là gì?

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript"> 
    alert(document.getElementsByTagName("li").length); 
    </script> 
    <title>purchase list</title> 
</head> 
<body> 
    <h1>What to buy</h1> 
    <ul id="purchases"> 
    <li> beans</li> 
    <li>Cheese</li> 
    </ul> 
</body> 

Khi tôi đưa kịch bản trong đầu, kết quả cho thấy 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
         "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Shopping list</title> 
</head> 
<body> 
    <h1>What to buy</h1> 

    <ul id="purchases"> 
    <li>Cheese</li> 
    <li>Milk</li> 
    <script type="text/javascript"> 
    alert(document.getElementsByTagName("li").length); 
    </script> 
    </ul> 
</body> 

Khi tôi cố gắng đưa script trong cơ thể, kết quả cho thấy 2. tại sao có sự khác biệt như vậy? sự khác biệt chính là gì?

+0

Bởi vì tại thời điểm bạn gọi đó là vào đầu, các 'li' chưa tồn tại (Theo như DOM có liên quan) – George

+1

Bạn nên đặt tất cả JavaScript của mình (không phải thư viện mà JS làm việc mà trang đó sử dụng) ở cuối trang. Đối với các thư viện, bạn nên "bao gồm" chúng trong '' .Lưu ý rằng, trình duyệt đang hiển thị mã từ trên xuống dưới. – Kyslik

+2

bản sao có thể có của [Javascript - head, body hoặc jQuery?] (Http://stackoverflow.com/questions/10994335/javascript-head-body-or-jquery) –

Trả lời

16

Sự khác biệt giữa việc đặt tập lệnh vào phần đầu và phần nội dung là gì?

Thời gian chạy.

Khi tôi đưa kịch bản trong đầu, kết quả cho thấy danh sách 0 Shopping

Các yếu tố bạn đang cố gắng truy cập không tồn tại khi kịch bản chạy (kể từ khi họ xuất hiện sau khi kịch bản trong tài liệu).

Lưu ý rằng bạn có thể viết một kịch bản để cho một hàm được gọi sau (đối với các giá trị khác nhau của sau bao gồm "khi toàn bộ tài liệu đã được nạp") sử dụng event handlers.

+0

Bạn có thể giải thích lý do tại sao tôi có thể lấy ví dụ, innerHTML của một phần tử có tập lệnh từ đầu, nhưng tập lệnh từ câu hỏi không thể nhận được chiều dài. Cảm ơn bạn! – Borna

+0

@Borna - Xem đoạn cuối của câu trả lời. – Quentin

+2

Tôi không thực sự thấy một câu trả lời ở đó ... Tôi hiểu những gì tôi có thể đạt được với xử lý sự kiện, nhưng đó không phải là những gì tôi yêu cầu bạn. Tôi muốn biết tại sao kịch bản từ đầu có thể xử lý element.innerHTML nhưng element.lenght không thể. Nó chỉ là tôi đã nhầm lẫn bởi vì bạn nói rằng các yếu tố không tồn tại nếu cố gắng truy cập nó từ một kịch bản trên các yếu tố (thẻ đầu trong trường hợp của chúng tôi). Hãy cố gắng hiểu tôi, cảm ơn bạn. – Borna

4

Đầu sẽ được hiển thị trước Nội dung. Nếu bạn đang cố gắng truy cập vào các thẻ li của mình trong đầu, câu trả lời rõ ràng là chúng không được tạo cho đến khi trình duyệt hiển thị phần nội dung và do đó không thể tham chiếu được.

7

Thật đơn giản, JavaScript sẽ đi từ trên xuống, trừ khi bạn yêu cầu nó làm điều gì đó khác. Vào thời điểm nó đến các phần tử li, mã JavaScript đã được hoàn thành.

Tuy nhiên, nếu bạn muốn giữ nó trong đầu, bạn có thể sử dụng hàm document.ready và nó sẽ chỉ tải sau khi HTML được tải.

1

Khi tập lệnh được bao gồm trong phần đầu, chúng tải hoặc chạy trước nội dung của trang. Khi bạn đưa chúng vào phần nội dung, chúng tải hoặc chạy sau html trước đó. Nó thường là thực hành tốt để đặt kịch bản càng gần phần cuối của cơ thể càng tốt.

3

Khi bạn gọi:

alert(document.getElementsByTagName("li").length); 

Bạn muốn có được một yếu tố không tồn tại được nêu ra. bởi vì đầu là thứ đầu tiên chạy khi bạn tải trang.

nó đang tìm kiếm phần tử li nhưng chưa có ở đó khi đầu tải.

Bạn phải đặt nó trong cơ thể bởi vì sau đó, các mục danh sách tồn tại. sau đó nó hoạt động.

2

Bởi vì tại thời điểm bạn gọi nó trong đầu, li chưa tồn tại (Theo như DOM là có liên quan) - F4r-20 1 phút trước

này là đúng . Nhưng, hãy thử điều này:

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript"> 
    window.onload = function(){ alert(document.getElementsByTagName("li").length); } 
    </script> 
    <title>purchase list</title> 
</head> 

<body> 
    <h1>What to buy</h1> 
    <ul id="purchases"> 
    <li> beans</li> 
    <li>Cheese</li> 
    </ul> 
</body> 
1

Nếu bạn đặt tập lệnh vào đầu, mã javascript được thực thi ngay cả trước khi điều khiển trong thẻ nội dung được hiển thị. Vì vậy, nếu bạn muốn giữ các tập lệnh của mình trong thẻ head, hãy đảm bảo chúng được thực thi sau khi tải xong. Dưới đây là ví dụ:

<script type="text/javascript"> 
function MyFunction() { 
    alert(document.getElementsByTagName("li").length); 
} 
window.onload = MyFunction; 
</script> 
Các vấn đề liên quan