Complex, markup-heavy web apps are the norm nowadays. A library like jQuery with its ease of use, cross-browser compatibility, and variety of features can help immensely when manipulating HTML on the fly. So it’s no wonder that a lot of developers choose to use such a library rather than native DOM APIs which have been historically quite problematic. Although browsers differences are still an issue, the DOM is in much better shape today than it was 5 or 6 years ago when jQuery was really starting to take off.
In this post I’ll discuss and demonstrate a number of different DOM features that can be used to manipulate HTML, with a specific focus on parent, child, and sibling node relationships.
I’ll cover browser support in the conclusion, but keep in mind that a library like jQuery is still generally considered a good option, due to the bugs and inconsistencies in using these kinds of native features.
Counting Child Nodes
Let’s use the following HTML, which I’ll be revisiting in various forms throughout this article:
[code language="html"]
<body>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</body>
[/code]
If I want to count how many elements are inside the <ul> element, there are two ways I can do that.
[code language="javascript"]
var myList = document.getElementById('myList');
console.log(myList.children.length); // 6
console.log(myList.childElementCount); // 6
[/code]
See the Pen Counting Child Elements: children & childElementCount by SitePoint (@SitePoint) on CodePen.
The logs in the last two lines produce the same result, but each with a different technique. In the first case, I’m using the children property. This read-only property returns a collection of the HTML elements inside the element being queried and I’m using the length property to find out how many are in the collection.
In the second example I’m using childElementCount, which I think is a cleaner and potentially more maintainable way of doing this (in other words, revisiting this code later, you would likely not have any trouble figuring out what childElementCount is doing).
Interestingly, I can also use childNodes.length (instead of children.length, but notice the result:
[code language="javascript"]
var myList = document.getElementById('myList');
console.log(myList.childNodes.length); // 13
[/code]
See the Pen Counting Child Nodes with childNodes.length by SitePoint (@SitePoint) on CodePen.
This returns 13 because childNodes is a collection of all nodes, including whitespace nodes – so keep that in mind if you require the ability to differentiate between all child nodes and all element nodes.
Checking the Existence of Child Nodes
I can also use the hasChildNodes() method to check if a given element has any child nodes. This method returns a Boolean to indicate whether it has child nodes or not:
[code language="javascript"]
var myList = document.getElementById('myList');
console.log(myList.hasChildNodes()); // true
[/code]
See the Pen hasChildNodes() by SitePoint (@SitePoint) on CodePen.
I know my list has child nodes, but I can alter the HTML to remove the elements inside the list so my HTML looks like this:
[code language="html"]
<body>
<ul id="myList">
</ul>
</body>
[/code]
Here’s the result if I run hasChildNodes() again:
[code language="javascript"]
console.log(myList.hasChildNodes()); // true
[/code]
See the Pen hasChildNodes() on empty element with white space by SitePoint (@SitePoint) on CodePen.
Notice it still logs true. Although the list doesn’t contain any elements, it does contain whitespace, which is a valid type of node. This particular method deals with nodes in general, not just element nodes. To ensure hasChildNodes() returns false, my HTML would have to look like this:
Continue reading %DOM Tips and Techniques: Parent, Child, and Siblings%
by Louis Lazaris via SitePoint
No comments:
Post a Comment