变量如何将其值绑定到DOM?

时间:2011-06-08 09:52:24

标签: javascript html dom bind

这可能很疯狂,但很长一段时间我都很有趣:)

我想知道一个javascript变量如何绑定它自己在DOM附加到主体之后,例如?

var p = document.createElement('p');
p.innerHTML = 'Hello World';

document.body.appendChild(p);

所以现在我有了这个p变量,它包含该特定段落的精确引用,无论它位于正文中的哪个位置。

p.innerHTML = 'new content';

将轻松找到该段落并更改其值

所以我的问题是......如何进行这种绑定?

如果我想在变量消失后重新创建它? 是否有任何方法可以再次附加它,而无需通过DOM运行并找到它?

我在想,如果DOM中的每个节点都有其特定标识符不是id属性,而是稍后可以引用的某种UUID?

像:

console.log(p.localName); //aoi12e2kj2322444r4t
p = null;

所以我仍然可以恢复该段节点认为这个uuid?

在此环境中,我无法访问任何外部节点属性,例如nameiddata等。

所以我很想知道如何在变量和DOM节点之间创建这种绑定?

2 个答案:

答案 0 :(得分:1)

我相信它会根据您使用的浏览器而改变。没有标准的方法可以做到这一点。目前,您要么使用id,要么迭代dom,直到找到所需的元素。

答案 1 :(得分:0)

在第一行创建绑定,您可以将document.createElement的结果分配给p。这与您为变量赋值的任何其他时间没有什么不同,变量始终将变量名称绑定到值。就脚本而言,没有其他绑定发生。 p是一个HTMLElement,这就是暴露的所有元素。

请注意,对于p.innerHTML = 'new content';,不必找到该元素,因为p已经引用了该元素。这就是DOM的作用:它暴露文档和文档元素。

如果您以后想要对同一元素进行另一次引用,则必须使用DOM方法(例如getElementById)来查找它。这就是他们的目的。

关于DOM如何公开元素,这是在内部实现的,并且因浏览器或库到库而不同(因为DOM不仅仅在浏览器中使用)。