Diferència entre revisions de la pàgina «M06 UF3A1. Teoria II»
Salta a la navegació
Salta a la cerca
(Es crea la pàgina amb «=T6. Teoria de Nodes= (TBD) =T7. Exemple childNodes= *https://www.w3schools.com/jsref/prop_node_nodevalue.asp ==Exemple 1: childNodes.html== <pre> <!DOCTYPE html> <htm...».) |
|||
| Línia 1: | Línia 1: | ||
=T6. Teoria de Nodes= | =T6. Teoria de Nodes= | ||
| − | ( | + | Navegar pels nodes del DOM (pensat com a document XML) |
| + | *https://www.w3schools.com/js/js_htmldom_navigation.asp | ||
| + | Crear i eliminar nodes: | ||
| + | *https://www.w3schools.com/js/js_htmldom_nodes.asp | ||
| + | |||
=T7. Exemple childNodes= | =T7. Exemple childNodes= | ||
*https://www.w3schools.com/jsref/prop_node_nodevalue.asp | *https://www.w3schools.com/jsref/prop_node_nodevalue.asp | ||
Revisió del 15:55, 23 nov 2021
Contingut
T6. Teoria de Nodes
Navegar pels nodes del DOM (pensat com a document XML)
Crear i eliminar nodes:
T7. Exemple childNodes
Exemple 1: childNodes.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<body>
<div id="id01" style="background-color:yellow;">Node Text1 del DIV
<p id="id02">aaa</p>Node Text2 del DIV
<p id="id03">bbb</p>Node Text3 del DIV
<p id="id04">ccc</p>Node Text4 del DIV
<p id="id05">ddd</p>Node Text5 del DIV
</div>
<br />
<script>
var x = document.getElementById("id01");
var str = "Núm nodes: " + x.childNodes.length + "<br />";
for (var i=0; i<x.childNodes.length;i++) {
//nodeName Property
//nodeValue Property
//nodeType Property
str += "nodeName: " + x.childNodes[i].nodeName + " - ";
str += "nodeValue: " + x.childNodes[i].nodeValue + " - ";
str += "nodeType: " + x.childNodes[i].nodeType + "<br />";
}
//x.childNodes[0].nodeValue = x.id;
document.write(str);
</script>
<br /><br />
<script>
//https://www.w3schools.com/jsref/prop_node_nodevalue.asp
// If the node is an element node, the nodeValue property will return null.
// Note: If you want to return the text of an element, remember that text is always inside a Text node, and you will have to return the Text node's node value (element.childNodes[0].nodeValue).
document.write("Si volem accedir al contingut dels paràgrafs:<br />");
y = x.childNodes[1];
document.write(y.innerHTML + "<br />"); //aaa
document.write(y.nodeValue + "<br />"); //null
document.write(y.childNodes[0].nodeValue + "<br />"); //aaa
document.write(x.childNodes[1].childNodes[0].nodeValue + "<br />"); //aaa
</script>
</body>
</html>
NOTA: Fixem_nos bé que un caràcter de retorn de carro és un caràcter ASCII, i per tant és un node de text. És per això que aquesta peça de codi té 4 nodes de text amagats:
<div id="id01" style="background-color:yellow;"> <p id="id02">aaa</p> <p id="id03">bbb</p> <p id="id04">ccc</p> </div>
Exemple 2 childNodes
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p><br />
<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);
console.log(element.childNodes.length);
for (var i=0; i<element.childNodes.length; i++ ) {
console.log(element.childNodes[i].nodeType);
console.log(element.childNodes[i].nodeName);
console.log(element.childNodes[i].nodeValue);
}
var ele = element.childNodes[1]; //és el prime paràgraf
console.log(ele.nodeType);
console.log(ele.childNodes.length);
console.log(ele.childNodes[0].nodeValue);
</script>
</body>
</html>
