Javascript get element by name

javascript

prompt-engineering

best-practices

performance

byNikita Barsukov·Nov 22, 2024

In JavaScript, you can retrieve elements by their name using the document.getElementsByName('elementName') method. This method returns a NodeList of elements that share the specified name.

For multiple elements:

var elements = document.getElementsByName('exampleName');

And for a unique element:

var element = document.getElementsByName('uniqueName')[0];

This NodeList is like an array - you can loop through it or use [0] to access a single element.

For accessing the value of an input field, use document.getElementsByName("acc")[0].value.

NodesList detailed overview

When you call getElementsByName, you're getting a NodeList, not just one element. This has implications for handling the NodeList, like looping through elements or accessing a value:

var elements = document.getElementsByName('userInput');
if (elements.length > 0) {
  var firstValue = elements[0].value; // Here we're the Bob Ross of code, checking for the happy little elements. 
}

Modern ways to strut with querySelector

querySelector is a modern and versatile method in JavaScript for element selection:

var elementValue = document.querySelector('[name="uniqueName"]').value;

This not only simplifies the code but also eliminates the need to handle a NodeList when getting a single element value.

Ghost in the code - handling non-existent elements

Sometimes we hunt for ghosts in our documents – elements that don't exist! This can lead to spooky errors. To exorcise these specters, simply perform a null check:

var element = document.getElementsByName('nonExistentName')[0];
if (element) {
  var value = element.value; // If you can see me, I'm not a ghost!
} else {
  // Cue the Ghostbusters theme...
}

Tweaking for performance

In performance-sensitive scenarios or when dealing with a large DOM, IDs or specific selectors might be a better choice. getElementById can be a faster alternative:

var elementById = document.getElementById('uniqueId'); // Flash! Ah-ah! Savior of the universe!

Input retrieval tips

When validating input or handling form data, getting input values is a common task:

function validate() {
  var nameElement = document.getElementsByName('username')[0];
  if (nameElement && nameElement.value) {
    // Validation logic here
    alert('Username: ' + nameElement.value); // Username, username, wherefore art thou username? 
  } else {
    alert('Username input not found or empty.');
  }
}

Avoiding the bear traps

Be exact: Attribute names are case-sensitive:

var elements = document.getElementsByName('CaseSensitiveName');

Names aren't unique: Multiple elements can share the name.

Grumpy old browsers: getElementsByName works in modern browsers, but if you're targeting older ones, keep a browser compatibility list handy.

Out-of-bounds: Always check the NodeList length before accessing its elements to avoid a rogue undefined:

if (elements.length > 0) {
  var value = elements[0].value;
}

Level up your JavaScript

Keeping up with best practices and staying ahead of the curve will make your code more readable, efficient, and maintainable:

Use let and const in place of var for variables in block scope.
Simplify your code by choosing querySelector over getElementsByName when you don't need the NodeList.
Validate and check for nulls before accessing their properties.