- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对以下示例中的 createDocumentFragment() 有疑问:
<p>Click the button to make changes to a list item, using the createDocumentFragment method, then appending the list item as the last child of the list.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var d = document.createDocumentFragment();
d.appendChild(document.getElementsByTagName("LI")[0]);
d.childNodes[0].childNodes[0].nodeValue = "Milk";
document.getElementsByTagName("UL")[0].appendChild(d);
}
</script>
来自: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_createdocfrag
为什么是 childNodes[0].childNodes[0]
而不是只有一个 childNodes[0]
?
最佳答案
childNodes
是一个 NodeList (表现得非常像一个数组)包含特定节点的所有直接后代。
想象一下这样的结构:
<div id="a">
<div id="a_0">
<div id="a_0_0"></div>
<div id="a_0_1"></div>
</div>
<div id="a_1"></div>
</div>
现在,调用 document.getElementById("a")
将返回最外层的节点。
var a = document.getElementById("a");
console.log(a.childNodes[0].id); // would show "a_0"
console.log(a.childNodes[1].id); // would show "a_1"
console.log(a.childNodes[0].childNodes[0].id); // would show "a_0_0"
此外,节点中的文本也是一个单独的节点 (a Text node)。
想象一下这样的结构:
<div id="a">This is some text</div>
然后,再次使用上面的示例,您需要像这样访问文本:
var a = document.getElementById("a");
console.log(a.data) // Will log "undefined"
console.log(a.childNodes[0].data) // Will log "This is some text"
您可以使用快捷方式 firstChild
而不是 childNodes[0]
,它会返回相同的结果。
由于以下情况,这种将文本节点视为单独节点的行为是必要的:
<div id="a">This text contains <strong>strong</strong> text</div>
这里,节点 a
有三个子节点:一个文本节点(“This text contains”)、一个 strong
节点和一个附加文本节点( “文本”)。 strong
节点包含一个文本节点(“strong”)。因为这些元素位于文档层次结构中的同一级别,所以它们必须彼此分开。
关于JavaScript createDocumentFragment(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44577638/
我对以下示例中的 createDocumentFragment() 有疑问: Click the button to make changes to a list item, using the cr
我正在尝试通过对应用程序中的现有表进行一些更改来重新格式化表。我在互联网上搜索了以下错误,但没有找到任何解决方案。 我收到的错误如下: Cannot read property 'createDocu
我试图从 openwheater 应用程序打印表中的一些 JSON 数据。我在互联网上搜索了解决方案,但找不到真正的解决方案。我是初学者,所以这可能是一个非常简单的错误 希望有人能帮助我走上正确的道路
我正在学习 HTML DOM 模型,但遇到了一个问题。我无法理解 createDocumentFragment() 方法在以下代码中的工作原理。 HTML 代码: CoffeeTea Try i
在一个函数中,我经常创建 DocumentFragment 对象,因此我喜欢在过程完成后将其删除。DocumentFragment 没有父级,因此我无法使用例如: node.parentNode.re
这个问题已经有答案了: Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (5 个回答) 已关闭 4 年前。 所以
我读到 createDocumentFragment 比在 for 循环中将元素一个一个地附加到 DOM 快得多,例如见here . 我想做什么: 在文档片段中创建一个表列。此列应包含数组中的数字(例
如果您使用 document.createDocumentFragment() 创建一个 DocumentFragment,将子项附加到它,然后将缓冲区附加到某物,缓冲区的所有子项似乎都消失了。示例:
我正在尝试实现 magnific popup 我有以下链接load json 当我单击链接时,灯箱处于加载状态并抛出异常,如下所示 Uncaught TypeError: Cannot call me
我试图找出使用 document.createDocumentFragment 之间的区别与使用 HTML 相比元素。 他们在行为或表现上有区别吗? 最佳答案 两个和 document.create
我正在玩弄一个函数并得到 b.createDocumentFragment is not a function (jQuery) 我的职能是 function tweetCount(url) {
我正在尝试运行此循环,以便创建特定数量的列并向每列添加正方形。目标是在一个循环中完成所有这一切,但我的循环将成功运行一次,然后退出。 function gridBuilder(columns,rows
是否可以在将元素附加到文档之前在 documentFragment 内部通过其 ID 引用元素? 例如: var docFragment = document.createDocumentFragme
我正在尝试将新创建的元素附加到 div,然后将 div 附加到文档片段,但它没有按预期工作。请帮我确定我缺少的东西。 //array of values to look up let channels
如何使用 createDocumentFragment 一次创建七个嵌套的 div 元素? 我想创建一个容器 A,其中包含 A1、A2、A3 和 A4,然后在 A2 中创建 A2a 和 A2b。 注意
我正在尝试获取网页并加载到 bootstrap 2.3.2 弹出窗口中。到目前为止,我有: $.ajax({ type: "POST", url: "AjaxUpdate/getHtml",
在页面启动期间,我尝试向 DOM 添加一个元素。 我有以下代码: $(document).ready(function () { $(document).prepend(""); }); 我已
我想用 Javascript 添加大量 html,当我尝试添加 时出现问题之后一切正常: 这是我的 HTML: 这是我的脚本: var sec_nom='wa'; document.querySe
我目前正在使用 Meteor 框架构建一个网站。现在,我正在尝试获取它,以便当我单击 DOM 中的某个元素(通过 handle 呈现)时,新元素会附加到当前单击的元素。我正在使用 jquery 执行此
据我所知,文档片段的好处是它们不会导致回流事件,直到片段被插入到 DOM 中。听起来很合理,但似乎非 DOM 元素也不会导致重排。 例如: // with document fragment var
我是一名优秀的程序员,十分优秀!