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

标签 javascript html

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

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

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

element.parentNodeelement.previousSibling 都返回 null。有谁知道它的实际位置?

最佳答案

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

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

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

但是您可以访问尚未插入到 dom 中的项目,只要您引用了它们即可。正如您在这里看到的,div 永远不会被插入,但是,我仍然可以从 div 访问子 span,但我无法访问来自 documentElementdiv 因为它还没有被添加到 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'))

关于javascript - 动态生成的元素存储在 HTML 节点树中的什么位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53345719/

相关文章:

javascript - 更新/检索函数中的私有(private)计数器

javascript - 使用 onclick 或类似功能隐藏和显示输入字段

html - 为什么在访问链接后没有显示正确的 sprite?

html - 为什么将 line-height 设置为与 content height 相同的文本垂直居中?

html - 如何使用 BEM 方法为自适应网页构建 css?

html - CSS :target in an accordion menu with one class

javascript - 正则表达式在第一个字符后强制使用单个空格

javascript - <pattern> & required 不适用于动态创建的表单

javascript - 单击时更改 javascript 中的类

javascript - 如何使ajax请求异步?