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

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

不,DocumentFragmentAPI至少可以说是最小的:它没有定义任何属性或方法,这意味着它只支持NodeAPI中定义的属性和方法.作为APIgetElementById中定义的方法,它们不能与a一起使用.DocumentDocumentFragment

Answer 3

NickFitz是对的,DocumentFragment没有你期望的API,Document或者Element在标准或浏览器中(这是一种耻辱;能够设置片段是非常方便的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);