javascript - 动态生成的元素存储在 HTML 节点树中的什么位置？

Question

我使用以下 JavaScript 代码行动态创建一个元素:

const element = document.createElement("img");

我能够访问和修改元素的属性，所以它显然存在，但我无法弄清楚它在 HTML 节点树中的存储位置。

element.parentNode 和 element.previousSibling 都返回 null。有谁知道它的实际位置？

Answer 1

使用 document.createElement() 创建元素时，该元素仅存储在内存中，不能通过 element.children 或类似的方法/getter 访问。

要真正访问它，您需要将它附加到 DOM 树中的一个元素。使用许多 DOM 方法之一:

• element.appendChild()
• element.insertAdjacentElement()

完成后，您就可以像往常一样访问该元素。使用众多访问器之一 element.children、element.querySelector() 等

但是您可以访问尚未插入到 dom 中的项目，只要您引用了它们即可。正如您在这里看到的，div 永远不会被插入，但是，我仍然可以从 div 访问子 span，但我无法访问来自 documentElement 的 div 因为它还没有被添加到 documentElement。

let div = document.createElement('div')
let span = document.createElement('span')

div.appendChild(span)

// We can access the child from the div
// Since the span has been added to the div
// Returns "SPAN"
console.log(div.firstChild.tagName)

// We can not access the div from the document
// Since the div wasn't added to the document
// Returns "null"
console.log(document.querySelector('div'))