DOM - Attribute

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

• https://api.jquery.com/attr/

• 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