Want to create interactive content? It’s easy in Genially!

Reuse this genially

Presentación arbol DOM - Cliente

Luz Serrano Díaz

Created on January 4, 2024

Presentación del arbol DOM donde se explican sus caracteristicas y como modificarlo en js.

Start designing with a free template

Discover more than 1500 professional designs like these:

Animated Chalkboard Presentation

Genial Storytale Presentation

Blackboard Presentation

Psychedelic Presentation

Chalkboard Presentation

Witchcraft Presentation

Sketchbook Presentation

Explore all templates

Transcript

JS

ARBOL DOM

Como trabajar con el arbol dom y poder modificarlo en JavaScript

Luz Serrano Díaz 2º DAW IES CELIA VIÑAS 2023/2024

Introduccion

En esta presentación se utilizará de base el tema 6 dado en clase, se irá punto por punto en el mismo orden que en el tema indicando nuevas adiciones que no se encontraban en el libro e información deprecada que ya no se usa o no funciona en nuevas versiones.

Información deprecada encontrada en el libro.

Contenido actualizado / nuevo. Información que no se encuentra en el libro.

Soy un método que ya no se considera buena practica o no funciona en nuevas versiones de Js
Soy un metodo incluido en Js en los últimos años

Un ejemplo de esto sería el método cloneNode() que se vera más adelante en el apartado de la interfaz Node.

Un ejemplo sería los distintos tipos de nodos que han sido deprecados y ya no se usan que se veran en el apartado de la interfaz Node.

+info

+info

¿QUE ES EL ARBOL DOM?

DOM o Document Object Model, es una interfaz de plataforma, API, de programación para documentos HTML, que “proporciona un conjunto de objetos que ayudan a representar documentos HTML, XML, XHTML y SVG; un modelo estándar de como combinar dichos objetos y una interfaz estándar para acceder a ellos y manipularlos.”

+info

Estructura arbol dom

El navegador web transforma las paginas web en una estructura de árbol, de esta manera ordenando la sucesión de caracteres de forma que sean fácilmente accesibles los nodos.La estructura sigue esta formula:

  • Root: el elemento al que están asociados todos los nodos, en este ejemplo sería el elemento <html>
  • Padres: nodos que contienen otros nodos.
  • Hermanos: nodos que se sitúan dentro del mismo padre que el nodo seleccionado.
  • Hijos: nodos que se sitúan dentro del nodo seleccionado.

OBJETOS DEL MODELO

Los tipos de nodo y la interfaz node

LA interfaz node

La funcion del objeto node es la manipulación de los nodos y su información, sus metodos y propiedades nos permite modificar el documento y adquirir información de sus nodos. EJ: childNodes, appendChild(nodo), etc...

:0

:D

DIV

H2

¿QUIEN ERES?

¡SOY TU HIJE!

Esta reunion familiar fue posible gracias a document.getElementByTagName("DIV")[0].firstChild

tipos de nodos

Cada tipo de nodo tiene un número asociado que se puede conseguir con la propiedad nodeType.

ENTITY_REFERENCE_NODE = 5 ENTITY_NODE = 6 NOTATION_NODE = 12

Propiedades

lastChild

firstChild

childNodes

previousSibling

nextSibling

nodeName

nodeValue

nodeType

ownerDocument

parentElement

parentNode

textContent

isConnected

attributes

baseURI

Metodos

insertBefore(n1,n2)

hasChildNodes()

appendChild(n)

replaceChild(n1,n2)

removeChild(n)

cloneNode(deep)

compareDocumentsPosition(n)

contains(n)

getRootNode()

isSameNode(n)

isEqualNode(n)

normalize()

Acceso al documento desde codigo

Lista / Procesos

Acceso al tipo de nodo

Acceso a los atributos

Acceso directo a los nodos

Maneras de la que acceder directamente a un nodo en concreto o a una lista ordenada de nodos.

Acceso y modificación de atributos de un elemento.

Con nodeType accedemos al tipo especifico de cada nodo, utilzando la tabla de las diapositivas anteriores.

CREACIóN de nodos

METODos

createDocumentFragment()

createAttribute(a)

createCDATASection("")

createElement(e)

Gracias a estos métodos somos capaces de crear un nodo de cada tipo, con distintas opciones dependiendo del método

createTextNode("")

createProcessingIntruction(o,d)

createEntityReference("")

createComment()

Programación de eventos

Utiliza una imagen

Para poder modificar el arbol dom de forma interactiva, a traves de código, para poder hacer esto es necesario el uso de eventos y saber el estado del arbol dom.

Al ser cargado el body llamará a la función correspondiente

El script que será ejecutado al ser llamado por el atributo "onload"

La forma más sencilla de detectar si un elemento ha sido cargado es con el atributo "onload" que permite ejecutar un script cuando el elemento ha sido cargado.

Como Comprobar el estado del arbol dom

Si el documento se encuentra totalmente cargado se pueden ejecutar una serie de scripts.

Si la multimedia aún no está cargada del todo se pueden ejecutar otra serie de scripts, inluso uno para que espere a que esté totalemente cargado

Aquí se puede observar un ejemplo de como detectar el estado del arbol dom y actuar según ese estado, puede estar en uno de tres estado, completo, la página esta totalmente cargada; interactuable, el arbol dom está cargada pero otros recursos como imagenes y videos aún no, o cargando, la página aún no ha podido cargarse del todo.

Si no está cargado el documento se añaden evenListeners a la ventana para que detecte cuando esté totalmente cargado y cuando esté cargado sin multimedia respectivamente

+info

Test final que vale el 70% de la nota

¿Qué relacion tienen estos nodos?

Html es root, div y ul son hermanos y p es el hijo de div.

<html> <body> <div> <p></p> </div> <ul> </ul> </body> </html>

Html es root, div es el padre de ul y de p.

Html es padre de p, ul y p son hermanos y div es el hijo de ul.

¿Qué es un nodo document fragment?

El nodo raiz del documento

Un subarbol no dentro del arbol principal.

Nodo que permite introducir caracteres que no son interpretados por el navegador.

¿COMo seleccionar el nodo indicado?

document.body.childNodes[1].firstChild

<html> <body> <div> <p></p> </div> <ul> <li></li> </ul> <ul class="ul"><li>Selecciona este nodo elemento LI </li></ul> </body> </html>

document.getElementsByClassName("ul")[0].firstChild

document.getElementsByTagName("ul")[0].firstChild

¿COMo crear este nodo comentario?

const c = document.createComment("Comentario"); document.appendChild(c);

<html> <body><!-- Comentario --></body> </html>

const c = document.createComment(""); c.value = "Comentario" document.body.appendChild(c);

const c = document.createComment("Comentario"); document.body.appendChild(c);

¿Qué función tiene el attributo onload?

Permite que se ejecute un script al realizar una acción indicada.

Realiza un script indicado al cargarse el nodo.

Permite cambiar el valor del nodo.

Gracias por atender

Recursos usados

https://es.wikipedia.org/wiki/Document_Object_Model

Este e un tema sencillo que no requiere un estudio a fondo pero es algo increiblemente importante y que un desarrolladore web tiene que saberse como la palma de su mano

https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

https://developer.mozilla.org/en-US/docs/Web/API/Node

https://developer.mozilla.org/en-US/docs/Web/API/Document

https://stackoverflow.com/questions/8100576/how-to-check-if-dom-is-ready-without-a-framework

Acceso DIrecto a elementos

<div>div1</div> <div>div2</div>

<div name="div1">div1</div> <div name="div2">div2</div>

getElementsByName(n)

getElementsByTagName(n)

<div class="div1">div1</div> <div class="div2">div2</div>

<div id="div1">div1</div> <div id="div2">div2</div>

getElementsById(n)

getElementsByClassName()

Acceso a los atributos

removeNamedItem(a)

.attributes[]

setNamedItem(a)

removeAttribute(a)

setAttribute(a)

getAttribute(a)

IsConnected

Devuelve un booleano indicando si el nodo está conectado al arbol dom o no.

<div> </div>

document.getElementsByTagName("div")[0].isConnectedDevolvería "true"

NodeValue

Devuelve el valor del nodo, solo devuelve el contenido si es CDATASection, comment, ProcessingInstruction o Text

<div>hola</div>

document.getElementByTagName("div")[0].firstChild.nodeValue Devolvería un string "\n hola\n "

<div atributo="aaa"></div> div.attributes["atributo"] Devuelve el atributo "atributo"

NodeType

Devuelve el tipo del nodo en número, utilizando la lista que se ha enseñado antes.

<div><h2></h2> <h1></h1></div>

document.getElementByTagName("h2")[0].nodeName Devolvería un int de valor 1 ya que es un nodo elemento.

LastChild

Devuelve el ultimo nodo hijo.

<div><h2></h2> <h1></h1></div>

document.getElementByTagName("div")[0].lastChild Daría el node elemento H1

Contains(n)

Devuelve un booleano dependiendo de si un nodo contiene a otro, n.

<div><h1></h1></div>

var div = document.getElementsByTagName("div")[0] div.contains(div.firstChild) Obviamente al ser el primer hijo devolverá true.

FirstChild

Devuelve el primer nodo hijo.

<div><h2></h2> <h1></h1></div>

document.getElementByTagName("div")[0].firstChild Daría el node elemento H2

ChildNodes

Devuelve un array con todos los nodos hijos.

<div><h2></h2></div>

document.getElementByTagName("div")[0].childNodes[0] Daría el node elemento H2

<div></div> attr = document.createAttribute("id") div.setNamedItem(attr) <div id=""></div>

ParentNode

Devuelve el nodo padre.

<div><h2></h2> <h1></h1></div>

document.getElementByTagName("h2")[0].parentNode Daría el node elemento div

RemoveChild(n)

Elimina un nodo hijo, n.

<body> <h1></h1></body>

var h1 = document.getElementByTagName("h1")[0] document.body.removerChild(h1)

<body> </body>

Codigo que representa el arbol dom

<html><head> <title></title> <meta></meta></head> <body><div id=""></div></body></html>

<div atributo="aaa"></div> div.attributes.removeNamedItem("atributo")Elimina el atributo "atributo"<div></div>

NodeName

Devuelve el nombre del nodo, si es un elemento devuelve la etiqueta, sino devuelve un valor especifico.

<div><h2></h2> <h1></h1></div>

document.getElementByTagName("h2")[0].nodeName Devolvería un string "h2"

IsEqualNode(n)

Devuelve un booleano indicando si el nodo elemento es igual al nodo indicado,n

<div><h2></h2> <h2>Ejemplo</h2></div>

document.getElementByTagName("h2")[0].isEqualNode(document.getElementByTagName("h2")[1]) Devolvería true ya que son los dos elementos de tipo h2

OwnerDocument

Devuelve el documento al que pertenece el nodo

Si ejecutamos la linea: document.getElementsByTagName("div")[0].OwnerDocument Devolvería "HTMLDocument https://app.genial.ly/editor/65968d4c12796b00144bf086" Al menos en la vista de editor.

GetRootNode()

Devuelve el root del documento, en la mayoría de casos siendo el nodo Document

<body></body> document.getRootNode() Devolverá HTMLDocument

Al ejecutar la linea: var divs = document.getElementsByTagName("div") divs se vuelve un array de dos elementos, siendo los elementos los dos divs del documento

<div atributo="aaa"></div> div.attributes.getAttribute("atributo") Devuelve el atributo "atributo"

Al ejecutar la linea: var divs = document.getElementsById("div2") divs se vuelve el elemento con el atributo "id" con valor "div2" ya que cada id debe ser único nunca devuelve un array.

Normalize()

Elimina espacios extras y saltos de linea de nodos de texto.

const wrapper = document.createElement("div"); wrapper.normalize();

Before normalization:#text: Part 1#text: Part 2After normalization:#text: Part 1 Part 2

textContent

Devuelve/modifica el contenido textual de un elemento y sus descendentes según el parametro introducido

<body> <div> hola <h2>waaa</h2> </div></body>

document.getElementByTagName("div")[0].textContent Devolvería el string "\n hola\n waaa\n "

ReplaceChild(n1,n2)

Elimina un nodo hijo, n.

<body> <h1></h1></body>

var h1 = document.getElementByTagName("h1")[0] var h2 = document.createElement("h2") document.body.replaceChild(h1,h2)

<body> <h2></h2></body>

AppendChild(n)

Añade un nodo, n, como último hijo

<body> </body>

document.body.appendChild( document.createElement("h1"))

<body> <h1></h1> </body>

NextSibling

Devuelve el siguiente nodo hermano.

<div><h2></h2> <h1></h1></div>

document.getElementByTagName("h2")[0].nextSibling Daría el node elemento H1

insertBefore(n1,n2)

Inserta un nodo, n1 , antes de otro nodo especificado, n2.

<body> <h1></h1></body>

var h1 = document.getElementByTagName("h1")[0] let div = document.createElement("div") document.body.insertBefore(div, h1)

<body> <div></div><h1></h1> </body>

PreviousSibling

Devuelve el anterior nodo hermano.

<div><h2></h2> <h1></h1></div>

document.getElementByTagName("h1")[0].lastSibling Daría el node elemento H2

ParentElement

Devuelve el nodo padre si es un elemento, sino devuelve "null"

<div><h2></h2> <h1></h1></div>

document.getElementByTagName("h2")[0].parentNode Daría el node elemento div

Al ejecutar la linea: var divs = document.getElementsByClassName("div2") divs se vuelve un array de un solo elemento ya que solo hay un div con el atributo "class" cuyo valor sea "div2"

CloneNode(deep)

Clona un nodo, n, y el booleano deep decide si clona sus hijos, true, o no, false.

<body> <h1><span></span></h1></body>

var h1 = document.getElementByTagName("h1")[0] var h12 = h1.cloneNode(false) document.body.appendChild(h12);

<body> <h1><span></span></h1> <h1></h1> </body>

<div></div> attr= document.createAttribute("id") div.setAttribute(attr) <div id=""></div>

HasChildNodes()

Devuelve un booleano si el nodo tiene hijos o no

<div><h2></h2> <h1></h1></div>

document.getElementByTagName("div")[0].hasChildNodes() Devolvería true

<div atributo="aaa"></div> div.attributes.removeNamedItem("atributo") Elimina el atributo "atributo" <div></div>

IsSameNode(n)

Devuelve un booleano indicando si el nodo elemento es igual al nodo indicado,n

<div><h2></h2> <h2>Ejemplo</h2></div>

document.getElementByTagName("h2")[0].isSameNode(document.getElementByTagName("h2")[1]) Devolvería false ya que tienen un nodo texto distinto.

CompareDocumentPosition(n)

Compara la posicion de un nodo a otro, n, y devuelve un valor int dependiendo de donde se situe

Al ejecutar la linea: var divs = document.getElementsByName("div2") divs se vuelve un array de un solo elemento ya que solo hay un div con el atributo "name" cuyo valor sea "div2"

BaseURI

Devuelve un string representando la url del documento contenedor del nodo.

<div> </div>

document.getElementsByTagName("div")[0].baseURIDaria el string "http://127.0.0.1:5501/adkhsgash.html"

Attributes

Devuelve una lista de atributos del nodo.

<div id="1" class="clase" width="100px"> </div>

document.getElementsByTagName("div")[0].attributes Daría el array NamedNodeMap(3) [ id="1", class="clase", width="100px" ]