javascript - 有没有办法在 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

不DocumentFragment。API至少可以说是最小的：它没有定义任何属性或方法，这意味着它只支持NodeAPI中定义的属性和方法。由于APIgetElementById中定义的方法，它们不能与.DocumentDocumentFragment

Answer 3

NickFitz 是对的，在标准或浏览器DocumentFragment中没有您期望的Document或.ElementinnerHTML

甚至框架在这里也无济于事，因为它们往往要求节点在文档中，或者在上下文节点上使用片段上不存在的方法。您可能必须自己编写，例如：

 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

除非您已将 created 添加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

到目前为止，找出你能用 a 做什么和不能做什么的最好方法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 ];

...您会被告知“该对象没有实现 DocumentFragment 接口”

Answer 7

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

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

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

Javascript 工具包 - 文档对象方法

Answer 8

我的 DOM在元素标签下有一个#document-fragment 。

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

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


 $(texttemplate).children()

      <p>​Super produced One​&lt;/p>​, 
      <appler-one>​&lt;/appler-one>, 
      <p>​Super produced Two​&lt;/p>, 
      <appler-two>​…​&lt;/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>​&lt;/appler-one>​]