JavaScript: el DOM del W3C

Este modelo de objeto de documento permite el acceso y la modificación de todo el contenido del documento y está estandarizado por el World Wide Web Consortium (W3C). Este modelo es compatible con casi todos los navegadores modernos.

El DOM de W3C estandariza la mayoría de las características del DOM heredado y también agrega otras nuevas. Además de admitir formularios [], imágenes [] y otras propiedades de matriz del objeto Documento, define métodos que permiten que los scripts accedan y manipulen cualquier elemento del documento y no solo elementos de propósito especial como formularios e imágenes.

Propiedades del documento en W3C DOM

Este modelo admite todas las propiedades disponibles en DOM heredado. Además, aquí hay una lista de propiedades del documento a las que se puede acceder usando W3C DOM.

No Señor.	Descripción de propiedad
1	body Una referencia al objeto Element que representa la etiqueta <body> de este documento. Ex - document.body
2	defaultView Su propiedad de solo lectura y representa la ventana en la que se muestra el documento. Ex - document.defaultView
3	documentElement Una referencia de solo lectura a la etiqueta <html> del documento. Ex - document.documentElement8 / 31/2008
4	implementation Es una propiedad de solo lectura y representa el objeto DOMImplementation que representa la implementación que creó este documento. Ex - documento.implementación

Métodos de documento en W3C DOM

Este modelo es compatible con todos los métodos disponibles en DOM heredado. Además, aquí hay una lista de métodos compatibles con W3C DOM.

No Señor.	Descripción de propiedad
1	createAttribute( name) Devuelve un nodo Attr recién creado con el nombre especificado. Ex - document.createAttribute (nombre)
2	createComment( text) Crea y devuelve un nuevo nodo Comentario que contiene el texto especificado. Ex - document.createComment (texto)
3	createDocumentFragment( ) Crea y devuelve un nodo DocumentFragment vacío. Ex - document.createDocumentFragment ()
4	createElement( tagName) Crea y devuelve un nuevo nodo de elemento con el nombre de etiqueta especificado. Ex - document.createElement (tagName)
5	createTextNode( text) Crea y devuelve un nuevo nodo de texto que contiene el texto especificado. Ex - document.createTextNode (texto)
6	getElementById( id) Devuelve el elemento de este documento que tiene el valor especificado para su atributo id, o nulo si no existe tal elemento en el documento. Ex - document.getElementById (id)
7	getElementsByName( name) Devuelve una matriz de nodos de todos los elementos del documento que tienen un valor especificado para su atributo de nombre. Si no se encuentran tales elementos, devuelve una matriz de longitud cero. Ex - document.getElementsByName (nombre)
8	getElementsByTagName( tagname) Devuelve una matriz de todos los nodos Element de este documento que tienen el nombre de etiqueta especificado. Los nodos de Elemento aparecen en la matriz devuelta en el mismo orden en que aparecen en la fuente del documento. Ex - document.getElementsByTagName (nombre de etiqueta)
9	importNode( importedNode, deep) Crea y devuelve una copia de un nodo de algún otro documento que es adecuado para su inserción en este documento. Si el argumento profundo es verdadero, también copia recursivamente a los hijos del nodo. Compatible con DOM versión 2 Ex - document.importNode (importadoNode, profundo)

Ejemplo

Esto es muy fácil de manipular (Acceso y Configuración) elemento de documento usando W3C DOM. Puede utilizar cualquiera de los métodos comogetElementById, getElementsByNameo getElementsByTagName.

Aquí hay un ejemplo para acceder a las propiedades del documento utilizando el método DOM de W3C.

<html>   
   <head>
      <title> Document Title </title>      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var ret = document.getElementsByTagName("title");
               alert("Document Title : " + ret[0].text );
               
               var ret = document.getElementById("heading");
               alert(ret.innerHTML );
            }
         //-->
      </script>      
   </head>
   <body>
      <h1 id = "heading">This is main title</h1>
      <p>Click the following to see the result:</p>
      
      <form id = "form1" name = "FirstForm">
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
         <input type = "button" value = "Cancel">
      </form>
      
      <form d = "form2" name = "SecondForm">
         <input type = "button" value = "Don't ClickMe"/>
      </form>      
   </body>
</html>

NOTE - Este ejemplo devuelve objetos para formularios y elementos y tendríamos que acceder a sus valores utilizando esas propiedades de objeto que no se tratan en este tutorial.

↰ Previous page