DWEC
Desenvolupament web en entorn client (DAW)
Creació i navegació pels nodes DOM
Navegació
Podem navegar per l’arbre del DOM utilitzant les relacions entre els nodes.
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
<script>
</script>
</html>
Obrir Console (F12):
document;
document.firstElementChild;
document.firstElementChild.firstElementChild;
document.firstElementChild.firstElementChild.nextElementSibling;
document.firstElementChild.firstElementChild.nextElementSibling.firstElementChild;
document.firstElementChild.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling;
Nodes
Creant nous elements HTML (nodes):
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
Explicació
-
Aquest codi crea un nou element
<p>:var para = document.createElement("p"); -
Per afegir text a l’element <p>, cal crear un node de text primer. Aquest codi crea un node de text:
var node = document.createTextNode("This is a new paragraph."); - Llavors s’ha d’afegir el node de text a l’element
<p>:para.appendChild(node); -
Finalment, cal afegir el nou element a l’element existent.
Aquest codi busca l’element existent:
var element = document.getElementById("div1"); - Aquest codi afegeix el nou element a l’element existent:
element.appendChild(para);
Altres operacions
També és possible:
- Inserir elements abans que un altre element existent
- Eliminar elements existents.
- Reemplaçar elements Es poden trobar les explicacions d’aquestes tasques a l’apartat de w3schools corresponent.
Col·leccions
L’objecte HTMLCollection
El mètode getElementsByTagName() retorna un objecte HTMLCollection.
Un objecte HTMLCollection és com un array list (col·lecció) d’elements HTML.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p id="demo"></p>
<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"The innerHTML of the second paragraph is: " +
myCollection[1].innerHTML;
</script>
</body>
</html>
La longitud (lenght) de l’HTMLCollection
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p>Click the button to change the color of all p elements.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
}
</script>
</body>
</html>
HTMLCollectionno és un array!
HTMLCollectionpot semblar un array, però no ho és.Pots recòrrer a la llista i referir-te als elements amb un número (igual que un array).
Però no pot utilitzar els mètodes dels arrays com
valueOf(),pop(),push(), ojoin()en unHTMLCollection.
Llistes de nodes
Els objectes NodeList son molt semblants als objectes HTMLCollection.
Alguns navegadors antics retornen un objecte NodeList enlloc d’un HTMLCollection en determinats mètodes.
També hi han mètodes que retornen NodeList en tots els navegadors.
Veure l’apartat corresponent de w3schools si cal més informació.