存储对DOM元素的引用

时间:2009-04-16 01:16:21

标签: javascript dom reference

在我写的一个特定脚本中,我有许多链接到某些DOM元素的对象。假设每个元素都有唯一的id,每个对象应该只保留元素的id(并且每次都使用document.getElementById),还是将元素存储在属性中?

以下是我的意思的简化示例:

function myThing(elId) {
    this.elId = elId;
}
myThing.prototype.getElValue = function() {
    return document.getElementById(this.elId).nodeValue;
};

// -- vs -- //

function myThing(elId) {
    this.el = document.getElementById(elId);
}
mything.prototype.getElValue = function() {
    return this.el.nodeValue;
};

它有什么不同吗?我应该知道有任何性能问题吗?

2 个答案:

答案 0 :(得分:5)

我会存储元素;当你不是一直不调用document.getElementById时,它往往会使代码更清晰,虽然在你的情况下你可能不需要更改ID或允许没有ID的元素,但是这样做很常见。

(与apphacker不同,我不希望这样做会提高巨大的效率,因为getElementById在浏览器中往往会得到相当好的优化。)

  

我应该了解哪些性能问题?

从JavaScript对象到DOM对象的引用本身很好,但是当DOM对象有一个返回到这样的JavaScript对象的链接时(通常通过事件处理程序),你就有了一个引用循环。这会导致IE6-7泄漏内存,因为它无法释放循环对象。对于小型简单应用程序,您可能不在乎。对于复杂的,长时间运行的应用程序,您可能必须解决该问题,例如通过查找映射/数组间接每个事件处理程序,因此不存在从DOM对象到实际事件处理程序的直接引用。

答案 1 :(得分:3)

存储元素而不是id,查找速度慢且价格昂贵,并为您节省函数调用。我认为一个简单的测试可以证实这一点。