Node.contains: Check if a Node is a Child of Another Node
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!
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:
You’re right, compareDocumentPosition returns a bitmask, so it can represent multiple values at once. e.g.
John Resig’s article covers this in detail: http://ejohn.org/blog/comparing-document-position/
Updated, thank you!