javascript - HTML 节点树中动态生成的元素存储在哪里?

原文 标签 javascript html

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

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

我能够访问和修改元素的属性,所以它显然存在,但我无法弄清楚它在 HTML 节点树中的存储位置。
element.parentNodeelement.previousSibling都返回 null .有谁知道它的实际位置?

最佳答案

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

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

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

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

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

    相关文章:

    html - Foundation 5顶栏全宽,但内部元素包含在网格中

    javascript - 从运行在 Web 浏览器控件中的 JavaScript 脚本调用 C++ 函数

    javascript - 如果没有回答弹出窗口,则调用一个函数

    javascript - Phonegap暂时禁用横向模式

    python - 正则表达式替换HTML文档中的文本节点

    html - 图像以半 Angular 显示

    javascript - 在 express 应用程序中异步执行 res.render

    javascript - 打开子页面(弹出页面)时如何模糊/禁用父组件?

    javascript - 如何使用 jQuery 在模态对话框中访问 id?

    html - 如何在不滚动的情况下将多个 iframe 放入单个页面?