归档 2015年10月17日

jQuery与原生JavaScript选择HTML元素集合对比
作者是 发布于 在 JavaScript.

通过调用document.getElementsByTagName, document.getElementsByName以及document.getElementsByClassName（部分浏览器不支持），可以返回HTMLCollection对象。表面上，它们与数组很类似，因为它们都包含length属性并且元素都可以通过[index]方式访问。然而，实际上它们并不是数组；诸如push(), slice()与sort()之类的方法不受支持。

考虑下面的HTML文档：

<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</body>

我们使用原生JavaScript的getElementsByTagName方法与jQuery选择器分别获取每一个paragraph节点：

var pCollection = document.getElementsByTagName("p");
var pQuery = $("p");

console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);

它们都返回了相同的节点，因此集合长度都是3：

pCollection.length: 3
pQuery.length: 3

我们现在再向文档中添加一个paragraph元素，然后再观察一下集合：

// add new paragraph
var newp = ...

继续阅读

昨天

明天

归档