Question

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

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

Answer 1

所有这些答案都相当陈旧，从querySelectorAll和querySelector广泛可用时回来。应该注意的是，这两个接受CSS选择器作为参数的函数在现代浏览器中对DocumentFragment s起作用，应该是处理问题情况的首选方法。对于不支持querySelectorAll或querySelector的旧版浏览器，某些答案中提供的备用解决方案将是一种很好的方法。

以下是一个示例用法：

var df = document.createDocumentFragment();
var div = document.createElement('div');
div.id = 'foo';
df.appendChild(div);
var result = df.querySelector('#foo'); // result contains the div element

一个好的实现应首先使用对象检测来查看浏览器是否支持此功能。例如：

function getElementByIdInFragment(fragment, id) {
    if (fragment.querySelector) {
        return fragment.querySelector('#' + id);
    } else {
        // your custom implementation here
    }
}

Answer 2

没有。 DocumentFragment API至少可以说是最小的：它没有定义任何属性或方法，这意味着它只支持Node API中定义的属性和方法。由于getElementById中定义了DocumentFragment等方法，因此它们不能与{{1}}一起使用。

Answer 3

NickFitz是对的，DocumentFragment没有您期望Document或Element，标准版或浏览器中的API（这是一种耻辱;它会非常方便能够设置片段的innerHTML。

甚至框架在这里也没有帮助，因为它们往往要求节点在文档中，或者在上下文节点上使用片段上不存在的方法。你可能要编写自己的，例如：

 function Node_getElementById(node, id) {
      for (var i= 0; i<node.childNodes.length; i++) {
          var child= node.childNodes[i];
          if (child.nodeType!==1) // ELEMENT_NODE
              continue;
          if (child.id===id)
              return child;
          child= Node_getElementById(child, id);
          if (child!==null)
              return child;
      }
      return null;
 }

随着时间的推移跟踪引用几乎肯定会更好，而不是依赖于如上所述的天真，表现不佳的函数。

var frag= document.createDocumentFragment();
var mydiv= document.createElement("div");
mydiv.id= 'myId';
frag.appendChild(mydiv);
// keep reference to mydiv

Answer 4

怎么样：

var oFra = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id="myId";
oFra.appendChild(myDiv);
oFra.getElementById("myId"); //not in FF

除非您已将创建的div添加到文档片段中，否则我不确定为什么getElementById会找到它？

- 修改

如果您愿意推出自己的getElementById函数，那么您应该能够获得您之后的引用，因为此代码可以正常工作：

var oFra = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = "myId";
oFra.appendChild(myDiv);
if (oFra.hasChildNodes()) {
    var i=0;
    var myEl;
    var children = oFra.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].id == "myId") {
            myEl = children[i];
        }
    }
}
window.alert(myEl.id);

Answer 5

使用jQuery：

// Create DocumentFragment
var fragment  = document.createDocumentFragment(),
    container = document.createElement('div');

container.textContent = 'A div full of text!';
container.setAttribute('id', 'my-div-1');
container.setAttribute('class', 'a-div-class');
fragment.appendChild(container);

// Query container's class when given ID
var div = $('<div></div>').html(fragment);
console.log(div.find('#my-div-1').attr('class'));

jsFiddle：http://jsfiddle.net/CCkFs/

但是你有使用jQuery创建div的开销。有点hacky，但它确实有效。

Answer 6

下面列出的外部来源显示了以下代码段：

var textblock=document.createElement("p")
textblock.setAttribute("id", "george")
textblock.setAttribute("align", "center")

其中显示了设置对象ID参数的不同方法。

Javascript Kit - Document Object Methods

Answer 7

我的DOM在元素标记下有一个＃document-fragment 。

这就是我正在使用的（使用jQuery），我还有一个用例，我在字符串中有HTML DOM -

 var texttemplate = $(filecontents).find('template').html();


 $(texttemplate).children()

      <p>Super produced One</p>, 
      <appler-one></appler-one>, 
      <p>Super produced Two</p>, 
      <appler-two>…</appler-two>]

$(texttemplate).html()

                "<p>Super produced One</p>
                <appler-one></appler-one>
                <p>Super produced Two</p>
                <appler-two>
                    <p>Super produced Three</p>
                    <appler-three></appler-three>
                </appler-two>"


$(texttemplate).find("appler-one")

              [<appler-one></appler-one>]

Answer 8

到目前为止，找出你能做什么，不能做DocumentFragment的最好方法是检查它的原型：

const newFrag = document.createDocumentFragment();  
const protNewFrag = Object.getPrototypeOf( newFrag );
console.log( '£ protNewFrag:' ); 
console.log( protNewFrag );

我得到了

DocumentFragmentPrototype {getElementById：getElementById（）， querySelector：querySelector（），querySelectorAll：querySelectorAll（）， prepend：prepend（），append：append（），children：Getter， firstElementChild：Getter，lastElementChild：Getter， childElementCount：Getter，还有1个......}

...告诉我我可以做的事情如下：

const firstChild = newFrag.children[ 0 ];

PS这不会起作用：

const firstChild = Object.getPrototypeOf( newFrag ).children[ 0 ];

...您将被告知＆＃34;该对象未实现DocumentFragment界面＆＃34;

有没有办法在documentFragment中找到一个元素？

8 个答案: