Devjyoti Ghosh2,422 Points
Using className instead of tagName for event object?
Hi, To solve the problem in the last part of the video I used event.target.className by giving the buttons in the HTML a class so that I can select those particular buttons. The question I have is why is className property returning the class name as it is whether in the lower/upper case it is written in the HTML. for eg
<button class = "Remove-Item">Remove<button> // In JS e.target.className will return Remove-Item
Whereas when we use tagName it returns the tag in UpperCase so the button tag is returned as BUTTON.
Why is this difference there?
I'm not sure if this is about a code challenge or video but I can try answering your question on the differences you're seeing between
className gets or sets the elements class attribute value. So in this case we're dealing with the value of an attribute. If you've set the value to be exactly this, "Remove-Item", then that's how it will come back whenever you retrieve it. Attribute values are always case-sensitive.
tagName works under different rules. For an html document, it will always come back in all uppercase regardless of how you typed the element name in the document. I'm not sure if you've heard of xml or xhtml document types but the
tagName property on those documents will return the element name exactly as it appears in the document.
So for example, if you had the following xml document:
<?xml version="1.0"?> <buTTon></buTTon>
and you used
tagName on the button element then it would come back exactly as "buTTon" but if you typed the button element exactly like that in an html document then it would still come back as "BUTTON".
This is only used as an example to illustrate the differences. It is recommended that you consistently write element names in all lowercase.
From the DOM Level 1 specification:
tagName has the value "elementExample". Note that this is case-preserving in XML, as are all of the operations of the DOM. The HTML DOM returns the tagName of an HTML element in the canonical uppercase form, regardless of the case in the source HTML document.
You can find this under the attributes section where
tagName is listed. So this tells us that for html it has to come back as all uppercase but it will be case-preserving for XML.
In my opinion, this is just something that you have to remember when testing the tagName in your code. You always need to remember to test against the uppercase version of the element.
Steven Parker170,478 Points
Also, that challenge was intended to give you practice selecting elements without modifying the HTML. Adding classes to the HTML is effectively "cheating", but apparently the challenge checker didn't call you on it. But if you wanted to get the full value of that challenge, try it again but don't make any HTML changes.