标签: documentfragment

根据a的内容<template>,我想将其内容包装在容器中,以便更容易/一致地遍历.如果内容<style>,并<one-other-element>在顶层,我会离开它是.否则,那里的任何东西都会被包裹起来<div>.

最初我的代码是这样的:

var hasCtnr = template.content.querySelector(':scope > :only-child, :scope > style:first-child + :last-child') != null;

但是,我注意到它不起作用 - 也就是说,hasCtnr总是如此false.所以,我做了一个简化的测试用例(jsfiddle).如您所见,:scope使用常规DOM元素.但是,它似乎不适用于DocumentFragments.我知道这项技术是新的/实验性的,但这是一个错误还是我做错了什么？

如果我使用jQuery,它可以工作......但我的猜测是因为jQuery手动执行某些操作.

var hasCtnr = !!$(template.content).children(':only-child, style:first-child + :last-child').length;

顺便说一句,我只关心Chrome/Electron的支持.

这是jsfiddle内联:

var nonTmplResult = document.querySelector('#non-template-result');
var tmplResult = document.querySelector('#template-result');

var grandparent = document.querySelector('#grandparent');
var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

var who = grandparent.querySelector(':scope > div');
if (who === parent) { …

我循环遍历列表,需要为每个列表元素创建一个jQuery Mobile单选按钮.所有的单选按钮都应该放在一个div class="radio-controls"- 一旦完成 - 附加到DOM.

这是我正在尝试的:

    var label = $("<label/>").attr("data-" + $.mobile.ns + "iconpos", "notext");
      barrel = [];

    for (var i = 0; i < myListitems.length; i += 1) {
      var item = myListitems[i];

      barrel.push(
          $("<input type='radio' name='radio-" + this.uuid + "' value='radio-" + this.uuid + "-" + i +"' />" )
            .wrap(label)
            .checkboxradio()
        );
      }
    }

在循环之后,我有一个jQuery数组,我需要追加它.

但是makeArray失败并返回

context is undefined

在jQuery中

 if ( ( context.ownerDocument || context ) !== document ) …

有一段时间,当我在Chrome中检查输入时,我会看到那些奇怪的#document-fragment灰色元素.我也注意到有时会有更多,有时候会有更多.

这些是什么东西？有没有办法将它们隐藏在检查员中？

第一个日志返回一个完整的li元素，而第二个返回一个空的DocumentFragment。为什么？我在任何文档中都找不到有关该行为的任何信息。

<template id="my-template">
    <li>foo</li>
</template>

<ul id="main">
</ul>

<script>
    var main = document.getElementById('main');
    var fooTemplate = document.getElementById('my-template');
    var foo = fooTemplate.content.cloneNode(true);

    console.log(foo);
    main.appendChild(foo);
    console.log(foo);
</script>

我认为 DocumentFragment 的全部意义在于能够在不接触 DOM 的情况下构建内容，直到它准备就绪。

鉴于 DocumentFragment 不支持innerHTML，它可能有点乏味。另一方面，一旦构建完成，就可以很容易地通过片段本身将内容添加到现有的 DOM 节点。

如果我创建一个div而不将它添加到 DOM，我可以按照我喜欢的方式填充它，包括innerHTML. 据我所知，它应该不会对性能产生额外的影响。

是否有一种简单的方法（即在一行左右）将现有 DOM 节点的内容复制到 DocumentFragment 中？该过程如下所示：

var div=document.createElement('div');
var fragment=document.createDocumentFragment();
div.innerHTML='…';
//  copy contents to fragment
//  etc

这样我就可以两全其美。

回答

以下是@KevBot 的答案，包含在示例中：

var divTest=document.querySelector('div#test');

var html='<p>One</p><p>Two</p>';
var fragment=document.createRange().createContextualFragment(html);

divTest.appendChild(fragment);

是否可以让DocumentFragments包含tr，th或td标签？

如果我这样做：

var template = document.createRange().createContextualFragment(
        '<table></table>'
    );

    console.log(template.childNodes);

我得到的输出[table]。

如果我这样做：

var template = document.createRange().createContextualFragment(
        '<td></td>'
    );

    console.log(template.childNodes);

我得到[]!!!？！？的输出

如果我这样做：

var template = document.createRange().createContextualFragment(
        '<td><p></p></td>'
    );

    console.log(template.childNodes);

我得到[p]??！？！？!! ??！？！?????！

最后，如果我这样做：

var template = document.createRange().createContextualFragment(
        '<span><td></td></span>'
    );

    console.log(template.childNodes);

我知道[span]了-TD哪里去了？

我不明白这里的矛盾之处。文档片段是否可能仅包含某些元素？我想做的是类似于上述第二个操作，然后使用检索td querySelector。

谢谢

请参阅我在jsfiddle上的示例。一种红色rect作为静态降价存在。第二个绿色rect是使用附加方法附加的。蓝色在哪里rect？您可以使用任何文档检查器看到蓝色rect已插入svg元素中，但它不可见。为什么？我尝试使用 SVG 插入大量矩形documentFragment，但它们都不可见......

1.main_thread 和 work_thread 不共享任何东西（不共享任何东西）

2.在main_thread中将domFragment构建成某种级别的结构（基于数据）有点费时，可以为worker_thread划分作业。

但是，我找不到将 DocumentFragment 传入 work_thread 的方法

postMessage(fragment) // no way

postMessage({f:fragment}) // no way ,same reason above(serialization)

postMessage(fragment,[fragment]) // no way, type checking , must be a buffer type...

也许这种优化不值得付出努力？任何意见？

我得到用户选择的文字:

var selection = window.getSelection();
var selectRange = selection.getRangeAt(0);

var content = range.cloneContents(); // DocumentFragment

我怎样才能获得textNode的DocumentFragment内容？

我在 DocumentFragment 内部工作，并试图将 HTML 插入其中。我们知道 DocumentFragment 没有innerHTML setter，所以我尝试在DocumentFragment 中插入一个临时节点并在它之后使用 .html 插入HTML insertAdjacentHTML。然后我会删除临时元素，并留下一个带有我想要的 DOM 的片段。

示例：（错误是故意的）

var fragment = document.createDocumentFragment();
var temporaryElement = fragment.appendChild(document.createElement('div'));

// Before we move on.. I can see that the `temporaryElement` does have a parent
console.log(temporaryElement.parentNode.nodeType);

// The following throws an error...
temporaryElement.insertAdjacentHTML('afterend', '<div>Some crazy custom HTML..</div>');

fragment.removeChild(temporaryElement);

我可以清楚地看到临时元素有一个 parentNode，那么为什么会出现这个错误呢？

我有一个文本字符串,我试图选择使用jQuery的跨度.我想抓住没有将元素添加到dom的跨度 - 如果可能的话？

在阅读了jquery文档后,我假设我可以通过将字符串包装在jquery选择器标记中来创建片段,然后使用.find()来查找我想要的元素.

我的代码与此类似,但从最后一行的外观来看,显然没有选择任何跨距; 任何帮助将不胜感激:

// 'text' is normally generated automatically... 
// just made it an escaped string for example purposes.
var text ="<span id=\"blah1\">Y</span><br/><span id=\"blah2\">o</span><br/>";
var spans = $(text).find('span');
console.log(text); // => <span id="blah1">Y</span><br/><span id="blah2">o</span><br/>
console.log(spans.length); // => 0 

谢谢.