javascript - 文档片段与 `div` 容器

coder 2023-08-07 原文

我搜索了 stackoverflow 问题，发现了几个关于同一主题的问题，但没有一个能提供我正在寻找的广泛答案。大多数答案都集中在性能上，但我也在寻找其他差异。基本上，this one简明扼要地总结了这个问题:

if I create an element (a for example) in a variable but DO NOT APPEND IT TO THE DOM, add elements (divs, tables, etc ) and stuff and after all the work has been done (loops, validations, styling of elements), that element is appended, is it the same as a fragment?

我决定再试一次，看看有没有人能给出好的答案。

那么，我为什么要使用它:

var fragment = document.createDocumentFragment();
var divContainer = document.createElement("div");
var divHeader = document.createElement("div");
divContainer.appendChild( divHeader );
fragment.appendChild( divContainer );
document.getElementById("someElement").appendChild( fragment.cloneNode(true) );

而不是这个:

var divContainer = document.createElement("div");
var divHeader = document.createElement("div");
divContainer.appendChild( divHeader );
document.getElementById("someElement").appendChild( divContainer );

最佳答案

这两种方法在很大程度上是相同的，因为它们都可以用于存储元素而无需立即修改 DOM。不过也有一些问题。

差异:

div 具有原型(prototype)链 HTMLDivElement - HTMLElement - Element - Node - EventTarget，而 document-fragment 具有 DocumentFragment - 节点 - 事件目标。这意味着 div 有更多可用的方法和属性(如 innerHTML)。
当将 div 附加到 DOM 时，整个元素被插入，变量仍然引用该元素。附加一个 document-fragment 插入它的所有内容，留下变量引用一个空片段。

用法`文档片段`:

var fragment = document.createDocumentFragment();
var div1 = document.createElement('div');
var div2 = document.createElement('div');
var div3 = document.createElement('div');

fragment.appendChild(div1);
fragment.appendChild(div2);
div2.appendChild(div3);              //fragment now contains the sub-tree

document.body.appendChild(fragment); //fragment is now an empty document-fragment, and is not in the DOM.

结果:

<body>
    <div></div>       <!--div1-->
    <div>             <!--div2-->
         <div></div>  <!--div3-->
    </div>
</body>

用法`div`:

var container = document.createElement('div');
var div1 = document.createElement('div');
var div2 = document.createElement('div');
var div3 = document.createElement('div');

container.appendChild(div1);
container.appendChild(div2);
div2.appendChild(div3);               //container is now a div with the sub-tree inside.

document.body.appendChild(container); //container is still the div with the sub-tree, but is now in the DOM.

结果:

<body>
    <div>                 <!--container-->
        <div></div>       <!--div1-->
        <div>             <!--div2-->
             <div></div>  <!--div3-->
        </div>
    </div>
</body>

简而言之:

如果您只想插入一个元素(其中包含其他元素)，请使用元素。
如果您想使用 innerHTML 解析文本格式的 html，请使用 元素。
如果要插入多个相邻元素，请使用document-fragment。

关于javascript - 文档片段与 `div` 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38180780/

容器 javascript div code document html dom

有关javascript - 文档片段与 `div` 容器的更多相关文章

ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
Matlab imread（）读到了什么（浅显当复习文档了） - 2
matlab打开matlab，用最简单的imread方法读取一个图像clcclearimg_h=imread('hua.jpg');返回一个数组（矩阵），往往是a*b*cunit8类型解释一下这个三维数组的意思，行数、数和层数，unit8：指数据类型，无符号八位整形，可理解为0~2^8的数三个层数分别代表RGB三个通道图像rgb最常用的是24-位实现方法，即RGB每个通道有256色阶（2^8）。基于这样的24-位RGB模型的色彩空间可以表现256×256×256≈1670万色当imshow传入了一个二维数组，它将以灰度方式绘制；可以把图像拆分为rgb三层，可以以灰度的方式观察它figure(1
ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
Ruby 等同于 Sphinx 文档生成器？ - 2
Ruby有一些不错的文档生成器，例如Yard、rDoc，甚至Glyph。问题是Sphinx可以做网站、PDF、epub、LaTex等。它在重组文本中完成所有这些事情。在Ruby世界中有替代方案吗？也许是程序的组合？如果我也能使用Markdown就更好了。最佳答案自1.0版以来，Sphinx有了“域”的概念，它是从Python和/或C以外的语言标记代码实体(如方法调用、对象、函数等)的方法。有一个rubydomain,所以你可以只使用Sphinx本身。您唯一会缺少的(我认为)是Sphinx使用autodoc从源代码自动创建文档
ruby-on-rails - 在 irb 中阅读文档 - 2
我怀念ipython的一件事是它有一个?为特定功能挖掘文档的运算符。我知道ruby有一个类似的命令行工具，但是我在irb中调用它非常不方便。ruby/irb有类似的东西吗？最佳答案 Pry是IPython的Ruby版本，它支持?命令来查找有关方法的文档，但语法略有不同:pry(main)>?File.dirnameFrom:file.cinRubyCore(CMethod):Numberoflines:6visibility:publicsignature:dirname()Returnsallcomponentsofthef
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby - 使用 Nokogiri 和 Ruby 从 html 文档获取链接和 href 文本？ - 2
我正在尝试使用nokogirigem提取页面上的所有url及其链接文本，并将链接文本和url存储在散列中。FooBar我想回去{"Foo"=>"#foo","Bar"=>"#bar"} 最佳答案这是一个单行:Hash[doc.xpath('//a[@href]').map{|link|[link.text.strip,link["href"]]}]#=>{"Foo"=>"#foo","Bar"=>"#bar"}拆分一点可以说更具可读性:h={}doc.xpath('//a[@href]').eachdo|link|h[link.t
ruby - 如何让 Nokogiri 解析并返回 XML 文档？ - 2
这是一些奇怪的例子:#!/usr/bin/rubyrequire'rubygems'require'open-uri'require'nokogiri'print"withoutread:",Nokogiri(open('http://weblog.rubyonrails.org/')).class,"\n"print"withread:",Nokogiri(open('http://weblog.rubyonrails.org/').read).class,"\n"运行此返回:withoutread:Nokogiri::XML::Documentwithread:Nokogiri::
H2数据库配置及相关使用方式一站式介绍（极为详细并整理官方文档） - 2
目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库？1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动：2.1.2.3启动后控制台页面：2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式

javascript - 文档片段与 `div` 容器

差异:

用法文档片段:

用法div:

简而言之:

有关javascript - 文档片段与 `div` 容器的更多相关文章

随机推荐

用法`文档片段`:

用法`div`: