How can I get an element's ID value with JavaScript?

Handling multiple IDs: Loop

Multiple IDs for similar elements? No problem! Use getElementsByTagName to hoard elements by tag and loop through to access each of their IDs:

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    console.log(inputs[i].id); // Logging each input's ID, one by one. Just like a bakery line!
}


Event-based ID retrieval: the Marvel way

For Spider-Man level reflexes, i.e., events, tackle it with this.id in an event listener:

document.addEventListener('click', function(e) {
    if(e.target.tagName === 'BUTTON') {
        alert(e.target.id); // "Surprise!" - The ID of the clicked button 
    }
});


Combining powers with jQuery: One ID ring to rule them all

If jQuery is in your toolkit, grabbing an element's ID is as easy as eating pie:

$('#example').on('click', function() {
    alert($(this).attr('id')); // Shouts 'example', the ring has been found!
});


jQuery's each function is a wizard for multiple elements:

$('input').each(function() {
    alert($(this).attr('id')); // Reveals the ID of each precious (input element)!
});


Pro-Tips for your DOM adventures

It exists! Acknowledgement before Access

Ensure the element is real before accessing the .id, just like crossing a bridge you can see:

var element = document.getElementById('example');
if(element) { // Does the element exist or is it a figment of your imagination?
    var idValue = element.id; // Now that it's real, you can get the 'id'
} else {
    // Oh no! The element doesn't exist, send a recovery crew!
}


The tech chronicles: IDs in JS frameworks

In the mystical lands of JS frameworks like Angular or React, accessing IDs is an exotic practice:

// A React Tale
<Button id="uniqueButton" onClick={(e) => console.log(e.target.id)} />

// An Angular Saga
<button id="uniqueButton" (click)="logId($event)"></button>
// Fellow knights and queens, find the .ts piece of the puzzle 
logId(event: Event) {
    console.log((event.target as HTMLButtonElement).id);
}


Every code has a cost: Performance Considerations

While getElementById is as swift as an arrow, a querySelector might be a lumbering giant with complex selectors. Be mindful of the energy your spells consume in large, sprawling kingdom (large-scale applications).