«

Using a document listener on DOMNodeInserted, I'm trying to determine
if an element with id="x" was inserted. So either the
event.target.id=="x" or a child element of the one inserted
has .id=="x".

What is the best way to determine if #x is a child of the inserted
element?

Currently I'm doing:
if ( element.querySelectorAll("#x").length==1 )

But that limits my browser compatibility. I'd like to support Firefox
< 3.5, which lacks querySelectorAll.

Matt Kruse

Matt Kruse wrote:
> Using a document listener on DOMNodeInserted, I'm trying to determine
> if an element with id="x" was inserted. So either the
> event.target.id=="x" or a child element of the one inserted
> has .id=="x".
>
> What is the best way to determine if #x is a child of the inserted
> element?
>
> Currently I'm doing:
> if ( element.querySelectorAll("#x").length==1 )
>
> But that limits my browser compatibility. I'd like to support Firefox
> < 3.5, which lacks querySelectorAll.

Well
element.getElementsByTagName('*')
gives you alld descendant elements, you could then iterate over that
node list and look for an element with the id you are interested in.
That should work back to Firefox 1.0 or IE 6 (which you are probably not
interested in anyway with using mutation events).
Firefox also supports XPath over HTML DOMs so you could also try to
solve that with XPath e.g.
element.ownerDocument.evaluate('descendant-or-self::*[@id = "' +
yourId + '"]', element, null, 9, null).singleNodeValue !== null
should tell you whether "element" itself or one of the descendant
elements has the id attribute.


--

Martin Honnen
http://msmvps.com/blogs/martin_honnen/

Matt Kruse wrote:

> Using a document listener on DOMNodeInserted, I'm trying to determine
> if an element with id="x" was inserted. So either the
> event.target.id=="x" or a child element of the one inserted
> has .id=="x".
>
> What is the best way to determine if #x is a child of the inserted
> element?

Determine if #x's parent is the inserted element (`parentNode' property).


PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$> (2004)

On May 27, 8:50*am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> Matt Kruse wrote:
> > What is the best way to determine if #x is a child of the inserted
> > element?
> Determine if #x's parent is the inserted element (`parentNode' property).

I thought of this too, obviously, but it has the drawbacks of:
1. You may have to look through the parentNode chain all the way up to
the root document before realizing it's not a match, which seems
inefficient
2. If #x already existed in the doc somewhere else, you're going to be
inspecting this chain for no good reason

It seems that element.getElementById() would be handy in this case,
but perhaps performance using any of these methods would be fast
enough that trying to optimize is pointless.

Matt Kruse

Matt Kruse wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Matt Kruse wrote:
>> > What is the best way to determine if #x is a child of the inserted
>> > element?
>> Determine if #x's parent is the inserted element (`parentNode' property).
>
> I thought of this too, obviously, but it has the drawbacks of:
> 1. You may have to look through the parentNode chain all the way up to
> the root document

You mean root _element_. You may not have to, since not all element types
may be descendants of all others.

> before realizing it's not a match, which seems inefficient

A linked list lookup is certainly not more inefficient than a tree search.

> 2. If #x already existed in the doc somewhere else, you're going to be
> inspecting this chain for no good reason

If #x already existed in the document somewhere else, you have a design
problem to solve first.

> It seems that element.getElementById() would be handy in this case,

It is. BTDT.

> but perhaps performance using any of these methods would be fast
> enough that trying to optimize is pointless.

Perhaps not.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$>

On May 27, 8:18*am, Martin Honnen <mahotr...@yahoo.de> wrote:
> Matt Kruse wrote:
> > What is the best way to determine if #x is a child of the inserted
> > element?
> Firefox also supports XPath over HTML DOMs so you could also try to
> solve that with XPath e.g.
> * *element.ownerDocument.evaluate('descendant-or-self::*[@id = "' +
> yourId + '"]', element, null, 9, null).singleNodeValue !== null

Good idea, I went ahead and tested these three:

function containsId1(el,id) {
return (el.ownerDocument.evaluate('descendant-or-self::*[@id = "' +id
+ '"]', el, null, 9, null).singleNodeValue !== null);
}
function containsId2(el,id) {
return (el.querySelectorAll('#'+id).length==1);
}
function containsId3(el,id) {
var o = document.getElementById(id);
if (o) {
if (id===o.id) { return true; }
while (o=o.parentNode) {
if (id===o.id) { return true; }
}
}
return false;
}

It turns out that the XPath approach is about 100ms slower over 5,000
iterations of a simple test case (insignificant), and the other two
are practically equal. So I guess there is no reason not to use the
last approach, which is the most backwards-compatible.

Matt Kruse

Le 5/27/10 3:07 PM, Matt Kruse a écrit :
> Using a document listener on DOMNodeInserted, I'm trying to determine
> if an element with id="x" was inserted.

alert(document.getElementById('x'))

alert(typeof document.getElementById('x') != 'undefined')

> So either the event.target.id=="x"
> or a child element of the one inserted
> has .id=="x".

??? as you can have only ONE element of same id in a html body
why do you search more than this 'x' ?


> What is the best way to determine if #x is a child of the inserted
> element?

?? how does-it inserted ?
I mean the container or the element of id 'x'


> Currently I'm doing:
> if ( element.querySelectorAll("#x").length==1 )

I don't know what that element.querySelectorAll is.


> But that limits my browser compatibility. I'd like to support Firefox
> < 3.5, which lacks querySelectorAll.

If you search an id use gEBY (see above)



If there is more than one element with same id
correct in first your page or the appli creating it.

--
sm

On May 27, 9:26*am, Matt Kruse <m...@thekrusefamily.com> wrote:
> function containsId3(el,id) {
> * * * * var o = document.getElementById(id);
> * * * * if (o) {
> * * * * * * * * if (id===o.id) { return true; }
> * * * * * * * * while (o=o.parentNode) {
> * * * * * * * * * * * * if (id===o.id) { return true; }
> * * * * * * * * }
> * * * * }
> * * * * return false;
> }

Oops, posted the version with obviously logical snafu. Fixed:

function containsId3(el,id) {
var o = document.getElementById(id);
if (o) {
do {
if (o==el) { return true; }
} while (o=o.parentNode);
}
return false;
}

Matt Kruse

On 5/27/2010 7:10 AM, Thomas 'PointedEars' Lahn wrote:
> Matt Kruse wrote:
>
>> Thomas 'PointedEars' Lahn wrote:
>>> Matt Kruse wrote:
>>>> What is the best way to determine if #x is a child of the inserted
>>>> element?
>>> Determine if #x's parent is the inserted element (`parentNode' property).
>>
>> I thought of this too, obviously, but it has the drawbacks of:
>> 1. You may have to look through the parentNode chain all the way up to
>> the root document
>

No, to determine if #x is a child of the inserted element, the simplest
approach is to compare the inserted element to x's parentNode.

To determine if #x is a *descendant* of the inserted element is a
different task. It is not a difficult one; and many recent browsers
supply functionality

You wrote that you are using a DOMNodeInserted mutation event. Perhaps
that is not the best choice here.

What are you trying to do?

Garrett Smith wrote:

> On 5/27/2010 7:10 AM, Thomas 'PointedEars' Lahn wrote:
>> Matt Kruse wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> Matt Kruse wrote:
>>>>> What is the best way to determine if #x is a child of the inserted
>>>>> element?
>>>> Determine if #x's parent is the inserted element (`parentNode'
>>>> property).
>>>
>>> I thought of this too, obviously, but it has the drawbacks of:
>>> 1. You may have to look through the parentNode chain all the way up to
>>> the root document
>
> No, to determine if #x is a child of the inserted element, the simplest
> approach is to compare the inserted element to x's parentNode.
> [...]
> What are you trying to do?

Will you *please* learn to post.


PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$> (2004)