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 Using parentNode to Traverse Up the DOM

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

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