PDF de programación - Introducción a DOM

Imágen de pdf Introducción a DOM

Introducción a DOMgráfica de visualizaciones

Publicado el 9 de Septiembre del 2017
510 visualizaciones desde el 9 de Septiembre del 2017
270,2 KB
7 paginas
Creado hace 17a (09/05/2003)
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 ©
  • Links de descarga
http://lwp-l.com/pdf6896

Comentarios de: Introducción a DOM (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad