Javascript : DOM
- François Brucker
Manipulation de l'arbre DOM en javascript.
Accès aux éléments
Créez un fichier javascript-dom.html et copiez/collez le contenu suivant :
<html>
<head>
<title>Magie javascript</title>
</head>
<body>
<style>
body,
html {
margin: 0;
padding: 0;
background: skyblue;
color: #FFFFFF;
font-size: 2em;
text-align: center;
}
.milieu {
margin: 10px auto;
height: 50px;
width: 20px;
}
.color {
background-color: olive;
}
</style>
<h1> Enfin du web !</h1>
<p> et on <strong>aime</strong> ça</p>
<div id="mon_div" class="milieu"></div>
<p>!</p>
<script>
document
.getElementById("mon_div")
.style
.backgroundColor = "blue"
</script>
</body>
</html>Ouvrez le avec votre navigateur.
On ne peut pas mettre le code avant la déclaration du div (ce n'est pas comme du css).
Testez le pour voir.
L'objet document est le point d'accès à l'arbre DOM. Il nous permet de récupérer les éléments de cet arbre.
Dans notre cas, nous récupérons un HTMLElement qui hérite de Element. Un HTMLElement possède de nombreux attributs auxquels on peut accéder, comme le style.
On peut aussi accéder aux éléments par :
- leur tag :
document.getElementsByTagName("p") - leurs classes :
document.getElementsByClassName("milieu")(on peut mettre plusieurs classes en les séparant par des espaces)
Seul la méthode document.getElementById rend directement un élément. Les autres méthodes rendent un conteneur de type HTMLCollection que l'on peut manipuler comme un tableau :
let list = document.getElementsByTagName("p");
for (let i = 0; i < list.length; i++) {
console.log(list[i]);
}Dans la console du fichier javascript_dom.html, accédez aux éléments par leur nom et leurs classes.
Naviguer dans l'arbre
TBD : arbre DOM : Node -> element -> HTMLElement
On peut naviguer dans l'arbre DOM en parcourant ses nœuds.
Notez qu'un élément possède aussi un attribut children. La différence tient au fait que children ne contient que les fils qui sont eux-même des éléments. Pas les champs texte par exemple.
Dans la console du fichier javascript_dom.html, Remarquez la différence entre document.getElementsByTagName("p")[0].childNodes et document.getElementsByTagName("p")[0].children
Modifier des éléments
Cela vaut le coup de jeter un coup d’œil aux attributs et méthodes des Element ou des HTMLElement, elles permettent de contrôler très finement et de connaître parfaitement l'arbre DOM.
style
Dans l'exemple précédent on a accédé au style d'un HTMLElement.
On peut aussi directement accéder à n'importe quel attribut d'un Element avec les méthodes getAttribute et setAttributes qui nous permettent de changer tous les attributs.
classes
element.classList qui rend une liste permettant d'ajouter ou supprimer ue class
texte
Attribut innerHtml ou innerText
Dans la console du fichier javascript_dom.html, Remarquez la différence entre document.getElementsByTagName("p")[0].innerText et document.getElementsByTagName("p")[0].innerHtml
Créer des éléments
On peut facilement ajouter des éléments à l'arbre DOM grace à la fonction document.createElement et à la méthode appendChild des éléments.
Ajoutez au fichier javascript_dom.html le code ci-après pour ajouter une liste dans le div :
<script>
let liste_non_orientée = document.createElement('ul')
let tab = ["oui", "non", "peut-être", "je ne sais pas"]
tab.forEach((cat) => {
let li = document.createElement('li')
button = document.createElement('button')
button.appendChild(document.createTextNode(cat))
button.setAttribute("id", cat)
button.setAttribute("class", "color")
li.appendChild(button)
liste_non_orientée.appendChild(li)
})
document
.getElementById("mon_div")
.appendChild(liste_non_orientée)
document
.getElementById("mon_div")
.style
.width = 'auto'
document
.getElementById("mon_div")
.style
.height = 'auto'
</script>