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
Devjyoti Ghosh
2,422 PointsUsing 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?
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Devjyoti,
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 and tagName
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 Parker
229,608 PointsIn HTML, tag names are not case sensitive and are written by convention in lower case. But in the element property they are stored in upper case, and JavaScript is case-sensitive. This is different from class names, which are always case-sensitive and are therefore stored exactly as they are given.
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.