Scribd
Cargar
31 vistas15 páginas

Dom JS

El documento explica qué es el Modelo de Objetos del Documento (DOM), cómo funciona al transformar el código HTML en un árbol estructural que puede ser manipulado mediante JavaScript, y los principales métodos y nodos que componen el DOM como Document, Element y Text.

Cargado por

Bruno Buona
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
31 vistas15 páginas

Dom JS

El documento explica qué es el Modelo de Objetos del Documento (DOM), cómo funciona al transformar el código HTML en un árbol estructural que puede ser manipulado mediante JavaScript, y los principales métodos y nodos que componen el DOM como Document, Element y Text.

Cargado por

Bruno Buona
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 15

DOM

1 ¿Que es el dom?

2 ¿Como funciona?

Índice 3 Estructura Nodos


4 Metodos Basicos
del Dom

5 Selectores Window,
Document, Element
¿Que es el DOM?
El DOM o Modelo de Objetos del
Documento. es lo que permite interactuar a
JS con los diferentes elementos HTML de
una web, como también poder operar
sobre ellos y modificarlos.
Es decir que, por ejemplo, desde JS
podemos modificar el contenido de una
etiqueta <h1> en un archivo HTML.
¿Cómo funciona?
El DOM funciona mediante una transformación
del código HTML que contiene la estructura de
una web, a una representación estructural del
documento, en forma de árbol, mediante la cual
podemos acceder usando JS, y operar sobre los
elementos.
Esta transformación es realizada
automáticamente por los navegadores, por lo
que no es necesario realizar nada desde el
código, simplemente basta con operar mediante
JS sobre el DOM.
Un poco mas de lo que sería
una estructura de Arbol (HTML).
Analicemosla un poco..
Estructura
● Cada etiqueta HTML se transforma en un nodo de tipo “Elemento“.

● La conversión de etiquetas en nodos se realiza de forma jerárquica.


De esta forma, del nodo raíz solamente pueden derivar los nodos
HEAD y BODY.

● A partir de esta derivación inicial, cada etiqueta HTML, se


transforma en un nodo que deriva del correspondiente a su
“etiqueta padre“.

● La transformación de las etiquetas HTML habituales genera dos


nodos: el primero es el nodo de tipo “Elemento“ (correspondiente a
la propia etiqueta XHTML) y el segundo es un nodo de tipo “Texto“
que contiene el texto encerrado por esa etiqueta XHTML.

● En el contexto del DOM, un nodo es un único punto en el árbol


de nodos. Los nodos pueden ser varias cosas, el documento
mismo, elementos, texto y comentarios.
Estructura

La etiqueta <p> se transforma en los siguientes nodos


del DOM.
Nodos
La especificación completa de DOM define 12
tipos de nodos, aunque lo más usados son:

● Document, nodo raíz del que derivan todos los demás nodos del
arbol.
● Element, representa cada una de las etiquetas XHTML. Se trata
del único nodo que puede contener atributos y el único del que
pueden derivar otros nodos.
● Attr, se define un nodo de este tipo para representar cada uno de
los atributos de las etiquetas HTML, es decir, uno por cada par
atributo=valor.
● Text, nodo que contiene el texto encerrado por una etiqueta
HTML.
● Comment, representa los comentarios incluidos en la página
HTML.
Nodos
DOM & JS
Con el modelo de objetos, JavaScript puede crear un
HTML dinámico:
● modificando los elementos HTML de la página

● modificando los atributos HTML de la página

● modificando los estilos CSS de la página

● removiendo los elementos y atributos existentes

● creando nuevos elementos y atributos

● reaccionando a los eventos HTML existentes en la


página

● creando nuevos eventos HTML en la página


Métodos
Método Descripción
document.getElementById("myId") busca un elemento por su Id
Encontrando document.getElementsByTagName("tagName") busca elementos por tag
elementos HTML
document.getElementsByClassName("myClass") busca elementos por clase

Modificando element.innerHTML = nuevo contenido html cambia el contenido de un elemento HTML


elementos element.attribute = nuevo valor cambia el valor del atributo de un elemento HTML
HTML element.style.property¨= nuevo estilo cambia el estilo de un elemento HTML

document.createElement(element) crea un elemento HTML


Agregando y document.removeChild(element) quita un elemento HTML
quitando
document.appendChild(element) agrega un elemento HTML
elementos HTML
document.replaceChild(new, old) reemplaza un elemento HTML
querySelector
Nos acerca otra manera de encontrar elementos mediante una sintaxis como la
que ya conocemos en css
Métodos del DOM
Para Clases Imprimir en HTML

Escuchar Eventos
¡Muchas gracias!

También podría gustarte