Parent element reference?

[Choopernickel]

From any given element inside the document body, how should I go about retrieving its parent element, and not a text node, but an actual HTML node?

TIA,
choop.

[liorean]

elm.parentNode will return a reference to the parent. Text nodes can't be parents to anything, so you're assured of the fact that you won't get a text node.

[Choopernickel]

Odd. el.parentNode alerts me with 'null or not an object'; el.parentNode() alerts me with 'doesn't support this method'.

Here's a mockup of my HTML:

<ul id="menuRoot" onmouseover="MakeMenu('menuRoot', event)">
    <li><a href="...">...<span>...</span></a></li>
    <li><a href="...">...<span>...</span></a></li>
    <li><a href="...">...<span>...</span></a>
        <ul>
            <li><a href="...">...<span>...</span></a></li>
            <li><a href="...">...<span>...</span></a></li>
            <li><a href="...">...<span>...</span></a></li>
        </ul>
    </li>
</ul>

I'm trying to leave the nested UL hidden until its parent LI is moused over. The script is unnecessary in Mozilla+, and we don't support less than IE5.

Here's what I've got for javascript:

function MakeMenu(el, ev) {
    try {
        ev.stopPropagation();
        return;
    } catch (err) {
        caught=0;
    }
    if (!el) {
        var theList = document.getElementById('menuRoot');
    } else {
        var theList = el;
    }
    while (!isParent(el)) {
        el = el.parentNode();
    }
    var loopIndex = 0;
    var nestedList;
    for (loopIndex = 0;loopIndex<theList.children.length;loopIndex++) {
        if (nestedList.children) {
            nestedList = theList.children[loopIndex];
            if (isParent(nestedList)) {
                if (nestedList.tagName.toUpperCase() == 'LI') {
                    nestedList.onmouseover = swap;
                    nestedList.onmouseout = swap;
                } else {
                    nestedList.onmouseover = function() {event.cancelBubble = true;};
                    nestedList.onmouseout = function() {event.cancelBubble = true;};
                }
                buildCollapser(nestedList);
            } else {
                nestedList.onmouseover = function() {event.cancelBubble = true;};
                nestedList.onmouseout = function() {event.cancelBubble = true;};
            }
        } else {
            nestedList.onmouseover = function() {event.cancelBubble = true;};
            nestedList.onmouseout = function() {event.cancelBubble = true;};
        }
    }
}

isParent(el) is just encapsulation; swap() detects the current className and switches it back and forth with a different className.

My problem stems from the fact that the event claims to be triggered by the <A> instead of by the <LI> - how do I get back up to the LI?

[liorean]

elm.parentNode isn't a function, it's (or should be) an element reference.

You pass the function a value 'menuroot' - that is a string, not an element reference.
Send it this instead, and you get teh element reference.

[Choopernickel]

Liorean, thanks for all your help so far.

I realized I forgot to include in the above script the snippet wherein I detect the element based on what was passed: if a string is passed, I get the element with that ID; if the element is passed, I just use the element.

I understood from your syntax earlier that el.parentNode is an element reference, not a function, but when it errored with "null or not an object" I just tried the parins on a whim, also to find an error. Naturally.

For some reason, however, I can't retrieve the el.parentNode at all. Why might this be?

I've changed the script just a bit; maybe enough to make a difference. Here:

function MakeMenu(el, ev) {
    try {
        ev.stopPropagation();
        return;
    } catch (err) {
        caught=0;
    }
    if (!el) {
        var theEl = document.getElementById('menu');
    } else if (typeof el == 'string') {
        var theEl = GetElement(el);
    } else  {
        var theEl = el;
    }
    var loopIndex = 0;
    var nestedList;
    if (theEl.children) {
        for (loopIndex = 0;loopIndex<theEl.children.length;loopIndex++) {
            nestedList = theEl.children[loopIndex];
            if (isParent(nestedList)) {
                if (nestedList.tagName.toUpperCase() == 'LI') {
                    nestedList.onmouseover = swap;
                    nestedList.onmouseout = swap;
                } else {
                    nestedList.onmouseover = function() {event.cancelBubble = true;};
                    nestedList.onmouseout = function() {event.cancelBubble = true;};
                }
                MakeMenu(nestedList);
            } else {
                nestedList.onmouseover = function() {event.cancelBubble = true;};
                nestedList.onmouseout = function() {event.cancelBubble = true;};
            }
        }
    } else {
        nestedList.onmouseover = function() {event.cancelBubble = true;};
        nestedList.onmouseout = function() {event.cancelBubble = true;};
    }
}

[Choopernickel]

I've decided I don't need any parent element reference. I've been approaching this in a rather roundabout manner as it is; this is too many days beating my head against my monitor for this one script talking.

I'm in the midst of working on a new process to build my menu; any and all may consider this thread done with.

[beetle]

isn't it parentElement and not parentNode?

BTW, TextRange objects require use of the parentElement() method, not property, to properly retrieve the parent.

what are you making there, Choopernickel? Is it anything like this?? I've actually got a demo of the OO version going here

[jkd]

Originally posted by beetle
isn't it parentElement and not parentNode?

Only if you like writing non-compliant code?

W3C DOM defines a parentNode property of the Node interface. IE defines a parentElement because it is stupid and redundant.

[beetle]

Thanks jkd. I haven't don't any scripting like that in a while, so I wasn't sure, and didn't look.

Ya know, not EVERY comment you make needs to be laced with cynicism.

[jkd]

Originally posted by beetle
Ya know, not EVERY comment you make needs to be laced with cynicism.

lol. To be fair, IE introduced "parentElement" along with its "children" collection in IE4 before DOM1 was standardized. But I like venting my frustrations on IE's crappiness.
(It's such an easy target )

[Roy Sinclair]

Originally posted by jkd
lol. To be fair, IE introduced "parentElement" along with its "children" collection in IE4 before DOM1 was standardized. But I like venting my frustrations on IE's crappiness.
(It's such an easy target )

It's also fair, when IE was the "good" browser with better DOM support we always rode on Netscape 4 for being so awkward and hard to live with. Turnabout is fair play, but even more so I hope this criticism is being taken to heart at MS so the next time they release a browser it supports standards a lot better instead of adding a little better support for standards and a lot of non-standard new features which has been the usual way of things for the last few releases.