I've just written a little javascript function that I have myself found extremely valuable when doing DOM scripting. It's called parentElementsByTagName() and even if it's name isn't great it really does work and has proven very useful for my app.

At any starting point in a DOM tree (first parameter) it goes "up the tree" by looping over "currentelement.parentNode". The second parameter is the tag name (eg. "div") and the third parameter is optional and it's a class name that that tag name needs to have.

I wrote this because I found myself writing this.parentNode.parentNode.parentNode... in my Javscript code and thought I'd stop that sillyness.

Here's my code. I'm sure it ain't perfect but it's helped me a lot and maybe it will help others:


/* This function returns a list of elements that are all parents of each
* other and parent of 'doc'. They're matched by tagname and *optionally*
* classname. */
function parentElementsByTagName(doc, tagname, classname) {
  var findings = new Array();
  var digg_in = doc;
  while (digg_in.parentNode) {
     digg_in = digg_in.parentNode;
     if (digg_in.nodeName.toLowerCase() == tagname.toLowerCase()) {
        if (arguments.length==3) {
           if (digg_in.getAttribute('class') &&
               digg_in.getAttribute('class').toLowerCase().indexOf(classname.toLowerCase())>-1) {
              findings.push(digg_in);
           }
        } else {
           // no doubt
           findings.push(digg_in);
        }
     }
  }
  return findings;
}

Comments

Matt Schinckel

I wrote a similar function, but mine was to find the parent form:

function parentForm(node) {
if (node==document) return false;
if (node.tagName=="FORM") return node;
return parentForm(node.parentNode);
}

I kinda like it, as it's very simple - and uses recursion to make it even simpler. I don't know if there's a limit in JavaScript to the number of stack that can be recursed.

Neville Shaun Ng

getAttribute("class") doesn't work in IE btw

Neville Shaun Ng

.className needs to be used instead for IE

Your email will never ever be published.

Previous:
tightVNC and Chicken of the VNC March 4, 2006 macOS
Next:
Squeezebox + Pandora March 8, 2006 Misc. links
Related by category:
Fastest way to find out if a file exists in S3 (with boto3) June 16, 2017 Web development
Be very careful with your add_header in Nginx! You might make your site insecure February 11, 2018 Web development
<datalist> looks great on mobile devices August 28, 2020 Web development
Msgpack vs JSON (with gzip) December 19, 2017 Web development
Related by keyword:
Lesson learnt with creating DOM element with jQuery April 4, 2008 JavaScript
V8 < TraceMonkey < SquirrelFish September 23, 2008 Web development
Are you a web developer? Then VisiBone is for you January 22, 2006 Web development
DOM Scripting December 5, 2005 Books