Scribd
Upload
6 views3 pages

Thakzk

The document explains HTML attributes, which provide additional information for elements, and how to access them using JavaScript methods like hasAttribute(), getAttribute(), and setAttribute(). It includes examples demonstrating how to check for, retrieve, and modify attributes of HTML elements using getElementById. Additionally, it covers custom attributes and dynamically changing image attributes to enhance web applications.

Uploaded by

Hafsa Nadeem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views3 pages

Thakzk

The document explains HTML attributes, which provide additional information for elements, and how to access them using JavaScript methods like hasAttribute(), getAttribute(), and setAttribute(). It includes examples demonstrating how to check for, retrieve, and modify attributes of HTML elements using getElementById. Additionally, it covers custom attributes and dynamically changing image attributes to enhance web applications.

Uploaded by

Hafsa Nadeem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

1. What Are Attributes?

Attributes in HTML define additional information or functionality for an element.


They're not child nodes but rather properties of an element.

Example:
<a href="http://www.amazon.com">Shop</a>

Here:

 The element is <a>.


 The text node is "Shop" (the clickable text inside).
 The attribute is href="http://www.amazon.com".

2. Accessing Attributes in JavaScript

You can interact with attributes using the following methods:

1. Check if an attribute exists: hasAttribute().


2. Retrieve an attribute's value: getAttribute().
3. Set or modify an attribute: setAttribute().

3. Examples Using getElementById

Example 1: Checking for an Attribute

Use hasAttribute() to verify if an element has a specific attribute.


<div id="p1" class="special">Hello</div>
<script>
// Select the element using its ID
var element = document.getElementById("p1");

// Check if the element has a "class" attribute


var hasClass = element.hasAttribute("class");
console.log(hasClass); // Output: true
</script>

Example 2: Reading an Attribute's Value

Use getAttribute() to get the value of a specific attribute.


<div id="p1" class="special">Hello</div>
<script>
// Select the element by ID
var element = document.getElementById("p1");

// Get the value of the "class" attribute


var classValue = element.getAttribute("class");
console.log(classValue); // Output: special
</script>

Example 3: Setting or Modifying an Attribute

Use setAttribute() to add or change an attribute's value.


<div id="p1">Hello</div>
<script>
// Select the element by ID
var element = document.getElementById("p1");

// Set a "class" attribute with the value "highlight"


element.setAttribute("class", "highlight");
console.log(element.outerHTML);
// Output: <div id="p1" class="highlight">Hello</div>
</script>

4. Example with Custom Attributes

Custom attributes (like data-*) are often used for storing extra information.
<div id="product" title="snacks">Cookies</div>
<script>
// Select the element by ID
var product = document.getElementById("product");

// Check if the "title" attribute exists


console.log(product.hasAttribute("title")); // Output: true
// Get the value of the "title" attribute
console.log(product.getAttribute("title")); // Output: snacks

// Modify the "title" attribute value


product.setAttribute("title", "beverages");
console.log(product.outerHTML);
// Output: <div id="product" data-category="beverages">Cookies</div>
</script>

5. Example: Dynamically Changing Image Attributes

Here’s how to dynamically modify an image’s attributes using getElementById:


<img id="profile" src="default.png" alt="Default Profile" width="100">
<script>
// Select the image element
var img = document.getElementById("profile");

// Check if the "src" attribute exists


console.log(img.hasAttribute("src")); // Output: true

// Get the value of the "src" attribute


console.log(img.getAttribute("src")); // Output: default.png

// Change the "src" attribute value


img.setAttribute("src", "user.png");

// Change the "alt" attribute value


img.setAttribute("alt", "User Profile Picture");

console.log(img.outerHTML);
// Output: <img id="profile" src="user.png" alt="User Profile Picture" width="100">
</script>

6. Final Notes

 hasAttribute: Checks if an attribute exists.


 getAttribute: Retrieves the value of an attribute.
 setAttribute: Adds or updates an attribute's value.

Using these methods with getElementById, you can dynamically interact with HTML
elements and their attributes to create engaging and functional web applications!

You might also like