JavaScript JavaScript and the DOM Traversing the DOM Using parentNode to Traverse Up the DOM

Ming Chi Wong
Ming Chi Wong
1,073 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,509 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)!