Joan: /* Exercici 8 */

2018-11-28T15:41:30Z

Exercici 8

Pàgina nova

=Introducció=

=Referències=
A classe hem explicat els següents exemples:

Return the number of images in a document
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_images
Return the id of the first image in a document
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_images2
Return the number of links in a document
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_links
Open an output stream, and add some text
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open
Alert the number of elements with a specific name
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementsbyname
Alert the number of elements with a specific tagname
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementsbytagname
Return the value of the href attribute of a link
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_anchor_href
(més fàcil: alert(document.getElementsByTagName("A")[0].href); )

Return the coordinates of an area in an image-map
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_coords
Set a button to disabled when clicked
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_button_disabled
Return the id of the form a button belongs to
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_button_form
Submit a form
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_submit
Change the background color of the document contained in an iframe
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_contentdocument
Remove frameborder of an iframe
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_frameborder2

Add border to an image.

'''nota'''. Com es comenta a 'http://www.w3schools.com/jsref/dom_obj_image.asp'', ja no podem utiltizar la propietat ''border'', sinó que en html5 hem d'utiltizar ''.style.border''.
<pre>
<!DOCTYPE html>
<html>
<body>

<p>Clica el botó per posar un contorn</p>

<img src="./arcade.jpg" />
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var img = document.images[0];
alert(img.src);
img.style.border = "thick solid #0000FF";
}
</script>

</body>
</html>
</pre>

Change the src of an image
*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src
<pre>
<!DOCTYPE html>
<html>
<body>

<p>Clica el botó per canviar la imatge</p>

<img src="./arcade.jpg" />
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var img = document.images[0];
img.src='./arcade2.jpg';
}
</script>

</body>
</html>
</pre>

'''Repàs''': la llista de tots els events que pots utiltizar els trobaràs a:
*http://www.w3schools.com/jsref/dom_obj_event.asp

Get the number of options in the dropdown list
*http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_length

Variant: Donat el següent formulari, quantes opcions té la segona select del formulari?
<pre>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form>
<input type="nom" />
<input type="cognom" />

<select>
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>

<select>
<option>Seat</option>
<option>Mercedes</option>
<option>Citroen</option>
</select>

</form>

<p>There are <span id="demo">0</span> options in the list.</p>

<script>
var ele = document.forms[0].elements;
var a=0;
for(var i=0; i<ele.length; i++) {

//alert(document.forms[0].elements[i].type);
//alert(ele[i].type);
if(ele[i].type == 'select-one') {
a++;
if(a==2) alert(document.forms[0].elements[i].length)
}

}
</script>

</body>
</html>
</pre>
Turn the dropdown list into a multiline list
*http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_size
Select multiple options in a dropdown list:
*http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_multiple
'''Nota''': a http://www.w3schools.com/tags/tag_select.asp trobaràs la referència del tag ''<select>'', i allà pots veure que hi ha la propietat ''multiple''.

Remove options from a dropdown list
*http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_remove
Change the width of a table border (s'ha de fer amb style)

Add options from a dropdown list
<pre>
<!DOCTYPE html>
<html>
<head>
<script>
function afegirOption() {
var sel_fruites=document.getElementById("fruites")
var opt_fruites = sel_fruites.options;
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.text = "Kiwi";
option2.text = "Taronja";
sel_fruites.add(option1); //afegir al final, per defecte
sel_fruites.add(option2, sel_fruites[0]); //afegir al principi
}
</script>
</head>
<body>

<form>
<select id="fruites" >
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="afegirOption()" value="Afegir opció">
</form>

</body>
</html>
</pre>

Delete rows in a table
*http://www.w3schools.com/jsref/met_table_deleterow.asp
Change the content of a table cell
*http://www.w3schools.com/jsref/coll_tr_cells.asp
<pre>
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to return the number of cells in the table's first row.</p>

<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
function myFunction() {
var taula = document.getElementById("myTable");
//var taula = document.tables[0];
var files = taula.rows;
var celles = files[0].cells;
var num_celles = celles.length; //és el mateix que número de columnes

document.getElementById("demo1").innerHTML = "Found " + num_celles + " cells in the first tr element.";

document.getElementById("demo2").innerHTML = "Contingut de la 1a cel.la: " + celles[0].innerHTML;

}
</script>

</body>
</html>
</pre>

'''El Sudoku''':
*http://www.sudokubum.com/
Pots trobar codi font Javascript per fer i resoldre Sudokus, com l'enllaç anterior. Si mires dins el codi segur que trobaràs moltes referències als objectes ''cells'', ''rows'', etc. És un bon exercici mirar de llegir (i entedre) codi.

*http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_cells_item
Fixa't bé que aquestes dues sentències són equivalents:
<pre>
alert(document.getElementById("myTable").rows[0].cells[0].innerHTML);
alert(document.getElementById("myTable").rows[0].cells.item(0).innerHTML);
</pre>

'''nota''': aquests són exemples explicats/comentats a classe explícitament, però l'alumne hauria de mirar amb tot detall la resta d'exercicis mostrats a:

JavaScript HTML DOM Examples:
*http://www.w3schools.com/js/js_dom_examples.asp
JavaScript HTML DOM Events Examples
*http://www.w3schools.com/js/js_events_examples.asp

Sobre aquests exemples fem alguns exercicis.

=Desenvolupament=
==Enunciats==
L'alumne ha de realitzar els següents exercicis:

'''1. ''' Formulari: ficar tots els elements d'un formulari de color blau cel. El formulari ha de contenir caixes de text, radio button, check box, select box, text area i buttons. El text del formulari estarà dins de labels.

'''2. ''' pàgina web: retornar la url de tots els enllaços de la web

'''3. ''' Tenim tres imatges. Afegir un border quan fem onmouseover sobre la imatge, amb diferent color segons la imatge: blau, verd i vermell

'''4. ''' dropdown list (select box). Tenim un formulari amb una caixa de text, dos botons (amb value ''afegir'' i value ''treure''), i una select box. Es tracta d'anar afegint i treient elements de la select box.

'''5. ''' taula dinàmica. En l'exercici 2 has retornat tots els links d'una pàgina. Ara els hauràs de posar en forma de taula, a tres columnes: 1a columna, l'index de la fila; 2a columna: el text del link; 3a columna, la URL del link

'''6. ''' Tens una taula amb l'estructura país / num_habitants / superfície. Recorre dinàmicament tota la taula (a través de la col.lecció ''rows'' i la col.lecció ''cells'', i digues el número total d'habitants i la superfície total.

==Solucions==
===Exercici 1===
1. Formulari: ficar tots els elements d'un formulari de color blau cel. El formulari ha de contenir caixes de text, radio button, check box, select box, text area i buttons. El text del formulari estarà dins de labels.
<pre>
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Comptar elements</title>
<meta name="description" content="Exercici DOM" />
<script type="text/javascript">
//<![CDATA[

function canviar_a_blau_cel() {
for(i=0; elem=document.frm_dades_personals.elements[i]; i++)
{
//elem.style.background = 'lightblue';
elem.style.background = '#aaaaff';
}
}

function canviar_els_labels() {
labels = document.getElementsByTagName("label");
for (i=0;i<labels.length;i++)
{
labels[i].style.background = '#aaaaff';
}
}

//]]>
</script>
</head>
<body>
<h1>Canviar color de background</h1>
<p>Com es pot veure, style.background no afecta als <em>radio button</em> i del <em>checkbox</em>. En aquest cas, gràcies a l'ús de <em>labels</em> podem donar color també als <em>radio button</em> i <em>checkbox</em>.</p>
<p>Gràcies als labels podem donar format als elements de text: nom, cognoms, etc. Per tant, és interessant que tots els elements de text estiguin inclosos dins d'elements que es puguin formatar, com ara <em>label</em> o <em>span class=...</em></p>

<form name="frm_dades_personals" id="formu" action="processar.htm">
<input type="hidden" name="num" value="12"><br />
<label>nom:</label> <input type="text" name="nom"><br />
<label>cognoms:</label> <input type="text" name="cognom"><br />
<label>password:</label> <input type="password" name="pwd"><br />
<label>sexe
<input type="radio" name="sex" value="male" >Male
<input type="radio" name="sex" value="female">Female<br />
</label>
<label>
<input type="checkbox" name="chk_bici" value="bici">Bicicleta<br />
<input type="checkbox" name="chk_cotxe" value="cotxe">Cotxe<br />
</label>
<select name="cotxes">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br />
<textarea name="txt_area" rows="10" cols="30"></textarea><br />

<input type="button" onclick="canviar_a_blau_cel();" name="bt_blau_cel" value="Canviar els items del formulari a blau cel"><br />
<input type="button" onclick="canviar_els_labels();" name="bt_labels" value="Canviar els labels a blau cel"><br />
</form>
<p id="info"></p>
</body>
</html>
</pre>

===Exercici 2===
2. pàgina web: retornar la url de tots els enllaços de la web

Agafem qualsevol pàgina que tingui enllaços i en descarreguem el codi font. Per exemple:
*http://www.joanillo.org/?cat=25&lang=ca
<pre>
<script type="text/javascript">
//<![CDATA[

function llistar_links() {
//alert(document.links.length);
dades = "";
var link_elements = document.links;
for (i=0; i<link_elements.length; i++) {
dades = dades + document.links[i].href + "<br />";
}
//alert(dades);
document.getElementById('info').innerHTML = dades;
}

//]]>
</script>
</pre>
i abaix de tot de la pàgina:
<pre>
...

<input type="button" onclick="llistar_links();" name="llistar_links" value="Llistar Links"><br />
<p id="info"></p>
</body>
</html>
</pre>

===Exercici 3===
3. Tenim tres imatges. Afegir un border quan fem onmouseover sobre la imatge, amb diferent color segons la imatge: blau, verd i vermell
<pre>
<!DOCTYPE html>
<html dir="ltr" lang="ca-ES">
<head>
<script type="text/javascript">
//<![CDATA[

function canviar_contorn(x,color) {
//alert(x.src);
//http://www.w3schools.com/jsref/prop_style_bordercolor.asp
//http://www.w3schools.com/jsref/dom_obj_style.asp#border
x.style.borderColor=color;
}

//una mica més complicat
function canviar_contorn2(x,width,style,color) {
//http://www.w3schools.com/jsref/prop_style_bordercolor.asp
//http://www.w3schools.com/jsref/dom_obj_style.asp#border
x.style.borderWidth=width;
x.style.borderStyle=style;
x.style.borderColor=color;
}

//]]>
</script>
</head>
<body>
<img src="img/120409_170400_pic.JPG" border="3px" onmouseover="canviar_contorn(this,'blue')" onmouseout="canviar_contorn(this,'black')" onclick="canviar_contorn2(this,'thick','solid','blue')"/><br />
<img src="img/120423_144806_pic.JPG" border="3px" onmouseover="canviar_contorn(this,'green')" onmouseout="canviar_contorn(this,'black')" onclick="canviar_contorn2(this,'medium','dashed','green')"/><br />
<img src="img/120430_161010_pic.JPG" border="3px" onmouseover="canviar_contorn(this,'red')" onmouseout="canviar_contorn(this,'black')" onclick="canviar_contorn2(this,'thin','dotted','red')"/><br />
</body>
</html>
</pre>

===Exercici 4===
4. dropdown list (select box). Tenim un formulari amb una caixa de text, dos botons (amb value ''afegir'' i value ''treure''), i una select box. Es tracta d'anar afegint i treient elements de la select box.

'''NOTA''': podeu utilitzar 'x.size=x.options.length;''
<pre>
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Dropdown list - select box</title>
<meta name="description" content="Exercici DOM" />
<script type="text/javascript">
//<![CDATA[

function afegir() {
var txt=document.getElementById("marca");
//alert(txt.value);

var x=document.getElementById("cotxes");

var opt = document.createElement("option");
x.options.add(opt);

opt.text = txt.value;
opt.value = x.options.length;
x.size=x.options.length;
txt.value="";
}

function treure() {
var x=document.getElementById("cotxes");
x.remove(x.selectedIndex);
x.size=x.options.length;
}

//]]>
</script>
</head>
<body>
<h1>Dropdown list - select box dinàmica</h1>

<form name="frm_dades_personals" id="formu">
Marques de cotxes:
<select id="cotxes" name="cotxes">
</select><br />
<input type="text" id="marca" name="marca" />
<input type="button" onclick="afegir();" name="bt_afegir" value="Afegir">
<input type="button" onclick="treure();" name="bt_treure" value="Treure"><br />
</form>
<p id="info"></p>
</body>
</html>
</pre>

===Exercici 5===
5. taula dinàmica. En l'exercici 2 has retornat tots els links d'una pàgina. Ara els hauràs de posar en forma de taula, a tres columnes: 1a columna, l'index de la fila; 2a columna: el text del link; 3a columna, la URL del link

<pre>
...

<input type="button" onclick="llistar_links();" name="llistar_links" value="Llistar Links"><br />
<p id="info"></p>
<table id = "taula_links" border="1"></table>
</body>
</html>
</pre>

<pre>
<script type="text/javascript">
//<![CDATA[

function llistar_links() {
//alert(document.links.length);
dades = "";
var taula = document.getElementById('taula_links');
var link_elements = document.links;
for (i=0; i<link_elements.length; i++) {
dades = dades + link_elements[i].href + "<br />";
insRow(taula, i,link_elements[i].text,link_elements[i].href);
}
//alert(dades);
}

function insRow(vtaula, vid,vtext,vhref) {
//mirar:
//http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow

var fila=vtaula.insertRow(vtaula.rows.length);
var cel1=fila.insertCell(0);
var cel2=fila.insertCell(1);
var cel3=fila.insertCell(2);
cel1.innerHTML=vid+1;
cel2.innerHTML=vtext;
cel3.innerHTML=vhref;
//NOTA: no funciona fer
//cel3.innerHTML="<a href='" + vhref + "'>" + vhref + "</a>";
//doncs entrem en un bucle sense fi.
}
//]]>
</script>
</pre>

===Exercici 6===
6. Tens una taula amb l'estructura país / num_habitants / superfície. Recorre dinàmicament tota la taula (a través de la col.lecció ''rows'' i la col.lecció ''cells'', i digues el número total d'habitants i la superfície total.

<pre>
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Recórrer una taula</title>
<meta name="description" content="Exercici DOM" />
<script type="text/javascript">
//<![CDATA[
function anar_sumant() {
var textos;
var total_habitants = 0;
var total_superficie = 0;
taula = document.getElementById('paisos');
for ( var i = 1 ; i <taula.rows.length;i++ ) {
total_habitants += parseInt(taula.rows[i].cells[1].innerHTML);
total_superficie += parseInt(taula.rows[i].cells[2].innerHTML);
}
var info="Número d'habitants: " + total_habitants + "<br />";
info = info + "Total superfície: " + total_superficie + "<br />";
document.getElementById('info').innerHTML = info;
}
//]]>
</script>
</head>
<body onload="anar_sumant()">
<h1>Taula de països</h1>
<table name="paisos" id="paisos">
<tr><td>País</td><td>num hab</td><td>superf</td></tr>
<tr><td>França</td><td>15</td><td>504000</td></tr>
<tr><td>Anglaterra</td><td>25</td><td>340000</td></tr>
<tr><td>Itàlia</td><td>42</td><td>225000</td></tr>

</table>

<p id="info"></p>
</body>
</html>
</pre>

===Exercici 7===
Tens en un array la llista de les comarques. Crear una llista HTML de les comarques, programàticament, amb ''createElement'' i ''appendChild'' (has de crear tant l'element ''ul'' com el ''li'').

Teoria: [[Exemples_del_DOM#createElement_i_appendChild:_crear_una_llista_des_de_zero]]
<pre>
<html>
<head>
<title>Modificando nodos con el árbol DOM</title>
</head>
<body>
<div id="parrafillo">
Este es un párrafo que contiene muchas cosas:
<ul>
<li>Una</li>
<li>lista</li>
</ul>
</div>
<script>
function cambia() {
var el=document.getElementById( "parrafillo");
// Primero quitamos el contenido
while( el.firstChild!=null ) {
el.removeChild( el.firstChild );
}
// A continuación, creamos y añadimos nodos
var texto=document.createTextNode( "Y lo cambio completamente" )
el.appendChild( texto );

var ol=document.createElement( "ol" );
el.appendChild( ol );
var li=document.createElement( "li" );
ol.appendChild( li );
texto=document.createTextNode( "aunque" );
li.appendChild( texto );
li=document.createElement( "li" );
ol.appendChild( li );
texto=document.createTextNode( "también incluyo" );
li.appendChild( texto );
li=document.createElement( "li" );
ol.appendChild( li );

//una altra manera de fer-ho
//texto=document.createTextNode( "una lista" );
//li.appendChild( texto );
li.innerHTML="text amb innerHTML";
}

//després de 1 segon executem la funció per veure els canvis:
setTimeout( "cambia()", 1000 );
</script>
</body>
</html>
</pre>

===Exercici 8===
Recórrer els elements d'una llista. Dues maneres:
<pre>
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Recórrer una taula</title>
<meta name="description" content="Exercici DOM" />
<script type="text/javascript">
function recorrer_llista() {
var str="Els països llistats són: ";
elem = document.getElementsByTagName("li");
for(i=0; i < elem.length; i++) {
//alert(elem[i].innerHTML);
str += elem[i].innerHTML + ", ";
}
document.getElementById('info').innerHTML = str;
}
</script>
</head>
<body onload="recorrer_llista()">
<h1>Llista de països</h1>
<ul>
<li>França</li>
<li>Anglaterra</li>
<li>Itàlia</li>
</ul>

<p id="info"></p>
</body>
</html>
</pre>
Una altra manera diferent:
<pre>
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Recórrer una taula</title>
<meta name="description" content="Exercici DOM" />
<script type="text/javascript">
function recorrer_llista() {
var str="Els països llistats són: ";
var elem=document.getElementById( "llista");
var child = elem.childNodes;
alert(child.length);
for (i=0; i<child.length; i++) {
alert(child[i].nodeType + ' - ' + child[i].nodeName);

if (child[i].nodeType==1) { //ElementNode
alert(child[i].innerHTML);
//o bé
alert(child[i].firstChild.nodeValue);
str += child[i].innerHTML + ", ";
}

}
document.getElementById('info').innerHTML = str;
}
</script>
</head>
<body onload="recorrer_llista()">
<h1>Llista de països</h1>
<ul id="llista">
<li>França</li>
<li>Anglaterra</li>
<li>Itàlia</li>
</ul>

<p id="info"></p>
</body>
</html>
</pre>

'''NOTA''': El contingut d'una etiqueta és el mateix que el valor del node del seu fill:
<pre>
console.log(child[i].innerHTML);
//o bé
console.log(child[i].firstChild.nodeValue);
</pre>

===Exercici 9: Número de taules===
Aquest exercici serveix per tenir en compte l'ús del document.write. Utiltizar document.write després de què s'hagi carregat la pàgina destrueix l'arbre del DOM.
*http://stackoverflow.com/questions/10873942/document-write-clears-page
*http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice
<pre>
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Creació d'una taula</title>
<meta name="description" content="Exercici DOM" />
<script type="text/javascript">
function processar() {

var taules = document.getElementsByTagName("table");
alert(taules.length);
alert(taules[0].rows[0].cells[0].innerHTML);

novataula = document.getElementById("novataula");
novataula.innerHTML = "<table><tr><td>Hongria</td></tr></table>";

alert(taules.length);
alert(taules[1].rows[0].cells[0].innerHTML);

document.write ('<table>');
document.write ('<tr><td>Algèria</td></tr>');
document.write ('<tr><td>Noruega</td></tr>');
document.write ('<tr><td>Grècia</td></tr>');
document.write ('</table>');

alert(taules.length);
alert(taules[0].rows[0].cells[0].innerHTML);

}
</script>

<body onload="processar()">
<table border="1">
<tr><td>França</td></tr>
<tr><td>Anglaterra</td></tr>
<tr><td>Marroc</td></tr>
</table>

<div id="novataula">Nou país</div>

</html>
</pre>
===Exercici 10 (exercici de classe, 20.11.2018)===
<pre>
<!DOCTYPE html>
<html>
<body>

<div id="INICI">
<p>Paràgraf 1</p>
<p>Paràgraf 2</p>
<table border="1">
<tbody>
<tr><td>cel·la11</td><td>cel·la12</td></tr>
<tr><td>cel·la21</td><td>cel·la22</td></tr>
<tr><td>cel·la31</td><td><ul><li>llista1</li><li>META</li></ul></td></tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
//aquí va el teu codi
</script>
</pre>
Partim de:
<pre>
var elediv = document.getElementById("INICI")
</pre>
hem d'accedir al valor de '''META'''.

No es pot utilitzar ''getElementsByTagName'', ni ''document.cols'' o similar. Només es pot utilitzar ''childNodes, length, nodeName, nodeType, nodeValue''.

'''Solució''':
<pre>
<script>

var inici = "INICI";
console.log(inici);
var elediv = document.getElementById(inici);

//recodem que console.dir(element); ens pot facilitar molt la feina!
console.dir(elediv); //puc veure de forma ràpida tota la informació que m'interessa

var nodedivfills = elediv.childNodes;
console.log(nodedivfills.length);
console.log(nodedivfills[5].nodeName);

var nodetaulafills = nodedivfills[5].childNodes;
console.log(nodetaulafills.length);
console.log(nodetaulafills[1].nodeName); //TBODY

var nodetbodyfills = nodetaulafills[1].childNodes;
console.log(nodetbodyfills.length);
console.log(nodetbodyfills[5].nodeName); //TR

var nodetrfills = nodetbodyfills[5].childNodes;
console.log(nodetrfills.length);
console.log(nodetrfills[1].nodeName); //TD

var nodetdfills = nodetrfills[1].childNodes;
console.log(nodetdfills.length);
console.log(nodetdfills[0].nodeName); //UL

var nodeulfills = nodetdfills[0].childNodes;
console.log(nodeulfills.length);
console.log(nodeulfills[1].nodeName); //LI

var nodelifills = nodeulfills[1].childNodes;
console.log(nodelifills.length);
var meta = nodelifills[0].nodeValue;
console.log(meta);

//maneres alternatives:
// Metodo utilizando el byTag
var bytag = document.getElementById("INICI").getElementsByTagName("tbody")[0].rows[2].cells[1].getElementsByTagName("ul")[0].getElementsByTagName("li")[1].childNodes[0].nodeValue;

console.log(bytag);

// Metodo utilizando el byChild
var bychild = (document.getElementById("INICI").childNodes[5].childNodes[1].childNodes[5].childNodes[1].childNodes[0].childNodes[1].childNodes[0].nodeValue);

console.log(bychild);
</script>
</pre>

=Entrega=
Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Schoology dins del termini d'entrega de la pràctica.

Recorda la '''normativa''' per entregar les pràctiques al Schoology: [[ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology]]

{{Autor}}, Novembre 2018
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Exercicis DOM I - Historial de revisió

Joan: /* Exercici 8 */