ansaurus

Question

Is there any way to find an element in a documentFragment?

Answer 1

+2 A:

What about:

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

Unless you've added the the created div to your document fragment I'm not sure why getElementById would find it?

--edit

If you're willing to roll your own getElementById function then you ought to be able to get the reference you're after, because this code works:

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);

robertc 2009-10-29 12:30:27

I was trying to avoid that solution, since i design a dataentry form in the fragment, add the events and attach to document. Works in IE.The reason seems that in IE fragment inherits from document, but in FF inherits from Node (W3C)

pkario 2009-10-29 12:34:53

OK, but if you're building the form in JS anyway, why not just keep references to the elements as you create them and use those references to add the events?

robertc 2009-10-29 12:49:30

There are many buttons, textboxes, combos etc in each and every form.I try to stick to the ids and minimize the dom object references where possible.I will attach first and assign events later.

pkario 2009-10-29 12:54:15

I must be missing something about what you're doing then - how are you creating elements and appending them to your document fragment without creating references to them? The tradeoff is between storing a reference to an element as you create it and not immediately throwing it away against scanning through the whole document a few milliseconds later in order to recreate that reference to the element.

robertc 2009-10-29 13:01:03

Edited the answer to fix the |myDiv = document.createElement("div").id = "myId"| line. In the original code |myDiv == "myId"|.

Nickolay 2009-10-29 13:33:45

IE's `createDocumentFragment` doesn't actually create a `DocumentFragment`, it creates a `Document`: http://msdn.microsoft.com/en-us/library/ms536387(VS.85).aspx (I like the way they say "This is defined in DOM Level 1" without explaining that they don't actually implement DocumentFragment in HTML and so the method returns the wrong type of object...)

NickFitz 2009-10-29 13:45:30

Answer 2

+4 A:

No. The DocumentFragment API is minimal to say the least: it defines no properties or methods, meaning that it only supports the properties and methods defined in the Node API. As methods such as getElementById are defined in the Document API, they cannot be used with a DocumentFragment.

NickFitz 2009-10-29 12:30:49

Even though getElementById is defined in the Document API, it won't work on a newly created element that is not attached to the dom.myObj.getElementById doesn't work whereas myObj.getElementsByTagName works.

Olivvv 2009-12-07 09:55:21

@Olivvv: that's to be expected: `getElementById` is a method of `HTMLDocument` http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-36113835, whereas `getElementsByTagName` is a method of both `Document` http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document and `Element` http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-745549614 Therefore, `getElementById` will always throw an exception when an attempt is made to invoke it on an object of type `Element` whether that element is attached to the DOM or not.

NickFitz 2009-12-07 16:49:53

Answer 3

A:

An external source, listed below, showed the following code snippet:

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

Which displays a different way of setting the object's ID parameter.

Javascript Kit - Document Object Methods

Anthony M. Powers 2009-10-29 12:31:23

Answer 4

+6 A:

NickFitz is right, DocumentFragment doesn't have the API you expect from Document or Element, in the standard or in browsers (which is a shame; it would be really handy to be able to set a fragment's innerHTML.

Even frameworks don't help you here, as they tend to require Nodes be in the document, or otherwise use methods on the context node that don't exist on fragments. You'd probably have to write your own, eg.:

 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;
 }

It would almost certainly be better to keep track of references as you go along than to rely on a naïve, poorly-performing function like the above.

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

bobince 2009-10-29 12:53:41

ansaurus

tags:

views:

answers:

Is there any way to find an element in a documentFragment?

related questions