Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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

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! :)