<div id="container"> <p id="firstParagraph"> <input type="button" id="button1" value="Button 1"> </p> <p id="secondParagraph"> <input type="button" id="button2" value="Button 2"> </p> </div>
How family relationships work in HTML
In the above example, #button1 is a child of #firstParagraph. You could also say #firstParagraph is the parent of #button1.
Similarly, #firstParagraph and #secondParagraph are siblings because they both have #container as their parent.
var button1 = document.querySelector('#button1'); var firstParagraph = button1.parentNode;
In this example, we were able to access #firstParagraph through the parentNode property of #button1.
var firstParagraph = document.querySelector('#firstParagraph'); var secondParagraph = firstParagraph.nextElementSibling;
Similarly, since #secondParagraph is the next element after #firstParagraph, we were able to use the nextElementSibling property to access it.
This property works exactly the same as nextElementSibling -- except it accesses the previous element in the HTML file.
Other relational properties