Gestionarea atributelor elementelor

Pentru gestionarea atributelor elementelor, JavaScript oferă o serie de metode:

• getAttribute(attr): returnează valoarea atributului attr
• createAttribute(attr): creează atributul attr
• setAttribute(attr, value): stabilește pentru atributul attr valoarea value. Dacă atributul nu există, acesta este adăugat
• removeAttribute(attr): elimină atributul attr și valoarea sa

Obținerea unui atribut

Pentru a obține un atribut al unui element, se apelează metoda getAttribute(), în care se transmite numele atributului. De exemplu, să presupunem că avem pe pagină următorul element, care reprezintă un link:

<a id="home" class="link" href="index.html">Home</a>

Obținem atributele acestui element:

// obținem elementul
const element = document.getElementById("home");
// obținem atributele elementului
console.log(element.getAttribute("id"));    // home
console.log(element.getAttribute("class")); // link
console.log(element.getAttribute("href"));  // index.html

De menționat că atributele elementelor sunt, de asemenea, accesibile prin proprietățile lor, care se numesc similar cu atributele (cu rare excepții):

// obținem elementul
const element = document.getElementById("home");
// obținem atributele elementului
console.log(element.id);    // home
console.log(element.className); // link
console.log(element.href);  // file://PS C:\app\js>

Excepția se referă în special la atributul "class", care este accesibil prin proprietatea className.

De asemenea, proprietățile pot returna valori ușor diferite. De exemplu, proprietatea href returnează linkul complet, în timp ce metoda getAttribute("href") - valoarea directă a atributului.

Același lucru se aplică și atributului style:

<a id="home" style="color:red;" href="index.html">Home</a>
<script>
// obținem elementul
const element = document.getElementById("home");
// obținem atributele elementului
console.log(element.style);    // CSSStyleDeclaration
console.log(element.getAttribute("style")); // color:red;
</script>

Metoda getAttribute("style") returnează stilul sub formă de text, iar proprietatea style - un obiect CSSStyleDeclaration, cu ajutorul proprietăților căruia se pot obține aspecte individuale ale stilului.

Setarea atributelor

Pentru a seta valorile atributelor se folosește metoda setAttribute(attr, value), al cărei prim parametru este atributul care se stabilește, iar al doilea - valoarea sa:

<a id="home" href="index.html">Home</a>
<script>
// obținem elementul
const element = document.getElementById("home");
// stabilim atributul href
element.setAttribute("href", "https://metanit.com");
// stabilim atributul style
element.setAttribute("style", "color:navy;");
</script>

Aici schimbăm atributul "href" și stabilim atributul "style". Deoarece atributul "style" inițial lipsește, acesta va fi adăugat. Dar trebuie menționat că, în realitate, acest lucru va duce la crearea unui nod Node care reprezintă atributul.

Acestui nod i se va seta valoarea corespunzătoare, și apoi nodul atributului este adăugat în colecția de noduri copil ale elementului. Adică, de fapt, va arăta astfel:

<a id="home" href="https://FDC.com">Home</a>
<script>
// obținem elementul
const element = document.getElementById("home");
// creăm un nod-atribut style
const attribute = document.createAttribute("style");
// stabilim valoarea nodului-atribut
attribute.value = "color:navy;";
// stabilim nodul atribut
element.setAttributeNode(attribute);
</script>

Ștergerea unui atribut

Pentru ștergerea unui atribut se folosește metoda removeAttribute(), în care se transmite atributul de șters:

<a id="home" href="https://FDC.com" style="color:navy;">Home</a>
<script>
// obținem elementul
const element = document.getElementById("home");
// ștergem atributul style
element.removeAttribute("style");
</script>