Node.contains: Check if a Node is a Child of Another Node

By  on  

There are loads of basic, native JavaScript methods that many developers don't know about.  Many people don't know about the Element.classList API, for example, so className management becomes another case for needing a JavaScript toolkit for even the most basic tasks.  Another case is checking for node parenting -- developers believe it requires a toolkit or a loop checking parentNode up the chain;  no so!  Nodes provide a contains method to check if one node if a parent of another:

function(parentNode, childNode) {
	if('contains' in parentNode) {
		return parentNode.contains(childNode);
	}
	else {
		return parentNode.compareDocumentPosition(childNode) % 16;
	}
}

You'll note we check for the contains method before using it, as you would probably expect, and use the rarely-known compareDocumentPosition in the case that contains isn't supported (Firefox < 9).  This method would be helpful when creating a drag & drop widget and determining moves between lists.  Anyways, before you jump to the conclusion that you need a toolkit for something that seems basic, do some quick research and hopefully you find an easier way!

Recent Features

  • By
    Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    CSS Vertical Centering

    Front-end developing is beautiful, and it's getting prettier by the day. Nowadays we got so many concepts, methodologies, good practices and whatnot to make our work stand out from the rest. Javascript (along with its countless third party libraries) and CSS have grown so big, helping...

  • By
    jQuery Comment Preview

    I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday. The XHTML The CSS The jQuery JavaScript On the keypress and blur events, we validate and...

Discussion

  1. MaxArt

    I’m not sure this works. Shouldn’t the function always return a boolean?

    If I compare an element with one of its children, with compareDocumentPosition I get 4. If I compare an element with its parent, I get 2.

    That’s how I used to polyfill the function:

    // 16 === Node.DOCUMENT_POSITION_CONTAINED_BY
    Node.prototype.contains = function(node) {
        return (this.compareDocumentPosition(node) & 16) !== 0 || this === node;
    }
    
    • Nick Williams

      You’re right, compareDocumentPosition returns a bitmask, so it can represent multiple values at once. e.g.

      var parent = document.createElement("div");
      var child = document.createElement("div");
      parent.appendChild(child);
      
      // as the article has it
      parent.compareDocumentPosition(child) % 8; // 4, truthy
      child.compareDocumentPosition(parent) % 8; // 2, truthy
      
      // how it should be
      parent.compareDocumentPosition(child) & 16; // 16, truthy
      child.compareDocumentPosition(parent) & 16; // 0, falsy
      

      John Resig’s article covers this in detail: http://ejohn.org/blog/comparing-document-position/

    • Updated, thank you!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!