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.

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Sibling Traversal

Nebojsa Stevanovic
seal-mask
.a{fill-rule:evenodd;}techdegree
Nebojsa Stevanovic
Full Stack JavaScript Techdegree Student 9,620 Points

can i get help here please

Hello.. i don't understand this task.. when i click button, i have to add a class that has a name 'highlight' to p element ..right ?

app.js
var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {

  }
});
index.html
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript and the DOM</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <section>
            <h1>Making a Webpage Interactive</h1>
            <p>Things to Learn</p>
            <ul>
                <li><p>Element Selection</p><button>Highlight</button></li>
                <li><p>Events</p><button>Highlight</button></li>
                <li><p>Event Listening</p><button>Highlight</button></li>
                <li><p>DOM Traversal</p><button>Highlight</button></li>
            </ul>
        </section>
        <script src="app.js"></script>
    </body>
</html>

2 Answers

Don't worry. Some times things get a bit confusing. But once you get it, it will stick to your brain. This is a process and we've all been there. Maybe the only thing you're missing is how the DOM tree works. Child elements are nested inside the parents tags. The parent elements have a higher hierarchy. Sibling elements are not one inside of the other. They are on the same hierarchy level, hence they "stand" side by side.

Take a look at the ul children:

<li><p>Element Selection</p><button>Highlight</button></li>
<li><p>Events</p><button>Highlight</button></li>
<li><p>Event Listening</p><button>Highlight</button></li>
<li><p>DOM Traversal</p><button>Highlight</button></li>

Each li element is parent of both a p element and a button element. You can see both p and button tags are inside li and stand side by side (meaning they are not one inside of the other).

So, if you use the even.target property to identify which button was clicked, you can get a reference to the p element doing

var p = e.target.previousElementSibling

You can do this and be sure it will give you a p element because you already conditioned the handler to run the code if the event target is a button element.

So, your solution would look something like this (SPOILERS! Don't look at the snippet below if you just wanna keep trying yourself):

var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    var p = e.target.previousElementSibling;
    p.className = "highlight";
  }
});
Nebojsa Stevanovic
seal-mask
.a{fill-rule:evenodd;}techdegree
Nebojsa Stevanovic
Full Stack JavaScript Techdegree Student 9,620 Points

wow.. i've been reading this comment that you wrote for 10 min already.. you are right, i do have a problem with DOM tree how it works.. but you really helped me with this answer, is so thoroughly explained. thank you !

haha No problem! I'm glad I could help. Keep it up!

Yes. But it can't be any p element. It has to be the imediate previous element sibling. The one right next to it.

Remember to use the event object and the previousElementSibling property. Take it from there! If you're still having some trouble, come here again and I'll show you a solution!