HTML Element tagName Property: Retrieving the Element’s Tag Name

The tagName property of an HTML element is a read-only property that returns the tag name of the element as a string, in uppercase. This property is useful for determining the type of an element dynamically, especially when dealing with collections of elements or when the element type is not known in advance.

What is the tagName Property?

The tagName property provides a way to programmatically identify the type of an HTML element. It’s part of the DOM (Document Object Model) and is essential for tasks such as:

• Dynamic Type Checking: Identifying elements in a collection based on their tag name.
• Conditional Logic: Applying different behaviors based on the element type.
• Debugging: Verifying the structure and types of elements in a web page.

Syntax

The syntax for accessing the tagName property is straightforward:

const tagName = element.tagName;

Where element is a reference to an HTML element in the DOM.

Key Attributes

The tagName property does not have any attributes or configurable options. It’s a simple, read-only property that returns the tag name as an uppercase string.

Attribute	Type	Description
Value	String	The tag name of the element, in uppercase (e.g., “DIV”, “P”, “H1”).
Read-Only	Boolean	`tagName` is a read-only property; you cannot set its value.

Note: The tagName is always returned in uppercase, regardless of how the tag is written in the HTML source. ⚠️

Basic Usage Examples

Let’s explore some basic examples of how to use the tagName property to retrieve the tag name of an HTML element.

Retrieving the Tag Name of a Paragraph Element

<p id="myParagraph">This is a paragraph.</p>

<script>
  const paragraphElement = document.getElementById("myParagraph");
  const tagName_paragraph = paragraphElement.tagName;
  console.log(tagName_paragraph); // Output: "P"
</script>

In this example, we retrieve the tag name of a paragraph element and log it to the console.

Retrieving the Tag Name of a Heading Element

<h1 id="myHeading">This is a heading.</h1>

<script>
  const headingElement = document.getElementById("myHeading");
  const tagName_heading = headingElement.tagName;
  console.log(tagName_heading); // Output: "H1"
</script>

Here, we retrieve the tag name of a heading element.

Retrieving the Tag Name of a Div Element

<div id="myDiv">This is a div.</div>

<script>
  const divElement = document.getElementById("myDiv");
  const tagName_div = divElement.tagName;
  console.log(tagName_div); // Output: "DIV"
</script>

This example demonstrates retrieving the tag name of a div element.

Advanced Techniques

Using tagName with Event Listeners

The tagName property can be used within event listeners to identify the element that triggered the event.

<button id="myButton">Click me</button>

<script>
  const buttonElement = document.getElementById("myButton");
  buttonElement.addEventListener("click", function(event) {
    const targetTagName_event = event.target.tagName;
    console.log("Clicked element:", targetTagName_event); // Output: "BUTTON"
  });
</script>

In this example, the tagName property is used to identify the element that was clicked.

Using tagName with Collections of Elements

When working with collections of elements, such as those returned by getElementsByTagName or querySelectorAll, the tagName property can be used to filter or process elements based on their tag name.

<div>Item 1</div>
<p>Item 2</p>
<div>Item 3</div>

<script>
  const allElements = document.querySelectorAll("div, p");
  for (let i = 0; i < allElements.length; i++) {
    const element = allElements[i];
    const tagName_collection = element.tagName;
    console.log("Element Tag:", tagName_collection);
    // Process elements based on tag name
    if (tagName_collection === "DIV") {
      element.style.backgroundColor = "lightblue";
    } else if (tagName_collection === "P") {
      element.style.color = "red";
    }
  }
</script>

This example demonstrates how to iterate over a collection of elements and apply different styles based on their tag name.

Using tagName for Conditional Logic

The tagName property can be used to implement conditional logic based on the type of element.

<input type="text" id="myInput">
<textarea id="myTextarea"></textarea>

<script>
  const inputElement = document.getElementById("myInput");
  const textareaElement = document.getElementById("myTextarea");

  function processElement(element) {
    const tagName_conditional = element.tagName;
    if (tagName_conditional === "INPUT") {
      console.log("Processing input element");
    } else if (tagName_conditional === "TEXTAREA") {
      console.log("Processing textarea element");
    }
  }

  processElement(inputElement); // Output: "Processing input element"
  processElement(textareaElement); // Output: "Processing textarea element"
</script>

This example shows how to use the tagName property to determine the type of an element and execute different code based on that type.

Real-World Applications of the tagName Property

The tagName property is used in various scenarios, including:

• Frameworks and Libraries: Identifying and manipulating elements dynamically.
• Content Management Systems (CMS): Applying specific formatting or behavior to different types of content elements.
• Accessibility Tools: Determining the role and type of elements to provide appropriate assistance to users with disabilities.
• Testing Frameworks: Verifying the structure and types of elements in a web page during automated testing.

Use Case Example: Dynamic Form Processing

Let’s create a practical example that demonstrates how to use the tagName property to dynamically process form elements based on their tag name.

<form id="myForm">
  <input type="text" name="name" placeholder="Name"><br>
  <input type="email" name="email" placeholder="Email"><br>
  <textarea name="message" placeholder="Message"></textarea><br>
  <button type="submit">Submit</button>
</form>

<script>
  const formElement = document.getElementById("myForm");

  formElement.addEventListener("submit", function(event) {
    event.preventDefault();

    const formElements = formElement.elements;
    for (let i = 0; i < formElements.length; i++) {
      const element = formElements[i];
      const tagName_form = element.tagName;

      if (tagName_form === "INPUT" || tagName_form === "TEXTAREA") {
        console.log("Processing form element:", element.name, "value:", element.value);
        // Add validation or processing logic here
      } else if (tagName_form === "BUTTON") {
        console.log("Submit button clicked");
      }
    }
  });
</script>

In this example, we iterate over the form elements and use the tagName property to identify the type of each element. We then log the name and value of the input and textarea elements, and log a message when the submit button is clicked. This approach allows for dynamic processing of form elements without needing to know their specific types in advance.

Browser Support

The tagName property is supported by all modern web browsers, ensuring consistent behavior across different platforms.

Conclusion

The tagName property is a fundamental tool for working with HTML elements in JavaScript. It provides a simple and reliable way to determine the type of an element, enabling dynamic and flexible code that can adapt to different situations. By understanding and utilizing the tagName property, you can create more robust and maintainable web applications. Happy coding!