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

Devjyoti Ghosh
Devjyoti Ghosh
2,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?

2 Answers

Hi 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
Steven Parker
177,955 Points

In 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.