Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

Parent elements and children

Can someone provide some direction as to how parent elements and children elements work?

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

The DOM (document object model) is where the idea of parent and child elements comes from. The DOM see's three kinds of relationships between elements:

(1) parent

(2) child

(3) sibling

A single element can be one or all of those relationships at once. To understand a parent/child relationship we need an example to see it.

<html>
 <body>

   <div id="noChildren">I am the first div.</div>

   <div id="children">
    I am the second div and have two child elements.

    <p id="child1">I am the first child of the div.</p>
    <p id="child2">I am the second child of the div.</p>
   </div>

 </body>
</html>

<!---
(A) The html element is the parent element to the body element.  The body element is the child of the html element.

(B) The body element is the parent element to the two div elements.  The two div elements are children of the body element.

(C) The div with an id of "children" is the parent to the two p elements. The two p elements are children of the div element with an id of "children."
--->

Understanding how the DOM tree is created and what relationships there are between the elements on the page is super important to know when it comes to page layout and in understanding how events work.

Hope this helped.

1 Answer

Per Karlsson
Per Karlsson
12,683 Points
Per Karlsson
Per Karlsson
12,683 Points

Hello!

<ul>
  <li>Treehouse</li>
  <li>HTML</li>
</ul>

In this example the parent element of the list items li would be the unordered list ul. And the child elements of the ul would be the two list items li.

Hope that explains it! :)