Attributs

Certaines méthodes et propriétés permettent de récupérer les attributs des balises et de les modifier.

Propriétés et méthodes d'attributs d'Element

MéthodesetAttribute : écriture

1
element.setAttribute(attribute,value);
2
// ou
3
element.attribute = value;

Permet de modifier le contenu d'un attribut.

HTML

1
<input type="checkbox" id="input1" />
2
<label>Suvolez moi pour me changer en radio</label>

JavaScript

1
document.querySelector('#input1 + label').addEventListener('mouseover' , () => {
2
    document.querySelector('#input1').setAttribute('type', 'radio');
3
})

Survolez le label

Attributs - setAttribute

Le type checkbox de l'input est modifié en radio.

MéthodegetAttribute : lecture

1
element.getAttribute(attribute);
2
// ou
3
element.attribute;

Permet de récupérer le contenu d'un attribut.

HTML

1
<img src='../res/javascript.png' id='image1' />
2
<p></p>

JavaScript

1
const image1 = document.querySelector('#image1');
2
const texte = document.querySelector('#image1 + p');
3
image1.addEventListener('mouseover' , function() {
4
    texte.textContent = this.getAttribute('src');
5
});
6
image1.addEventListener('mouseout' , function() {
7
    texte.textContent = "Survolez l'image pour voir l'url";
8
});

Survolez l'image

Attributs - getAttribute

Au survol de l'image le contenu de son attribut src est copié dans le contenu texte du paragraphe.

MéthoderemoveAttribute

1
element.removeAttribute(attribute);

Permet de supprimer un attribut.

HTML

1
<input type="checkbox" id="input2" value='Champ de saisie'/>
2
<label>Suvolez moi pour me changer en type text</label>

JavaScript

1
document.querySelector('#input2 + label').addEventListener('mouseover' , function() {
2
    document.querySelector('#input2').removeAttribute('type');
3
})

Survolez le label

Attributs - removeAttribute

Au survol du label, l'attribut type de la baise <input> est supprimé. Le champ devient un champ de saisie.

DéfinitionclassName : lecture, écriture

1
element.className = value;
2
// ou
3
element.setAttribute('class',value);

Permet de modifier ou lire l'attribut class d'un élément.

le mot clef class étant réservé la propriété class est remplacée par className.

HTML

1
<img src='../res/javascript.png' id='image2' />

CSS

1
.maClasse {
2
    border: 2px solid red;
3
    border-radius: 100px;
4
    width: 200px;
5
}

JavaScript

1
document.querySelector('#image2').addEventListener('mouseover' , function() {
2
    this.className = 'maClasse';
3
})

Survolez l'image

Attributs - className

Ajoute la classe maClasse au survole de l'image.

DéfinitionclassList

classList retourne la liste des classes d'un élément sous forme d'un objet DOMTokenList

Objet DomTokenList
1
element.classList.add(nomClasse); // Ajoute une classe à l'élément
2
element.classList.remove(nomClasse); // Supprime une classe à l'élément
3
element.classList.toggles(nomClasse); // Ajoute ou supprime une classe en fonction de son existence
4
element.classList.contains(nomClasse); // retourne un booléen indiquant l'existence de la classe

HTML

1
<img src='../res/javascript.png' id='image3' />

CSS

1
.maClasse {
2
    border: 2px solid red;
3
    border-radius: 100px;
4
    width: 200px;
5
}

JavaScript

1
document.querySelector('#image3').addEventListener('mouseover' , function() {
2
    this.classList.toggle('maClasse');
3
})

Survolez plusieurs fois l'image

Attributs - classList

Ajoute ou enlève la classe maClasse au survole de l'image.

Attention

Utiliser getAttribute ou la propriété n'est pas complétement équivalent.

Dans certain cas on aura par exemple la valeur null pour l'un et la valeur "" pour l'autre.

Une URL relative pour l'un et une URL absolue pour l'autre.

1
const a = document.querySelector('a');
2
a.href // "fichier.html"
3
a.getAttribute('href') // "http://.../fichier.html"
4
a.name // ""
5
a.getAttribute('name') // null

HTML

1
<img src='../res/javascript.png' id='image4' />
2
<p></p>
3
<p></p>

JavaScript

1
const image4 = document.querySelector('#image4');
2
const texte1 = document.querySelector('#image4 + p');
3
const texte2 = document.querySelector('#image4 + p + p');
4
image4.addEventListener('mouseover' , function() {
5
    texte1.textContent = "getAttribute = " + this.getAttribute('src');
6
    texte2.textContent = " src = " + this.src;
7
})

Survolez l'image

Attributs - getAttribute vs propriété