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

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Using parentNode to Traverse Up the DOM

Posted by Ming Chi Wong
Ming Chi Wong
2,909 Points

DOM properties I still don't quite understand what each property means, for example event.target.tagName?

Also I don't quite understand why button is in capitals? Example;

listUl.addEventListener('click', (event) => { if (event.target.tagName == 'BUTTON') { let li = event.target.parentNode; let ul = li.parentNode; ul.removeChild(li); } });

1 Answer

Colin Sandlin
Colin Sandlin
4,512 Points
Colin Sandlin
Colin Sandlin
4,512 Points

I'm a beginner, so my answers may not be 100% correct. But, I'll try my best to explain it how I understand it.

  1. BUTTON is in all caps because his code needs to match, case for case, with what the browser will return to it. For whatever reason, old HTML standards make the browser return the HTML element in all caps.

  2. For event.target.tagName

event.target.tagName
/* event is a keyword cue for the browser to gather some 
data about the 'click' (or other) event that has just happened

event. target gathers a more specific subset of information 
from all the data available from the event. In the case of 'target',  
it returns whatever was clicked.

event.target.tagName returns even more specific info - the target 
of the click and the tagName - if it was a <button> that was 
clicked, it will return BUTTON. */

I hope that helps (and is correct)!