Jquery: Get selected element tag name

Resolving tag names in older jQuery versions

For older versions of jQuery (< 1.6) that do not support .prop(), you can opt to use .attr("tagName") or fallback to DOM's nodeName like:

var oldTagName = $('selector').attr('tagName') || $('selector')[0].nodeName;


Accessing the DOM directly without using jQuery's .prop() comes handy too:

var directDOMTagName = $('selector')[0].tagName;


This approach directly leverages the native browser's DOM to fetch the tag name.

Implementing a jQuery utility function

Crafting custom utility functions in jQuery can turbocharge your work, especially when you tag hunt frequently:

// "Hello, it's me. Who am I?" - Adele, probably. Tag names want identity crisis to end too! 
jQuery.fn.tagName = function() {
    return this.prop('tagName');
};

// Using the crafted utility for identity verification
var tag = $('#element').tagName();


Similarly, for fetching tag names in lowercase:

// Some like it HOT. But tag names like it lowercase.
jQuery.fn.tagNameLowerCase = function() {
    return this.prop('tagName').toLowerCase();
};

var tag = $('#element').tagNameLowerCase();


Multiple avenues for fetching tag names

Event-driven tag name collection

Acquire the tag name of the clicked element during an event handler's execution:

$('selector').on('click', function() {
    var clickTagName = $(this).prop('tagName').toLowerCase();
    console.log('Clicked on:', clickTagName);
    // Console: "Clicked on: celeb" - Paparazzi, probably
});


Utilizing tag names for conditional logic

Utilize tag names for conditional logic:

var tagName = $('selector').prop('tagName');
if (tagName === 'INPUT') {
    console.log('The element is an input field.'); // "I'm worthy of keyboard strokes!" - Input Field
} else if (tagName === 'DIV') {
    console.log('The element is a division.');
}


Use .toLowerCase() on tag names for case-insensitive comparisons and uniform string processing:

if (tagName.toLowerCase() === 'input') {
    // User-interface (UI) related tasks for inputs
}


Using custom selectors for tag verification

If using a custom selector, use .is() to check for a match:

if ($('selector').is('input')) {
    // UX work specifically for input fields
}


Pitfalls and their resolutions

Pitfall: Difference in tag case

Resolve this by normalizing the case using .toLowerCase().

Pitfall: Mix up between .attr() and .prop()

In jQuery 1.6+, prefer .prop() over .attr(). It's faster and more precise when hunting for tag names.

Pitfall: Unrecognized tags in custom XML namespaces

When working with XML or SVG files that require namespace and tag separation, use a method that respects namespacing rules for accurate tag fetching.