标签: documentfragment

我知道最近已经讨论过添加innerHTML到文档片段,并且希望能够将其包含在DOM标准中.但是,在此期间您应该使用的解决方法是什么？

就是这样

var html = '<div>x</div><span>y</span>';
var frag = document.createDocumentFragment();

我想要div的span内部和内部frag都有一个简单的单行.

没有循环的奖励积分.jQuery是允许的,但我已经尝试过$(html).appendTo(frag); frag之后仍然是空的.

我对JS的性能有疑问.

说,我有下一个代码:

var divContainer = document.createElement("div"); divContainer.id="container";
var divHeader = document.createElement("div"); divHeader.id="header";
var divData = document.createElement("div"); divData.id="data";
var divFooter = document.createElement("div"); divFooter.id="footer";
divContainer.appendChild( divHeader );
divContainer.appendChild( divData );
divContainer.appendChild( divFooter );
document.getElementById("someElement").appendChild( divContainer );

这段代码只为其他一些函数创建了一个shell来创建一个网格,创建网格的过程非常复杂,并且有很多验证,目前我用2种方法填充网格,一个在数组变量中创建整个html另一个创建元素并将它们附加到一个元素documentFragment.

我的问题是,当我使用片段时,如果在使用片段时性能确实有所改善 - 他们管理内存中的元素,因此它们不会附加到文档中,因此不会触发DOM重新计算和其他令人讨厌的东西.但是我创建变量的方式是,在将容器附加到实际页面之前,它们不会附加到任何DOM元素.

所以我想知道以前的代码是否比使用包装它的文档片段具有更好的性能:

var fragment = document.createDocumentFragment();
var divContainer = document.createElement("div"); divContainer.id="container";
var divHeader = document.createElement("div"); divHeader.id="header";
var divData = document.createElement("div"); divData.id="data";
var divFooter = document.createElement("div"); divFooter.id="footer";
divContainer.appendChild( divHeader );
divContainer.appendChild( divData );
divContainer.appendChild( divFooter );
fragment.appendChild( divContainer )
document.getElementById("someElement").appendChild( fragment.cloneNode(true) ); …

有没有办法在W3C兼容的浏览器中获取JavaScript范围对象的html字符串？

例如,假设用户选择以下内容:Hello <b>World</b>
可以使用该Range.toString()方法将"Hello World"作为字符串.(在Firefox中,也可以使用文档的getSelection方法.)

但我似乎无法找到获取内部HTML的方法.

经过一番搜索,我发现范围可以转换为DocumentFragmentObject.

但是DocumentFragments没有innerHTML属性(至少在Firefox中;没有尝试过Webkit或Opera).
这对我来说似乎很奇怪:显然应该有一些方法来访问所选项目.

我意识到我可以创建一个documentFragment,将文档片段附加到另一个元素,然后获取该innerHTML元素.
但该方法将自动关闭我选择的区域内的任何打开的标签.
除此之外,肯定有一个明显的"更好的方法",而不是将它附加到dom只是为了让它成为一个字符串.

那么,如何获取Range或DocFrag的html字符串？

var oFra = document.createDocumentFragment();
// oFra.[add elements];
document.createElement("div").id="myId";
oFra.getElementById("myId"); //not in FF

如何在将片段附加到文档之前获取"myId"？

任何人都可以简要解释一下 documentFragment 实际上做了什么。我一直在寻找一个明确的解释，但直到现在我才得到任何解释。

我读到的是，documentFragment 类似于 DOM 结构，我们可以在其中添加修改 DOM 元素而不会中断文档的实际流程。

我还读到，documentFragment 比将每个元素一个一个地附加到 DOM 中要快。在我看来，documentFragment 不会每次都重新计算样式，因此速度更快。

我有两个例子，

以片段的方式进行：

var frag = document.createDocumentFragment();
var div1 = document.createElement("div");
var div2 = document.createElement("div");
frag.appendChild(div1);
frag.appendChild(div2);
document.getElementById("someId").appendChild(frag);

以正常方式进行：

var div = document.createElement("div");
var div1 = document.createElement("div");
var div2 = document.createElement("div");
div.appendChild(div1);
div.appendChild(div2);

document.getElementById("someId").appendChild(div);

在上面的两个例子中实际发生了什么？

我正在尝试用文档片段替换元素的所有内容:

var frag = document.createDocumentFragment()

文档片段正在创建中.没有问题.我添加元素就好了,也没有问题.我可以使用它来附加它element.appendChild(frag).这也很好用.

我正在尝试创建一个类似于jQuery HTML的"替换"方法.我并不担心旧的浏览器兼容性.是否有一个神奇的功能来替换元素的所有内容？

我已经尝试过element.innerHTML = frag.cloneNode(true),(根据我能找到的每个 '替换元素内容'维基),这不起作用.它给了我<div>[object DocumentFragment]</div>.

请不要图书馆.这意味着如果你把一个jQuery解决方案作为答案,你就会被投票.不是想成为一个混蛋,但它发生在每一次.

谢谢!

编辑 为了清楚起见,我正在寻找一个"神奇"的解决方案,我知道如何一次删除所有现有元素,然后附加我的片段.

请不要图书馆.超出我的控制.

我正在向dom附加一个文档片段.这一切都有效.没问题.

在附加片段后如何保留/检索节点列表？相关代码:

var frag = document.createDocumentFragment();
//add some content to the fragment
element.appendChild(frag);

再次,这是有效的!我不需要对如何添加东西到dom进行故障排除!

如果我设置var e = element.appendChild(frag);,所有内容都会正常附加,但e= =一个空文档片段.

我在这里寻找一些光滑的魔法伏都教.不要让我循环整个dom.内容可以是任何东西,一个或多个有或没有孩子的节点.如果有一些querySelectorAll的技巧或可以接受的东西.

谢谢!

编辑 在进一步调用时,看起来e上面实际上是对fragvar 的返回引用,在将其附加到dom之后为空.这就像元素整齐地滑出片段进入dom一样,片段就是空洞的.

我想显示存储在文件中的SVG图像,并将angularJs ng-click功能绑定到图像.

我已经尝试将ng-click绑定放在object/embed元素标记以及包装div标记中,但两者都不起作用.

有谁知道如何做到这一点？

尝试html:

<object ng-click="clickItem()" data="file.svg"></object>

<embed ng-click="clickItem()" src="file.svg/>

<div ng-click="clickItem()">
    <object data="file.svg"></object>
</div>

<div ng-click="clickItem()">
    <embed src="file.svg"/>
</div>

加载后得到的html:

<object ng-click="clickItem()" data="file.svg">
    #document
    xml-stylesheet
    <svg ~svg contents....~></svg>
</object>

并且点击不会在任何列出的案例中注册.

我正在使用<template>标记创建许多DOM元素(每个元素具有相同的HTML结构):

<template id="weapon-template">
    <div class="button">
        <div class="button-price"  data-price ></div>
        <img class="button-image"  data-image >
        <div class="button-name"   data-name  ></div>
        <div class="button-damage" data-damage></div>
        <div class="button-amount" data-amount></div>
    </div>
</template>

......以及几行JavaScript:

var clone;
var template = document.getElementById( "weapon-template" );

template.content.querySelector( "[data-image]"  ).src = data.prev;
template.content.querySelector( "[data-price]"  ).innerHTML = data.cost + "$";
template.content.querySelector( "[data-name]"   ).innerHTML = data.name;
template.content.querySelector( "[data-damage]" ).innerHTML = data.damage;
template.content.querySelector( "[data-amount]" ).innerHTML = 0;

clone = document.importNode( template.content, true )
this.container.appendChild( clone );

我想在克隆元素上添加一些事件监听器.我从互联网上找不到任何东西,厌倦了我自己的一些事情,比如:

template.content.querySelector( "[data-price]" ).addEventListener( "click", action, false ); …

我一直在寻找在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"(作为比较).