Cách chuyển đổi document.write sang getElementById hoặc getElementsByClassName

Mình viết bài này vì mình thấy nó thật sự cần thiết trong Javascript mà khi các bạn viết vẫn thường sử dụng document.write để cho ra một kết quả nào đó. Các đoạn Javascript sử dụng trong Blogspot đó là các đoạn script về thời gian, feed lấy dữ liệu bài viết gần đây, bài viết liên quan hay nhận xét gần đây.

Nguyên nhân bạn cần chuyển đổi document.write sang document.getElementById() hoặc document.getElementsByClassName() là bạn có thể đặt script trên </head> hay trước </body> và sau đó đặt class hoặc id vào chỗ cần hiển thị.

Điều này có tác dụng không trang bị giựt khi tải trang ví dụ khi bạn nhấn F5 tải lại trang khi thanh cuộn lên trên thì menu sẽ bị giựt từ phải qua trái đó là do bạn đặt script trực tiếp vào menu thay vì đặt class hoặc id hiển thị.

Lấy ví dụ trong đoạn script có đoạn lấy kết quả hiển thị dữ liệu cho nhận xét mới khi đặt trực tiếp vào nơi muốn hiển thị kết quả như sau:

Copy

<script>

....

document.write('<li><div class="rc_avatar"><img src='+commentimagesrc+' alt='+commentAuthor+' /></div><div class="rc_block"><div class="rc_header"><span class="rc_user"><a rel="nofollow" href='+commentUri+' title='+commentAuthor+' target="_blank">' +commentAuthor+ '</a></span><span class="rc_date"><a rel="nofollow" href='+commentUrl+' target="_blank">'+commentpublished+'</a></span></div><p class="rc_content">' +commentContent+ '</p></div></li>');

...

</script>

Thay vào đó bạn có thể sử dụng document.write sang document.getElementById() như sau:

Copy

<script>

....

document.getElementById("recent-comments").innerHTML += '<li><div class="rc_avatar"><img src='+commentimagesrc+' alt='+commentAuthor+' /></div><div class="rc_block"><div class="rc_header"><span class="rc_user"><a rel="nofollow" href='+commentUri+' title='+commentAuthor+' target="_blank">' +commentAuthor+ '</a></span><span class="rc_date"><a rel="nofollow" href='+commentUrl+' target="_blank">'+commentpublished+'</a></span></div><p class="rc_content">' +commentContent+ '</p></div></li>';

...

</script>

Hoặc document.getElementsByClassName()

Copy

<script>

....

document.getElementsByClassName("recent-comments")[0].innerHTML += '<li><div class="rc_avatar"><img src='+commentimagesrc+' alt='+commentAuthor+' /></div><div class="rc_block"><div class="rc_header"><span class="rc_user"><a rel="nofollow" href='+commentUri+' title='+commentAuthor+' target="_blank">' +commentAuthor+ '</a></span><span class="rc_date"><a rel="nofollow" href='+commentUrl+' target="_blank">'+commentpublished+'</a></span></div><p class="rc_content">' +commentContent+ '</p></div></li>';

...

</script>

Bạn có thể đặt đoạn đoạn script này trước </head> hay trước </body> và sau đó sử dụng id hoặc class vào nơi muốn hiển thị kết quả ví dụ như menu, widget...

Copy

<div id="recent-comments"></div>

Hoặc

Copy

<div class="recent-comments"></div>

Rút gọn lại cách chuyển đổi document.write() sang document.getElementById() hoặc document.getElementsByClassName() như sau:

Copy

document.write(); chuyển thành document.getElementById("id").innerHTML += '';

Hoặc

Copy

document.write(); chuyển thành document.getElementsByClassName("class")[0].innerHTML += '';

Do kiến thức về Javascript mình còn nhiều hạn chế nên chỉ viết tới đây thôi. Các bạn có thể tham khảo thêm trên mạng. Chấm hết bài!!!

Nội dung chính