JSHTML DOM

JavaScriptHTML DOMCon el DOM HTML, JavaScript puede acceder y cambiar todos los elementos de un documento HTML.

El HTML DOM (Document Object Model)Cuando se carga una pgina web, el navegador crea unaDocumentObjectModelo de la pgina.Elcdigo HTML DOMmodelo est construido como un rbol deobjetos:El HTML DOM rbol de objetos

Con el modelo de objetos, JavaScript recibe toda la energa que necesita para crear HTML dinmico: JavaScript puede cambiar todos los elementos HTML de la pgina JavaScript puede cambiar todos los atributos HTML en la pgina JavaScript puede cambiar todos los estilos CSS en la pgina JavaScript puede quitar elementos y atributos HTML existentes JavaScript puede aadir nuevos elementos y atributos HTML JavaScript puede reaccionar a todos los eventos de HTML existentes en la pgina JavaScript puede crear nuevos eventos HTML en la pgina

Lo que aprenderEn los prximos captulos de este tutorial usted aprender: Cmo cambiar el contenido de los elementos HTML Cmo cambiar el estilo (CSS) de los elementos HTML Cmo reaccionar ante los acontecimientos HTML DOM Cmo agregar y eliminar elementos HTML

Qu es el DOM?El DOM es una W3C (World Wide Web Consortium) estndar.El DOM define un estndar para acceso a los mismos:"El modelo de objetos de W3C DOM (Document) es una plataforma e interfaz de lenguaje neutro que permite a los programas y scripts acceder y actualizar dinmicamente el contenido, la estructura y el estilo de un documento."

El estndar W3C DOM se divide en 3 partes: Ncleo DOM - modelo estndar para todos los tipos de documentos DOM XML - modelo estndar para los documentos XML HTML DOM - modelo estndar para los documentos HTML

Qu es el DOM HTML?El DOM HTML es un estndarde objetosde modelo yla interfaz de programacinde HTML.Se define: Los elementos HTML comoobjetos Laspropiedadesde todos los elementos HTML Losmtodospara acceder a todos los elementos HTML Loseventosde todos los elementos HTML

En otras palabras:El DOM HTML es un estndar de cmo obtener, cambiar, aadir o eliminar elementos HTML.

JavaScript -HTML DOM MtodosJavaScript - HTML DOM Methods

Mtodos DOM HTML sonlas accionesque puede realizar (en Elementos HTML)Propiedades DOM HTML sonlos valores(de los elementos de HTML) que puede establecer o cambiar

La interfaz de programacin DOMEl HTML DOM se puede acceder con JavaScript (y con otros lenguajes de programacin).En el DOM, todos los elementos HTML se definen comoobjetos.La interfaz de programacin son las propiedades y mtodos de cada objeto.Unapropiedades un valor que se puede obtener o establecer (como cambiar el contenido de un elemento HTML).Unmtodoes una accin que puede hacer (como aadir o eliminar un elemento de HTML).

EjemploEl ejemplo siguiente cambia el contenido (el innerHTML) del elemento con id = "demo":

document.getElementById("demo").innerHTML = "Hello World!";

Resultado:My First PageHello World!

En el ejemplo anterior, getElementById es unmtodo, mientras que innerHTML es unapropiedad.

El mtodo getElementByIdLa forma ms comn para acceder a un elemento HTML es utilizar el id del elemento.En el ejemplo anterior, el mtodo utilizado Identificacin getElementById = "intro" para encontrar el elemento.

La propiedad innerHTMLLa forma ms fcil de obtener el contenido de un elemento es mediante el uso de lainnerHTMLpropiedad.La propiedad innerHTML es til para conseguir o reemplazar el contenido de los elementos HTML.

La propiedad innerHTML se puede utilizar para obtener o cambiar cualquier elemento HTML, incluyendo y .

JavaScriptHTML DOM DocumentoJavaScript HTML DOM Document

Con el DOM HTML, el objeto del documento es su pgina web.

El documento HTML DOMEn el modelo de objetos HTML DOM, el objeto documento representa su pgina web.El objeto del documento es el propietario de todos los dems objetos en su pgina web.Si desea acceder a los objetos en una pgina HTML, siempre se empieza con el acceso al objeto de documento.A continuacin se presentan algunos ejemplos de cmo se puede utilizar el objeto de documento para acceder y manipular HTML.Los siguientes captulos demuestran los mtodos.Encontrar elementos HTMLMethodDescription

document.getElementById()Find an element by element idEncontrar un elemento por id elemento

document.getElementsByTagName()Find elements by tag nameEncontrar elementos por nombre de la etiqueta

document.getElementsByClassName()Find elements by class nameEncontrar elementos por nombre de la clase

Cambio de elementos HTMLMethodDescription

element.innerHTML=Change the inner HTML of an elementCambie el cdigo HTML interno de un elemento

element.attribute=Change the attribute of an HTML elementCambie el atributo de un elemento HTML

element.setAttribute(attribute,value)Change the attribute of an HTML elementCambie el atributo de un elemento HTML

element.style.property=Change the style of an HTML elementCambiar el estilo de un elemento HTML

Adicin y eliminacin de elementosMethodDescription

document.createElement()Create an HTML elementCrear un elemento HTML

document.removeChild()Remove an HTML elementEliminar un elemento HTML

document.appendChild()Add an HTML elementAadir un elemento HTML

document.replaceChild()Replace an HTML elementVuelva a colocar un elemento HTML

document.write(text)Write into the HTML output streamEscribir en la corriente de salida en HTML

Agregando Eventos ManejadoresMethodDescription

document.getElementById(id).onclick=function(){code}Adding event handler code to an onclick eventAdicin de cdigo del controlador de eventos a un evento onclick

Encontrar objetos HTMLEl primero HTML DOM Nivel 1 (1998), define 11 objetos HTML, colecciones de objetos y propiedades.stos siguen siendo vlidas en HTML5.Ms tarde, en HTML DOM Nivel 3, se aadieron ms objetos, colecciones y propiedades.

MethodDescriptionDOM

document.anchorsReturns all with a value in the name attributeDevuelve todos con un valor en el atributo de nombre1

document.appletsReturns all elements (Deprecated in HTML5)Devuelve todos los elementos (obsoleto en HTML5)1

document.baseURIReturns the absolute base URI of the documentDevuelve la URI de base absoluta del documento3

document.bodyReturns the elementDevuelve el elemento 1

document.cookieReturns the document's cookieDevuelve la cookie del documento1

document.doctypeReturns the document's doctypeDevuelve doctype del documento3

document.documentElementReturns the elementDevuelve el elemento 3

document.documentModeReturns the mode used by the browserDevuelve el modo utilizado por el navegador3

document.documentURIReturns the URI of the documentDevuelve la URI del documento3

document.domainReturns the domain name of the document serverDevuelve el nombre de dominio del servidor de documentos1

document.domConfigReturns the DOM configurationDevuelve la configuracin del DOM3

document.embedsReturns all elementsDevuelve todos los elementos 3

document.formsReturns all elementsDevuelve todos los elementos 1

document.headReturns the elementevuelve el elemento 3

document.imagesReturns all elementsDevuelve todos los elementos 1

document.implementationReturns the DOM implementationDevuelve la implementacin DOM3

document.inputEncodingReturns the document's encoding (character set)Devuelve la codificacin del documento (conjunto de caracteres)3

document.lastModifiedReturns the date and time the document was updatedDevuelve la fecha y hora del documento se actualiz3

document.linksReturns all and elements value in hrefDevuelve todo y valor elementos en href1

document.readyStateReturns the (loading) status of the documentDevuelve el (carga) el estado del documento3

document.referrerReturns the URI of the referrer (the linking document)Devuelve la URI de la de referencia (el documento de vinculacin)1

document.scriptsReturns all elementsDevuelve todos los elementos 3

document.strictErrorCheckingReturns if error checking is enforcedDevuelve si la comprobacin de errores se hace cumplir3

document.titleReturns the elementDevuelve el elemento 1

document.URLReturns the complete URL of the documentDevuelve el URL completo del documento1

JavaScriptHTML DOM ElementosJavaScript HTML DOM ElementsEsta pgina te ensea cmo encontrar y elementos de acceso HTML en una pgina HTML.

Encontrar elementos HTMLA menudo, con JavaScript, que desea manipular los elementos HTML.Para ello, usted tiene que encontrar los elementos primero.Hay un par de maneras de hacer esto: Encontrar los elementos HTML por id Encontrar los elementos HTML mediante la etiqueta conocida Encontrar los elementos HTML por nombre de clase Encontrar los elementos HTML por colecciones de objetos HTML

Encontrar elementos HTML por IdLa forma ms fcil de encontrar elementos HTML en el DOM, es mediante el uso de la Identificacin del elemento.En este ejemplo se encuentra el elemento con id = "intro":Ejemplovar x = document.getElementById("intro");

Si se encuentra el elemento, el mtodo devolver el elemento como un objeto (en x).Si no se encuentra el elemento, x contendr nula.

Encontrar elementos HTML por Tag NombreEn este ejemplo se encuentra el elemento con id = "principal", y luego busca todos los elementos dentro de "principal":Ejemplovar x = document.getElementById("main");var y = x.getElementsByTagName("p");

Encontrar elementos HTML por Nombre de claseSi usted quiere encontrar todos los elementos HTML con el mismo nombre de la clase.Utilice este mtodo:document.getElementsByClassName("intro");El ejemplo anterior devuelve una lista de todos los elementos con class = "intro".Encontrar elementos por nombre de clase no funciona en Internet Explorer 5,6,7 y 8.

Encontrar elementos HTML mediante HTML colecciones de objetosEn este ejemplo se encuentra el elemento de formulario con id = "frm1", en la coleccin de formas, y muestra todos los valores de los elementos:Ejemplovar x = document.getElementById("frm1");var text = "";for (var i = 0; i