Today, we're going to look at how to get nodes in the DOM and determine what type of node they are with vanilla JavaScript. Let's dig in!
Some HTML
Let's say you have some HTML like this…
<main> <h1>Hello, world!</h1> <p>How are you today?</p> <!-- This has some other elements in it... --> <p>It's a <strong>great <em>day</em></strong>, isn't it?</p> Yes indeed! <br><br> And one more. </main>
This HTML is made up of a collection of nodes.
Things like <main>, <h1>, <p>, and so on are element nodes. The text inside those elements are text nodes. The comment (<!-- -->) is a comment node.
The Node.nodeType property
The Node.nodeType property returns an integer that describes the type of the node.
-
1: element -
2: attribute -
3: text -
4: cdata -
7: XML -
8: comment -
9: document -
10: DocumentType -
11: fragment
You'll notice 5 and 6 are missing. They, along with 12, are deprecated and no longer used.
let main = document.querySelector('main'); // returns 1 (for element) let type = main.nodeType;
Checking type
If you want to check if a node was a particular type, you can use the comparison operator (== or ===) against the Node.nodeType property.
let main = document.querySelector('main'); let first = main.firstChild; // check if the first child node is an element if (first.nodeType === 1) { console.log(`It's an element!`); } else { console.log('Not an element...'); }
Named constants
The Node object has a collection of constants that can are mapped to this integers, and can be used to make your code a bit more obvious, if you'd prefer.
-
Node.ELEMENT_NODE - 1 -
Node.ATTRIBUTE_NODE - 2 -
Node.TEXT_NODE - 3 -
Node.CDATA_SECTION_NODE - 4 -
Node.PROCESSING_INSTRUCTION_NODE - 7 -
Node.COMMENT_NODE - 8 -
Node.DOCUMENT_NODE - 9 -
Node.DOCUMENT_TYPE_NODE - 10 -
Node.DOCUMENT_FRAGMENT_NODE - 11
let main = document.querySelector('main'); let first = main.firstChild; // check if the first child node is an element if (first.nodeType === Node.ELEMENT_NODE) { console.log(`It's an element!`); } else { console.log('Not an element...'); }
Recursively check all the things
Element nodes will often have other nodes inside them, sometimes nested many levels deep.
Here's a little function I whipped up to demonstrate how you can recursively check the type of every node in a node tree. Pass in the top-level element, and it will loop through the entire tree and log all of the child nodes.
/** * Get the type of every node in a node tree * @param {Node} elem The top-level node */ function logNodeTreeTypes (elem) { let types = { 1: 'element', 2: 'attribute', 3: 'text', 4: 'cdata', 7: 'XML', 8: 'comment', 9: 'document', 10: 'DocumentType', 11: 'fragment' } // Log the nodeType details console.log(elem, elem.nodeType, types[elem.nodeType]); // If an element, log child nodes recursively if (elem.nodeType === Node.ELEMENT_NODE) { let children = [...elem.childNodes]; for (let child of children) { logNodeTreeTypes(child); } } }
Here's a demo you can play with. I've also added this to my membership toolkit.
Like this? A Go Make Things membership is the best way to support my work and help me create more free content.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] Checking what type of node something is with JavaScript"