• Save
DOM HTML Javascript
Upcoming SlideShare
Loading in...5
×
 

DOM HTML Javascript

on

  • 13,908 views

Presentación del DOM (Document Object Model) de documentos HTML con Javascript. Resumen de las características más importantes y ejemplos sencillos de como utilizarlas. A través del DOM, los ...

Presentación del DOM (Document Object Model) de documentos HTML con Javascript. Resumen de las características más importantes y ejemplos sencillos de como utilizarlas. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML

Statistics

Views

Total Views
13,908
Views on SlideShare
13,643
Embed Views
265

Actions

Likes
7
Downloads
0
Comments
0

6 Embeds 265

http://eblancocds.wordpress.com 191
http://cortezcds32599.wordpress.com 46
http://www.slideshare.net 20
http://rosariotomedrano.wordpress.com 4
http://us-w1.rockmelt.com 3
http://static.slidesharecdn.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

DOM HTML Javascript DOM HTML Javascript Presentation Transcript

  • DOM
    • Profesor: Efraín Herrera jiménez
    • Email: efrainh@gmail.com
    • Fuente: http://www.librosweb.es/ajax/capitulo4.html
  • DOM
    • DOM o Document Object Model es un conjunto de utilidades específicamente diseñadas para manipular documentos XML.
    • Por extensión, DOM también se puede utilizar para manipular documentos XHTML y HTML.
    • Técnicamente, DOM es una API de funciones que se pueden utilizar para manipular las páginas XHTML de forma rápida y eficiente.
  • DOM <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Página sencilla</title> </head> <body> <p>Esta página es <strong>muy sencilla</strong></p> </body> </html>
  • DOM
  • DOM Tipos de nodos
    • Document: es el nodo raíz de todos los documentos HTML y XML. Todos los demás nodos derivan de él.
    • Element: representa el contenido definido por un par de etiquetas de apertura y cierre (<etiqueta>...</etiqueta>) o de una etiqueta abreviada que se abre y se cierra a la vez (<etiqueta/>). Es el único nodo que puede tener tanto nodos hijos como atributos.
    • Attr: representa el par nombre-de-atributo/valor.
    • Text: almacena el contenido del texto que se encuentra entre una etiqueta de apertura y una de cierre.
  • DOM Propiedades y métodos de nodos
    • nodeName, nodeValue, nodeType
    • ChildNodes, attributes
    • firstChild, lastChild, nextSibling, previousSibling
    • AppendChild(), removeChild(), replaceChild(), insertBefore()‏
    • createAttribute(), createElement(), createTextNode()‏
    • getAttribute(), setAttribute(), removeAttribute()‏
  • DOM Acceso directo a los nodos
    • getElementById()‏
    • getElementsByName()‏
    • GetElementsByTagName()‏
  • DOM Acceso directo a los nodos - GetElementsByTagName()‏
    • Obtiene todos los elementos de la página XHTML cuya etiqueta sea igual que el parámetro que se le pasa a la función. Ej:
    var parrafos = document.getElementsByTagName(&quot;p&quot;); for(var i=0; i<parrafos.length; i++) { var parrafo = parrafos[i]; }
  • DOM Acceso directo a los nodos - GetElementsByName() *se debe manejar con cuidado en IE
    • Obtiene todos los elementos de la página XHTML cuyo atributo name coincida con el parámetro que se le pasa a la función. Ej:
    <input type=”text” name=”ciudad” value=”Cartagena” /> var city = document.getElementsByName(&quot;ciudad&quot;); alert(city.value);
  • DOM Acceso directo a los nodos - GetElementById()‏
    • Devuelve el elemento XHTML cuyo atributo id coincide con el parámetro indicado en la función. Como el atributo id debe ser único para cada elemento de una misma página, la función devuelve únicamente el nodo deseado. Ej:
    <div id=”contenido”>...</div> var con = document.getElementById(&quot;contenido&quot;);
  • DOM Agregar nodos Se crea el elemento, se crean sus nodos hijos (atributos o texto), se le asocian los hijos y por último se asocia el nuevo elemento al documento xhtml. Ej: var p = document.createElement(&quot;p&quot;); var texto = document.createTextNode(&quot;Este p no estaba en el HTML original&quot;); p.appendChild(texto); document.body.appendChild(p);
  • DOM Agregar nodos Ej. 2: var con = document.getElementById(”contenido”); var p = document.createElement(&quot;p&quot;); var texto = document.createTextNode(&quot;Donde va este p en relacion al div contenido?&quot;); p.appendChild(texto); //con.appendChild(p); //p dentro del div document.body.insertBefore(p , div); //p antes del div
  • DOM Agregar nodos Ej. 3: var con = document.getElementById(”contenido”); var p = document.createElement(&quot;p&quot;); var texto = document.createTextNode(&quot;p alineado&quot;); p.appendChild(texto); p.setAttribute(&quot;align&quot;, &quot;center&quot;); con.appendChild(p);
  • DOM Reemplazar nodos Ej: var padre = document.getElementById(”padre”); var hijo1 = document.getElementById(&quot;hijo1&quot;); var hijo2 = document.createElement(&quot;h3&quot;); var texto = document.createTextNode(&quot;H3 nuevo&quot;); hijo2.appendChild(texto); padre.replaceChild(hijo2,hijo1);
  • DOM Eliminar nodos Ej: var con = document.getElementById(”contenido”); var p = document.getElementById(”paraborrar”); con.removeChild(p);
  • DOM Atributos getAttribute(), setAttribute(), removeAttribute() Ej: <div id=”contenido” align=”center”>Texto.....</div> var con = document.getElementById(”contenido”); var alineacion = con.getAttribute(”align”); con.setAttribute(”align”,”right”); con.removeAttribute(”align”);