丢失节点参考？(JavaScript的)

Question

丢失节点参考？(JavaScript的)

所以我有这个JS代码:

var pElt = document.createElement("p");
var aElt = document.createElement("a");
aElt.textContent = "Text";
aElt.href = "#";
pElt.appendChild(aElt);

aElt.style.color = "red";
pElt.innerHTML += "<span> and more text</span>";
//aElt.style.color = "red";

document.getElementById("content").appendChild(pElt);

console.log(aElt); // always show the red attribute

Run Code Online (Sandbox Code Playgroud)

这里可能有一些答案,但我甚至无法描述问题; 所以我选择了"丢失节点参考",尽管这不是这里发生的事情.(编辑:事实上,这就是这里发生的事,傻:))

所以...请按原样尝试代码.它有效,链接是红色的,每个人都很开心.现在评论"aElt.style.color ="red";" 行,然后取消注释另一行,下面两行.

...它不起作用,链接仍然显示为黑色.我认为链接到我的节点的指针要么不再有效,要么aElt被移动到不同的内存地址.但是当我输入"console.log(aElt)"时,它正确地输出节点(好吧......我认为它确实如此),所以我不明白为什么在.innerHTML改变后我无法访问它.

我感兴趣的是幕后发生的事情:)

谢谢!

index.html:

<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8"/>
        <title>Question!</title>
    </head>

    <body>
        <div id="content"></div>
        <script src="script.js"></script>
    </body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Poi*_*nty 8

当你通过设置它来覆盖元素的内容时innerHTML,你实际上将<a>后面的内容转换为HTML 文本,附加(作为文本),然后重新创建新的 DOM节点.您的旧参考仍然是指<a>您创建的原始参考.

您可以创建与创建它相同的方式<a>,并将该节点附加到而不是覆盖.innerHTML.

归档时间：	8 年，9 月前
查看次数：	50 次
最近记录：	8 年，9 月前