Tema 4.1.

Modelo de objetos del documento. DOM

Objeto document
Manipulación de elementos: puede ser con textContent o con
innerHTML. La primera obtiene el texto de un elemento sin tener
en cuenta las posibles etiquetas que contiene.
<section>
Manipular elementos <i>parece </i> sencillo <br/>
Pero <strike>debe </strike>puede complicarse bastante.
</section>

console.log(document.getElementsByTagName("section")[0].textContent);
console.log(document.getElementsByTagName("section")[0].innerHTML);
 Tema 4.1.
Modelo de objetos del documento. DOM
Objeto document
Esta misma distinción se tiene en cuenta para modificar el contenido. Es
decir, las etiquetas que se incluyan en textContent no serán entendidas
como HTML, al contrario de lo que ocurriría con innerHTML.

<section>
Manipular elementos <i>parece </i> sencillo <br/>
Pero <strike>debe </strike>puede complicarse bastante.
</section>

document.getElementsByTagName("section")[0].textContent="el <u>nuevo</u>
contenido";

document.getElementsByTagName("section")[0].innerHTML="el <u>nuevo</u>
contenido";
 Tema 4.1.
Modelo de objetos del documento. DOM
Objeto document
Creación de elementos: con el método createElement para crear
nuevos elementos y createTextNode para crear nodos de texto
nuevos. Al crearlos no se hacen visibles en el DOM, ya que luego
hay que situarlos, indicando la posición del árbol.
Para insertar un nuevo nodo en un árbol se usa appendChild, que
se añade como hijo de un nodo padre, situándolo al final de los
hijos.
<ul id="lista">
<li>Primer hijo</li>
<li>Segundo hijo</li>
</ul>

let nuevoElemento=document.createElement("li");
nuevoElemento.innerHTML="Tercer elemento";
document.getElementById("lista").appendChild(nuevoElemento);
 Tema 4.1.
Modelo de objetos del documento. DOM
Objeto document
En ocasiones no se quiere insertar al final. Se puede usar
insertBefore, que recibe dos parámetros: el nodo a añadir, y el
nodo hijo que se quedaría por debajo
<ul id="lista">
<li>Primer hijo</li>
<li>Segundo hijo</li>
</ul>

let nuevoElemento=document.createElement("li");
nuevoElemento.innerHTML="Ultimo elemento insertado";
//se obtiene el nodo referencia
let nodoReferencia=document.getElementsByTagName("li")[1];
//se obtiene el nodo padre
let nodoPadre=nodoReferencia.parentNode;
nodoPadre.insertBefore(nuevoElemento,nodoReferencia);
 Tema 4.1.
Modelo de objetos del documento. DOM
Objeto document
Para eliminar un nodo se utiliza removeChild indicándole el nodo
a eliminar:

<ul id="lista">
<li>Primer hijo</li>
<li>Segundo hijo</li>
</ul>

//se obtiene el nodo referencia

let nodoReferencia=document.getElementsByTagName("li")[1];
//se obtiene el nodo padre
let nodoPadre=nodoReferencia.parentNode;
nodoPadre.removeChild(nodoReferencia);
 Tema 4.1.
Modelo de objetos del documento. DOM
Objeto document
Para manipular los atributos de un elemento, lo primero es comprobar si
existe el atributo para el elemento indicado hasAttribute realiza esta
comprobación y devuelve true.
<ul id="lista">
<li>Primer hijo</li>
<li>Segundo hijo</li>
</ul>

console.log(document.getElementsByTagName("ul")[0].hasAttribute("id"));//true
console.log(document.getElementsByTagName("ul")[0].hasAttribute("class"));//false
 Tema 4.1.
Modelo de objetos del documento. DOM
Objeto document

Si se quiere conocer la lista completa de atributos de un elemento, se debe

usar attributes, que devuelve un mapa de nodos con nombre (NamedNodeMap)
donde cada elemento del mapa contiene el nombre y el valor del atributo. No
es un array, pero se recorre como si lo fuera.
<img src="#"alt="texto alternativo" title="titulo"/>

let atributos=document.getElementsByTagName("img")[0].attributes;
for(let atributo of atributos){
console.log(`[Nombre,Valor]:[${atributo.name},${atributo.value}]`);
}

Otra forma de acceder al valor de un atributo es a través de su nombre y

del método getAttribute:
document.getElementsByTagName("img")[0].getAttribute(“title“);//devuelve titulo
 Tema 4.1.
Modelo de objetos del documento. DOM
Objeto document

También se puede modificar el valor de un atributo con setAttribute,

indicando el nombre del atributo y el nuevo valor.
document.getElementsByTagName("img")[0].setAttribute(“title“,”nuevo titulo”);

Se puede eliminar un atributo, mediante removiAttribute, pasándole el

nombre del atributo:.
document.getElementsByTagName("img")[0].removeAttribute(“title“);

A veces, por la naturaleza de ciertos atributos, hay que quitarlos, para

insertarlos posteriormente. Eso se consigue con toggleAttribute. Así, en:
document.getElementsByTagName("img")[0].toggleAttribute("alt");

Se ocultará en atributo alt si estaba presente, o se insertará si no

estaba.
 Tema 4.3.
Modelo de objetos del documento. DOM

PRÁCTICA 2

A partir de la página web proporcionada y utilizando las funciones

DOM, mostrar por pantalla la siguiente información:

1. Número de enlaces de la página

2. Dirección a la que enlaza el penúltimo enlace
3. Numero de enlaces que enlazan a http://prueba
4. Número de enlaces de la primera section
5. id de la segunda section
6. Número de nodos de la segunda section