ZetCode

JavaScript getAttribute

last modified April 2, 2025

In this article, we explore the element.getAttribute method in JavaScript. This method is essential for accessing attribute values of DOM elements, allowing developers to read custom data attributes and more.

Basic Definition

The getAttribute method returns the value of a specified attribute on the element. If the attribute doesn't exist, it returns null or an empty string.

This method works with both standard HTML attributes (like 'id', 'class') and custom data attributes (like 'data-*'). It's case-insensitive for HTML elements.

Basic getAttribute Example

This example demonstrates how to access a simple data attribute from an element.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Basic getAttribute</title>
</head>
<body>

<div id="user" data-user-id="12345">User Profile</div>

<script>
    const userDiv = document.getElementById('user');
    const userId = userDiv.getAttribute('data-user-id');
    console.log(userId); // Outputs: 12345
</script>

</body>
</html>

In this basic example, we have a div element with a custom data attribute. The JavaScript code retrieves this attribute using getAttribute.

This demonstrates the fundamental usage of getAttribute to access element attributes. The method returns the attribute value as a string.

Checking for Attribute Existence

This example shows how to check if an attribute exists on an element.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Attribute Existence</title>
</head>
<body>

<button id="btn1" disabled>Disabled Button</button>
<button id="btn2">Enabled Button</button>

<script>
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    
    console.log(btn1.getAttribute('disabled') !== null); // true
    console.log(btn2.getAttribute('disabled') !== null); // false
</script>

</body>
</html>

Here we have two buttons, one with the disabled attribute and one without. The script checks for the presence of the disabled attribute using getAttribute.

This demonstrates how getAttribute can be used to test for attribute existence. It returns null when the attribute doesn't exist.

Working with Custom Data Attributes

This example demonstrates accessing custom data attributes with getAttribute.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Custom Data Attributes</title>
</head>
<body>

<div id="product" 
     data-id="P1001" 
     data-price="29.99" 
     data-category="electronics">
    Smartphone
</div>

<script>
    const product = document.getElementById('product');
    const id = product.getAttribute('data-id');
    const price = product.getAttribute('data-price');
    const category = product.getAttribute('data-category');
    
    console.log(`Product ${id} costs $${price} (${category})`);
</script>

</body>
</html>

In this example, we have a product div with multiple custom data attributes. The script retrieves all these values using getAttribute.

This shows how getAttribute can access multiple custom data attributes. These are commonly used to store extra information in HTML.

Comparing with dataset Property

This example compares getAttribute with the dataset property for data attributes.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>getAttribute vs dataset</title>
</head>
<body>

<div id="item" data-item-id="A100" data-item-color="blue">
    Sample Item
</div>

<script>
    const item = document.getElementById('item');
    
    // Using getAttribute
    console.log(item.getAttribute('data-item-id')); // A100
    console.log(item.getAttribute('data-item-color')); // blue
    
    // Using dataset
    console.log(item.dataset.itemId); // A100
    console.log(item.dataset.itemColor); // blue
</script>

</body>
</html>

Here we demonstrate two ways to access data attributes: with getAttribute and with the dataset property.

While both methods work, dataset provides a more convenient interface for data attributes, automatically converting names to camelCase.

Getting Standard HTML Attributes

This example shows how to get standard HTML attribute values.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Standard Attributes</title>
</head>
<body>

<a id="link" href="https://example.com" target="_blank" title="Example">
    Visit Example
</a>

<script>
    const link = document.getElementById('link');
    
    console.log(link.getAttribute('href')); // https://example.com
    console.log(link.getAttribute('target')); // _blank
    console.log(link.getAttribute('title')); // Example
</script>

</body>
</html>

In this example, we access standard HTML attributes of an anchor element using getAttribute. This works for all standard HTML attributes.

This demonstrates that getAttribute is versatile and can retrieve any attribute value, whether standard or custom, from HTML elements.

Source

MDN getAttribute Documentation

In this article, we have shown how to use element.getAttribute in JavaScript. This method is fundamental for accessing element attributes in web development.

Author

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all JS DOM tutorials.