Làm thế nào tôi có thể phát hiện DOM đã sẵn sàng và thêm một lớp không có jQuery?

Tôi muốn viết lại dòng này mà không cần sử dụng jQuery để nó có thể được áp dụng nhanh hơn (và trước khi tải xuống thư viện jQuery). Điểm mấu là ...Làm thế nào tôi có thể phát hiện DOM đã sẵn sàng và thêm một lớp không có jQuery?

$(document).ready(function() { $('body').addClass('javascript'); });

Nếu tôi thêm nó vào các yếu tố html thay vào đó, tôi sẽ có thể để lại bỏ phần sẵn sàng DOM? Một vấn đề với điều này mặc dù là trình xác nhận hợp lệ không thích thuộc tính lớp trên phần tử html, ngay cả khi nó được chèn với JS.

Vì vậy, làm cách nào tôi có thể viết lại mà không có jQuery?

Nguồn

2009-11-25 alex

Bạn cần có API DOM, bạn không thể làm điều này trong vanilla JS (bạn không thể làm được gì nhiều trong vanilla JS). ;) – Quentin

Chính xác bạn muốn đạt được điều gì? Bạn có muốn nói với CSS rằng JavaScript có sẵn không? Bạn có muốn thực hiện việc này sớm nhất có thể bằng các sự kiện dành riêng cho trình duyệt không? Sự kiện "onload" đơn giản có hiệu quả với bạn không? Mọi đầu vào bổ sung sẽ giúp cung cấp cho bạn câu trả lời đúng. –

@David: jQuery được viết vào lúc nào? –

Nếu bạn muốn tái tạo sự kiện document.ready của jQuery, bạn có thể sử dụng onreadystatechange hoặc DOMContentLoaded sự kiện nếu có:

function domReady() { 
    document.body.className += " javascript"; 
    // ... 
} 

// Mozilla, Opera, Webkit 
if (document.addEventListener) { 
    document.addEventListener("DOMContentLoaded", function(){ 
    document.removeEventListener("DOMContentLoaded", arguments.callee, false); 
    domReady(); 
    }, false); 

// If IE event model is used 
} else if (document.attachEvent) { 
    // ensure firing before onload 
    document.attachEvent("onreadystatechange", function(){ 
    if (document.readyState === "complete") { 
     document.detachEvent("onreadystatechange", arguments.callee); 
     domReady(); 
    } 
    }); 
}

Nguồn

2009-11-25 07:11:45 CMS

Xem thêm: http://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready – user456584

Tại sao bạn tách sự kiện readystatechange? IE8 có kích hoạt sự kiện đó hai lần không? Tại sao? –

@Jan Tôi đoán điều này đã được phiên âm từ nguồn jQuery cũng bổ sung thêm một người nghe dự phòng vào window.onload. Vì vậy, trong nguồn jQuery, lần đầu tiên cuộc gọi lại được gọi là các trình lắng nghe cần được loại bỏ để tránh gọi hai lần, một lần cho mỗi sự kiện. Nhưng kể từ khi mã này không bao gồm dự phòng đó, tôi không nghĩ rằng nó là cần thiết để loại bỏ người nghe. Nhưng tôi chỉ suy đoán thôi. – pgraham

window.onload = function() { 
    var elmt = document.getElementsByTagName('body'); 
    if(elmt){ 
     elmt[0].className = 'javascript'; 
    } 
}

Điều đó nên thực hiện.

EDIT: Đã cập nhật để lấy phần tử theo ID thẻ không phải là ID.

Nguồn

2009-11-25 06:55:02 jaywon

bạn đang tìm kiếm id #body ở đây ... – David

@David, thx dành cho người đứng đầu. không làm nhiều jQuery vì vậy giả định đó là tìm một phần tử bằng ID. – jaywon

Tôi chắc chắn 'onload' được kích hoạt sau' $ (tài liệu) .ready' - tôi nghĩ rằng nó đang chờ đợi cho tất cả các hình ảnh để tải, ví dụ. – Kobi

Tôi không biết về vani JS, nhưng bạn có thể viết:

document.getElementsByTagName('body')[0].className += ' javascript';

ở dưới cùng của trang (trước khi đóng thẻ cơ thể).

Nguồn

2009-11-25 06:55:23 David

'document.getElementsByTagName ('body') [0] === document.body' – alex

Sau khi đóng' body' cũng sẽ hoạt động. Ngay cả sau khi đóng 'html' – oriadam

đơn giản:

window.onload = function() { 
    document.body.className = "javascript"; 
}

Hoặc trong HTML:

<body onload="document.body.className = 'javascript'">...</body>

Trừ khi bạn muốn phân biệt giữa "trước khi onload" và "sau onload", bạn có thể làm điều đó tĩnh:

<body class="javascript">...</body>

Nguồn

2009-11-25 07:05:52

Tôi nghĩ rằng anh ấy đang cố gắng thêm lớp học, để cho biết rằng javascript đã được bật - do đó ví dụ thứ 3 của bạn sẽ không thực hiện được. Ngoài ra, chắc chắn rằng DOMReady kích hoạt trước khi tải (sẽ đợi hình ảnh và tài nguyên bên ngoài) –

Hãy bỏ qua ví dụ thứ 3. Trong tất cả sự công bằng, ông đã không chỉ ra những gì ông muốn đạt được bằng cách đó. –

Bạn đã cố gắng đặt vào cuối phần cuối của cơ thể?

<script> 
    document.body.className = 'javascript'; 
</script>

Nguồn

2009-11-25 09:43:19 Mic

chỉ cần đặt

<script>document.body.className += ' javascript';</script>

trước </body> thẻ này. Giải pháp đơn giản và dễ dàng (và rất gần).

Nguồn

2009-11-25 09:47:46 NilColor

Nếu mục tiêu của bạn là thêm lớp để body ngay lập tức khi trang web được tải, có lẽ để che giấu không-JS-dự phòng các yếu tố, bạn có thể làm điều đó chỉ ngay bên trong thẻ nội dung chứ không phải là chờ đợi bất kỳ sự kiện:

<body> 
    <script type="text/javascript"> 
     document.body.className+= ' javascript'; 
    </script>

(mặc dù nói chung nếu đó là mục tiêu tốt hơn để loại bỏ các yếu tố dự phòng khi bạn thay thế chúng bằng các phần tử theo kịch bản, để nếu một đoạn mã lỗi ra tất cả các thành phần khác trên trang không bị hỏng .)

Đây là cách nhanh nhất để liên kết với các phần tử: làm như vậy ngay sau khi tạo m (bên trong thẻ mở nếu bạn chỉ cần thay đổi các phần tử; ngay sau thẻ đóng nếu bạn cần thay đổi nội dung của chúng). Tuy nhiên cách tiếp cận này có xu hướng xả rác trang với các khối <script> xấu xí, đó là lý do tại sao nhiều người đặt mã ở cuối hoặc sử dụng trình tải/xử lý sẵn sàng.

Nguồn

2009-11-25 10:51:10 bobince

Nếu chỉ xử lý các trình duyệt hiện đại, bạn có thể đặt mã này ngay sau thẻ mở body.

<script> 
    document.body.classList.add("javascript"); 
</script>

Nguồn

2013-03-13 22:39:44 alex

Làm thế nào tôi có thể phát hiện DOM đã sẵn sàng và thêm một lớp không có jQuery?

Trả lời

Các vấn đề liên quan