nodeName vs tagName

nodeName and tagName are the properties to get the name of HTML node.

tagName is used to get the type of element nodes that have node type of 1. For other type of nodes such as attribute, comment, text, .etc, nodeName is used to get the name of node.

Let's take a look at the following example where we have a simple button:

<button id="login">Login</button>

The nodeName and tagName properties are the same for the HTML element:

const button = document.getElementById('login');
button.nodeType; // 1
button.nodeName; // 'BUTTON'
button.tagName; // 'BUTTON'

Let's access the node represents the id attribute:

const idNode = button.getAttributeNode('id');
idNode.nodeType; // 2
idNode.nodeName; // 'id'
idNode.tagName; // undefined

In a similar way, the button text node gives different result for nodeName and tagName:

const content = button.firstChild;
content.nodeType; // 3
content.nodeName; // '#text'
content.tagName; // undefined

naturalWidth vs width Normalize vs Reset CSS