finding orhpaned elements

[Justin Perkins]

How do you guys check if an element has been orphaned or not? I've
been using the parentNode method, but it only works when the element
itself has been removed, but not when the container holding a few
elements has been removed (understandably).

I know I could probably just use Element#up to check for the body
node, but that is an expensive query and I'm trying to make this as
native as possible.

At first I thought the built-in ownerDocument property would work, but
it doesn't seem to perform as I expect it to, which would be:

"The document that this node is in, or null if the node is not inside of one."

Short of using .up('body'), is there a native method of checking if an
element has been orphaned?

-justin

[mr_justin]

Was playing around with this some more, and realized I my best option
is to just attempt to fetch the element in question. Makes for a
pretty quick operation if the ID is present, otherwise the alternate
method would be crawling back up the DOM from the element to find the
body element (assuming the body has not been removed).

This seems to do the trick: http://pastie.org/224848

If you know of a more efficient way please say so :)

-justin

[Frederick Polgardy]

I like it.  Although I wouldn't worry about having a single exit point from the function.  If you just say if () { return ....} else { return ...} that cuts the number of lines in half. :)

-Fred

On Mon, Jun 30, 2008 at 11:47 AM, mr_justin <justin...@gmail.com> wrote:

Was playing around with this some more, and realized I my best option
is to just attempt to fetch the element in question. Makes for a
pretty quick operation if the ID is present, otherwise the alternate
method would be crawling back up the DOM from the element to find the
body element (assuming the body has not been removed).

This seems to do the trick: http://pastie.org/224848

--
Science answers questions; philosophy questions answers.

[kangax]

I believe this could be shortened like so:

Element.addMethods({
isOrphaned: function(element){
if (element.id) {
return !!element.ownerDocument.getElementById(element.id);
}
return !!element.up('body');
}
});

Do you necessarily have to do .up('body') (instead of just .up())?

-- kangax

[Frederick Polgardy]

One ! instead of two !!.  If the element is found in the document, then it isn't orphaned.

And yes you need to check for the body in the parent chain because the element might be part of a whole tree that's been orphaned.  It still has a parent (element.up() != null) but the parent has been orphaned as well.

There's always the recursive approach, which will be nice when JS supports tail recursion:  ;-)

function isOrphaned(element) {
  return !element.parentNode || isOrphaned(element.parentNode);
}

-Fred

On Mon, Jun 30, 2008 at 1:22 PM, kangax <kan...@gmail.com> wrote:

I believe this could be shortened like so:

Element.addMethods({
 isOrphaned: function(element){
   if (element.id) {
     return !!element.ownerDocument.getElementById(element.id);
   }
   return !!element.up('body');
 }
});

[Justin Perkins]

Wow thanks guys, I tend to be overly verbose :)

This is what I got now, works great.

Element.addMethods({
isOrphaned: function(element){
if (element.id) return !element.ownerDocument.getElementById(element.id);
return !element.up('body');
});

-justin

[jdalton]

Element.addMethods({
isOrphaned: function(element){
element = $(element);
if (element.sourceIndex < 1) return true; //fast way to detect
this for IE
if (element.id) return !
element.ownerDocument.getElementById(element.id);
return !element.descendantOf(document.body);
}
});

This version uses descendantOf which has some secret sauce in it that
might be faster than traversing the dom (if supported).
Also I use the sourceIndex supported by IE for a quick check.

- JDD

[Justin Perkins]

Thanks John, welcome improvements. One more tweak so the fallback
condition works for IE...

Element.addMethods({
isOrphaned: function(element){
if (element.sourceIndex < 1) return true; // for IE only
if (element.id) return !element.ownerDocument.getElementById(element.id);
return (element.descendentOf ?
!element.descendentOf(document.body) : element.up('body'));
}
});

-justin

[jdalton]

if you use element = $(element); you shouldnt have to worry about IE,
because the element will be extended and it will have the descendentOf
method.
Also if I tweak the condition IE will be handled by the first
condition now.
Also maybe checking
element.descendantOf(element.ownerDocument.documentElement)

Element.addMethods({
isOrphaned: function(element) {
element = $(element);

if (element.sourceIndex !== null) return element.sourceIndex < 1;

if (element.id) return !
element.ownerDocument.getElementById(element.id);
return !

element.descendentOf(element.ownerDocument.documentElement);
}
});

[Justin Perkins]

On Mon, Jun 30, 2008 at 5:21 PM, jdalton <John.Dav...@gmail.com> wrote:
> if you use element = $(element); you shouldnt have to worry about IE,
> because the element will be extended and it will have the descendentOf
> method.

In my usage that is unnecessary since I'm calling that method directly
on an already instantiated element object, but it is a good addition
for the Element.isOrphaned('some-id') usage.

The problem I was having was a spelling error, descendent vs. descendant :)

Your optimization to the last line is nice too.

-justin