标签: documentfragment

假设我有一个这样的数组:

var content = [ $('<p>...</p>'), $('<p>...</p>') ];

我需要得到连接元素的标记.所以我需要将content"转换为原始字符串:<p>...</p><p>...</p>".

怎么能这么容易呢？似乎框架中应该有一些东西可以做到这一点.

不知怎的,可能会转换content成文档片段并调用.html()文档片段来获取标记？

我一直在寻找在Backbone.js应用程序中使用documentFragments,并想知道为什么我看到在将documentFragment附加到父DOM元素时使用"cloneNode"的示例.

这里可以看到一个例子.如果你低头看看DocumentFragment部分,你会看到:

oFrag = document.createDocumentFragment();
for (var i = 0, imax = aElms.length; i < imax; i++) {
 oFrag.appendChild(aElms[i]);
}

o.innerHTML = '';
o.appendChild(oFrag.cloneNode(true));

为什么"oFrag"被克隆而不是仅仅附加它？另一篇博客文章没有使用"cloneNode"(作为比较).

使用DocumentFramgment允许我们将DOM元素相互连接而不会导致浏览器重排(即使用脱机DOM树).像jQuery这样的很多库都使用文档片段来提高性能.

文档片段可以具有复杂的结构.例如,假设它代表如下:

<div>
   <span>
       <a href='asd'>asd</a>
   </span>
   <span>
       <a href='asd2'>asd2</a>
   </span>
   <div>
       <div>
          Hello World
       </div>
   </div>
</div>

或包含多个子项的文档片段:

<h2>Title 1</h2>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<h2>Title 2</h2>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>

通常,当我们完成构建片段时,我们将它附加到主DOM树.

当我们这样做时会发生多少次回流？它取决于文档片段的直接子节点数吗？

更新:

我收到了谷歌Chrome团队成员Addy Osmani的回复:

只有一个DOM重排.PS:我们更倾向于将reflow称为布局,因为它基本上是一个触发页面布局/重绘的事件.

这是我如何在 Java 中解析格式良好的 XML 文档：

DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();

// text contains the XML content
Document doc = builder.parse(new InputSource(new StringReader(text)));

文本示例如下：

<a>
  <b/>
</a>

如何解析 DocumentFragment？例如，这个：

<a>
  <b/>
</a>
<a>
  <b/>
</a>

注意：org.w3c.dom如果可能，我想使用并且不使用其他库/技术。

所以我读过jQuery在内部使用文档片段来加快渲染速度.但我想知道是否有人知道jQuery是否会在这种情况下使用createDocumentFragment我将使用每个循环将img元素附加到DOM？

var displayArray = []; // Lots of img elements

$.each(displayArray, function()
{
    $('#imgSection').append(this);
});

或者我是否需要使用此代码以减少浏览器重排的次数？

var displayArray = []; // Lots of img elements
var imgHolder = $('<div/>');

$.each(displayArray, function()
{
    imgHolder.append(this);
});

$('#imgSection').append(imgHolder);

此外,displayArray由其他代码(此处未显示)填充,该代码根据JSON文件中的路径创建img元素.

谢谢你的任何建议.

查看有关ShadowDOM的文章,似乎是对DocumentFragments的增强.ShadowDOM的真正好处是什么？CSS特异性？我不能用Fragments做大致相同的事情吗？

我正在寻找各自的功能列表.例如,两者似乎都允许您在内存中组装d​​om树并离开主渲染路径.但是,ShadowDOM似乎具有作用域CSS的额外好处.

在什么情况下你会使用ShadowDOM vs你想要使用DocumentFragments的地方？

UPDATE

在仔细研究了这个之后,我看到这两种技术是完全正交的.

注意:由于问题已经结束,我自己无法回答.我最初把我的发现的细节放在下面的评论中,但想到更多的人会在这里查看文本.

Document Fragments是一个Javascript/DOM构造工具,用于创建DOM之外的非heirrchical节点集合(每个节点可以是其他节点的父节点).它们本质上是节点集合的包装器,一旦片段附加到DOM就会被放弃.DocumentFragments允许您在同一级别收集多个节点,并将它们作为兄弟节点附加到另一个DOM节点.

Shadow Dom就是在更大的渲染DOM中隔离副作用.ShadowDom允许您使用封装样式创建沙盒可重用组件.当基于ShadowDom的组件添加到更大的Web应用程序时,其CSS样式不会泄漏到应用程序的其余部分,应用程序自己的样式也不会影响组件的呈现.

请注意CSS组合器,例如/deep/,::shadow存在用于从父dom样式化(和选择)shadowDom组件,但这些组件在不久的将来被弃用.因此,建议使用ShadowDOM的可重用组件依赖CSS变量进行样式设置,如果它们打算由使用它们的应用程序进行自定义.

我按照MDN 上给出的说明使用<template>. 与示例中给出的略有不同，我的代码是：

<template id="template">
    <tr>
        <td name="id"></td>
        <td name="name"></td>
        <td name="size"></td>
        <td name="Status">
        </td>
    </tr>
</template>

// ...
const item = document.importNode(template.content, true);
item.getElementsByName("id")[0].textContent = token;
item.getElementsByName("name")[0].textContent = file.name;
item.getElementsByName("size")[0].textContent = file.size;
fileList.appendChild(item);
// ...

然而，似乎item，其中__proto__isDocumentFragment没有getElementsByName方法。现在有getElementById和，这对我来说很困惑吗querySelector？

有什么理由吗？

在相关情况下，我的浏览器是 FireFox Quantum 69.0.1 和 Chrome Canary 79.0.3918.0。

我需要对 a 进行一些 DOM 手术DocumentFragment，并且我正在尝试使用 XPath 来查找需要修改的节点。但是，我不知道如何开始document.evaluate处理片段。我试过

fragment.ownerDocument.evaluate(
    '//*',
    fragment.ownerDocument,
    null,
    XPathResult.ANY_TYPE,
    null
)

但这没有用。

有时您可能需要从您的反应应用程序渲染Web组件.

Web组件通常使用特殊<template> ... </template>标记.但是,如果我尝试使用这样的反应来渲染这样的标记:

render() {
  return (
    <template>
      <div>some content</div>
    </template>
  )
}

然后我的网络组件无法正常工作.

考虑这个template带有两个 flatx-element和一个嵌套的HTML 。

<template id="fooTemplate">
  <x-element>Enter your text node here.</x-element>
  <x-element>
    <x-element>Hello, World?</x-element>
  </x-element>
</template>

如何初始化（触发构造函数）从fooTemplate文档片段克隆的所有自定义元素而不将其附加到 DOM，也不是通过使用is="x-element";扩展内置元素；要么是整个片段。

class XElement extends HTMLElement {
  constructor() { super(); }
  foo() { console.log( this ); }
} customElements.define( 'x-element', XElement );

const uselessf = function( temp ) {
  const frag = window[ temp ].content.cloneNode( true );

  /* Your magic code goes here:
  */ do_black_magic( frag );

  for (const e of  frag.querySelectorAll('x-element') )
    e.foo(); // This should …