JavaScript getAttributeNames
last modified April 2, 2025
In this article, we explore the element.getAttributeNames method in
JavaScript. This method returns an array of all attribute names for an element.
It's useful for inspecting and working with element attributes dynamically.
Basic Definition
The getAttributeNames method returns an array of strings containing
all attribute names of the specified element. This includes both standard HTML
attributes and custom data attributes.
Unlike accessing attributes individually, this method provides a complete list. It's particularly useful when you need to examine all attributes of an element without knowing their names in advance.
Basic getAttributeNames
This example demonstrates how to get all attribute names from a simple div element.
<!DOCTYPE html>
<html>
<head>
<title>Basic getAttributeNames</title>
</head>
<body>
<div id="content" class="main" data-info="sample">Example div</div>
<script>
const element = document.querySelector('div');
const attributes = element.getAttributeNames();
console.log(attributes); // ["id", "class", "data-info"]
</script>
</body>
</html>
In this basic example, we have a div element with three attributes. The
JavaScript code retrieves all attribute names using getAttributeNames
and logs them to the console.
The method returns an array containing "id", "class", and "data-info". This shows how it captures both standard and custom data attributes.
Working with Form Elements
This example shows how to inspect attributes of form input elements.
<!DOCTYPE html>
<html>
<head>
<title>Form Element Attributes</title>
</head>
<body>
<input type="text" id="username"
placeholder="Enter name" required data-validation="strict">
<script>
const input = document.getElementById('username');
const attributes = input.getAttributeNames();
attributes.forEach(attr => {
console.log(`${attr}: ${input.getAttribute(attr)}`);
});
</script>
</body>
</html>
Here we have an input element with several attributes. The code gets all attribute names and then loops through them to log both names and values.
This demonstrates how getAttributeNames can be combined with
getAttribute to inspect all attributes of an element
programmatically.
Checking for Specific Attributes
This example demonstrates how to check if an element has specific attributes.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Checking</title>
</head>
<body>
<button id="submitBtn" disabled data-action="save">Submit</button>
<script>
const button = document.getElementById('submitBtn');
const attributes = button.getAttributeNames();
console.log('Has disabled attribute:', attributes.includes('disabled'));
console.log('Has data-action attribute:', attributes.includes('data-action'));
console.log('Has non-existent attribute:', attributes.includes('aria-label'));
</script>
</body>
</html>
In this example, we check if specific attributes exist on a button element.
The includes method is used on the array returned by
getAttributeNames.
This technique is useful for feature detection or conditional logic based on an element's attributes. It's more reliable than checking attribute values directly.
Dynamic Attribute Inspection
This example shows how to dynamically inspect attributes after they change.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Attributes</title>
</head>
<body>
<div id="dynamicDiv">Watch my attributes</div>
<button onclick="addAttribute()">Add Attribute</button>
<button onclick="showAttributes()">Show Attributes</button>
<script>
function addAttribute() {
const div = document.getElementById('dynamicDiv');
const count = div.getAttributeNames().length;
div.setAttribute(`data-attr-${count}`, `value-${count}`);
}
function showAttributes() {
const div = document.getElementById('dynamicDiv');
console.log(div.getAttributeNames());
}
</script>
</body>
</html>
Here we have a div and two buttons. One button adds new attributes to the div, while the other shows all current attributes.
This demonstrates how getAttributeNames can be used to track
dynamic changes to an element's attributes. The method always returns the
current state of attributes.
Comparing Elements by Attributes
This example shows how to compare two elements based on their attributes.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Comparison</title>
</head>
<body>
<div class="box" id="box1" data-color="red">Box 1</div>
<div class="box" id="box2" data-color="blue">Box 2</div>
<script>
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
const box1Attrs = box1.getAttributeNames();
const box2Attrs = box2.getAttributeNames();
// Check if they have the same attribute names (order doesn't matter)
const sameAttributes = box1Attrs.length === box2Attrs.length &&
box1Attrs.every(attr => box2Attrs.includes(attr));
console.log('Same attributes:', sameAttributes);
</script>
</body>
</html>
In this example, we compare two div elements to see if they have the same set of attribute names, regardless of values.
This technique can be useful when you need to verify that elements follow a specific attribute pattern or when implementing custom diffing algorithms.
Source
MDN getAttributeNames Documentation
In this article, we have shown how to use element.getAttributeNames
in JavaScript. This method provides powerful capabilities for working with and
inspecting element attributes in web development.
Author
List all JS DOM tutorials.