Tôi luôn bị nhầm lẫn giữa HTMLCollections, đối tượng và mảng khi nói đến DOM. Ví dụ...
- Sự khác biệt giữa
document.getElementsByTagName("td")và là$("td")gì? $("#myTable")và$("td")là các đối tượng (đối tượng jQuery). Tại sao console.log cũng hiển thị mảng các phần tử DOM bên cạnh chúng và chúng không phải là đối tượng và không phải là một mảng?- Tất cả các "NodeLists" khó nắm bắt là gì và làm cách nào để chọn một?
Cũng vui lòng cung cấp bất kỳ diễn giải nào của tập lệnh dưới đây.
Cảm ơn bạn
[123,"abc",321,"cba"]=[123,"abc",321,"cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= Node { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...}
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= <table id="myTable">
document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]
document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]
$("#myTable")= Object[table#myTable]
$("td")= Object[td, td, td, td]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Collections?</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
console.log('[123,"abc",321,"cba"]=',[123,"abc",321,"cba"]);
console.log('{123:123,abc:"abc",321:321,cba:"cba"}=',{123:123,abc:"abc",321:321,cba:"cba"});
console.log('Node=',Node);
console.log('document.links=',document.links);
console.log('document.getElementById("myTable")=',document.getElementById("myTable"));
console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow"))
console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td"));
console.log('$("#myTable")=',$("#myTable"));
console.log('$("td")=',$("td"));
});
</script>
</head>
<body>
<a href="#">Link1</a>
<a href="#">Link2</a>
<table id="myTable">
<tr class="myRow"><td>td11</td><td>td12</td></tr>
<tr class="myRow"><td>td21</td><td>td22</td></tr>
</table>
</body>
</html>
document.querySelectorAll('td')và$('td'). (b) Sự khác biệt cơ bản là jQuery hoạt động với kiểu đối tượng của riêng nó, trong đó có chứa một tập hợp các phần tử HTML được đánh số ; bộ sưu tập này không phải là bộ sưu tập nào ở trên và đối tượng jQuery về cơ bản là một trình bao bọc xung quanh các phần tử DOM thực sự.