Yusef Hassan Montero
Francisco Jesús Martín Fernández
Introducción a DOM
Todos los derechos reservados
www.nosolousabilidad.com
Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
INTRODUCCIÓN
DOM, Document Object Model o Modelo de Objetos de Documento, es una
interfaz estándar que posibilita a scripts y programas, y de forma dinámica, el acceso y
manipulación de la estructura, estilo y contenido de los documentos.
En este documento vamos a tratar el acceso y manipulación de documentos
HTML con JavaScript y a través del estándar DOM2. Esto significa que muchos de los
métodos y propiedades que vamos a utilizar no están soportados por algunos
navegadores antiguos, aunque al tratarse DOM de un estándar, los actuales navegadores
más extendidos, al igual que (presuponemos) futuros navegadores, no tendrán
problemas en interpretar correctamente el código.
Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
EMPEZANDO...
Cuando el navegador carga una página HTML, crea internamente una
representación del documento en forma de árbol jerárquico. En el siguiente ejemplo de
página HTML:
<HTML>
<TITLE>Mi primera página para DOM</TITLE>
<HEAD>
</HEAD>
<BODY>
<P id=”primera” align=”center”>Hola Mundo!</P>
<P id=”segunda”>
</P>
</BODY>
<A href=”index.htm”>Inicio</A>
</HTML>
El árbol generado internamente por el navegador sería como este:
Como podemos observar en el grafo, el documento está compuesto por una serie
de nodos relacionados jerárquicamente. Entre los nodos podemos diferenciar cuatro
tipos diferentes: Nodo de Documento (document), Nodos de Elementos (element),
Nodos de Texto (“..”) y Atributos.
Nodos de Texto con las cadenas de caracteres (encerradas entre etiquetas), y los
Atributos con los atributos de las etiquetas. El nodo de documento representa el
documento HTML en sí.
Los Elementos se corresponden con las etiquetas del documento HTML. Los
Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
Además, esta jerarquía establece implícitamente relaciones entre los nodos:
Ya hemos comentado que hay diversos tipos de nodos, pero veamos un poco
Es un nodo único y diferente del resto. No tiene padre y únicamente tiene un
Nodos de Elemento
Nodos de Texto
Nodos de Atributo
Nodo de Documento
En un documento HTML se definen a través de etiquetas. Pueden ser hijos de
Estos nodos siempre son hijos de un nodo elemento, y no pueden tener hijos. Su
Padre-Hijo: Por ejemplo, el elemento HTML es padre del elemento HEAD, que
a su vez lo es del elemento TITLE. Un padre puede tener muchos hijos, aunque un hijo
únicamente un padre.
Hermanos: Dos elementos se consideran hermanos cuando son hijos del mismo
padre. En nuestro ejemplo, los dos elementos P son hermanos, ya que ambos son hijos
de BODY.
Tipos de Nodos
más específicamente sus características.
otro nodo elemento, y también tener hijos (nodos elemento o nodos de texto). Su acceso
y manipulación se realiza a través de la interfaz Node y el objeto document.
acceso y manipulación se realiza a través del nodo elemento del que son hijos.
Al igual que los de Texto, son siempre hijos de un nodo elemento, y no pueden
tener hijos. Su acceso y manipulación se realiza a través del nodo elemento del que son
hijos.
hijo, el nodo elemento raíz, en un documento HTML es el elemento HTML. A través de
los métodos y propiedades del objeto document podemos crear y acceder a nodos
elemento.
Resumiendo:
otro nodo elemento.
elemento del que desciendan.
recorrer, manipular, eliminar y crear nodos en el árbol del documento, que se muestra
en la siguiente sección de referencia.
Para acceder a un nodo de texto o un nodo de atributo, lo hacemos desde el nodo
Para acceder a un nodo elemento, lo hacemos desde el nodo documento o desde
DOM ofrece una serie de interfaces, objetos, propiedades y métodos para
Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
REFERENCIA
DOCUMENT
El acceso a nodos del documento:
getElementById()
getElementsByTagName()
createElement()
Creación de nuevos nodos en el documento:
createTextNode()
Crear un nuevo nodo de tipo elemento en el documento.
Crear un nuevo nodo de tipo texto en el documento.
Acceder a un elemento del documento a través de su atributo id.
documentElement
Acceder a un conjunto (array) de elementos a través del nombre de su
etiqueta.
Accede al nodo raiz, es decir, al primer hijo de ‘document’, en el caso de
un documento HTML este elemento se corresponde con el elemento
HTML (<HTML>...</HTML>).
Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
firstChild
lastChild
Acceso al primer hijo del nodo.
Acceso al último hijo del nodo.
childNodes
NODE
Acceso a nodos cercanos:
Obtención de información sobre los nodos:
parentNode
nextSibling
Acceso al padre del nodo.
prevSibling
tagName
Acceso al siguiente hermano del nodo.
Acceso al anterior hermano del nodo.
Acceso al conjunto (array) de hijos del nodo.
Nos informa del nombre de la etiqueta del nodo (en nodos de tipo
Elemento).
Nos devuelve true o false en caso de que tenga o no hijos el nodo.
nodeValue
Nos informa del valor del nodo (en nodos de tipo Texto).
Devuelve el valor del atributo indicado.
getAttribute()
hasChildNodes()
Manipulación de los atributos de un nodo:
Añadir o eliminar nodos:
removeChild();
appendChild();
setAttribute()
Añade un nodo hijo al nodo actual.
Especifica un atributo para el nodo.
Elimina un nodo hijo al nodo actual.
Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
ESTILO CSS
Tabla de correspondencia entre propiedades CSS y propiedades de ‘style’ en DOM.
Propiedades CSS
background
background-color
border
border-bottom, border-bottom-color,
border-bottom-style, border-bottom-width
border-color
border-left, border-left-color,
border-left-style, border-left-width
border-right, border-right-color,
border-right-style, border-right-width
border-style
border-top, border-top-color,
border-top-style, border-top-width
border-width
bottom
clip
color
display
font, font-familiy, font-size, font-style,
font-variant, font-weight
height
left
letter-spacing
line-height
list-style, list-style-type, list-style-image,
list-style-position
margin, margin-left, margin-top,
margin-right, margin-bottom
overflow
padding, padding-left, padding-top,
padding-bottom, padding-right
position
right
text-align, text-indent, text-decoration,
text-transform
top
visibility
width
z-index
Style
background
backgroundColor
border
borderBottom, borderBottomColor,
borderBottomStyle, borderBottomWidth
borderColor
borderLeft, borderLeftColor,
borderLeftStyle, borderLeftWidth
borderRight, borderRightColor,
borderRightStyle, borderRightWidth
borderStyle
borderTop, borderTopColor,
borderTopStyle, borderTopWidth
borderWidth
bottom
clip
color
display
font, fontFamiliy, fontSize, fontStyle,
fontVariant, fontWeight
height
left
letterSpacing
lineHeight
listStyle, listStyleType, listStyleImage,
listStylePosition
margin, marginLeft, marginTop,
marginRight, marginBottom
overflow
padding, paddingLeft, paddingTop,
paddingBottom, paddingRight
position
right
textAlign, textIndent, textDecoration,
textTransform
top
visibility
width
zIndex
Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
Crear cuenta
Comentarios de: Introducción a DOM (0)
No hay comentarios