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 trialMing Chi Wong
2,909 PointsDOM 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
4,512 PointsI'm a beginner, so my answers may not be 100% correct. But, I'll try my best to explain it how I understand it.
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.
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)!