Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Parent element reference?

    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.

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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:
    Code:
    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?

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

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

  • #6
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #10
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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 )

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •