DOM - Attribute
Table of Contents
About
attributes representation in the DOM.
Node attributes are not included as children in the DOM hierarchy but are properties of an element.
Articles Related
Management
Get
Get Pure Javascript
- The HTML with the style attribute that we want to change
<p>My sweat suit is <span style="color: green">green</span> </p>
- Select the P element
spanElement = document.querySelector('body>p>span');
- Get the attribute value
style = spanElement.getAttribute ('style');
console.log("The style attribute has the value: ("+style + ")");
- Result:
Get Jquery
- The library
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
- The HTML with the data-attr to get the value from
<span data-attr="You got me"></span>
- The code that outputs the value of the data-attr
let attrValue = $('span').attr('data-attr');
console.log('The value of the data-attr attribute is : '+attrValue);
- Result:
Set
- The HTML with the style attribute that we want to change
<p>My sweat suit is <span style="color: green">green</span> </p>
- Select the P element
spanElement = document.querySelector('body>p>span');
- Set the attribute to the color red
spanElement.setAttribute ('style','color:red');
- Result:
- You can check the DOM HTML with the devtool
Remove
element.removeAttribute
With element.removeAttribute(attrName).
Demo:
- A button with a style attribute that will be deleted when we click on it
<button style="color:white;background:steelblue">Delete my style</button>
- The javascript that select the first button and add a click event listener callback that remove the attribute on the target
document.querySelector('button').addEventListener("click", function (event) {
event.target.removeAttribute("style");
});
- Click on the button to delete its style attribute
Jquery.removeAttr
With JQuery, you would use removeAttr