2010-10-14 18 views
33

Siempre escucho a la gente hablar sobre DOM esto, manipular el DOM, cambiar el DOM, recorrer el DOM; pero, ¿qué significa exactamente esto?¿Qué quiere decir la gente con "DOM Manipulation" y cómo lo haría?

¿Cuál es el DOM y por qué querría hacer algo con él?

+3

Las respuestas a continuación son en donde está. Sin embargo, aquí hay una analogía. Con respecto al desarrollo del front end del sitio web. Puedes pensar en DOM como los materiales de construcción que usas para construir un edificio. Los marcos, como jQuery, y los patrones de diseño son los planos personalizables para su edificio. El IDE y el software para construir son sus herramientas. El idioma es su especialidad (albañil, carpintería). –

Respuesta

37

El DOM es básicamente una API utilice para interactuar con el documento, y está disponible en muchos idiomas como una biblioteca (JS es uno de esos idiomas). El navegador convierte todo el HTML en su página web a un árbol basado en el anidamiento. Pop abre Firebug y mira la estructura HTML. Ese es el árbol del que estoy hablando.

Si desea cambiar cualquier código HTML, puede interactuar con la API DOM para hacerlo.

<html> 
<head><script src="file.js"></script></head> 
<body>blah</body> 
</html> 

En file.js I puede hacer referencia al cuerpo usando:

onload = function() { 
    document.getElementsByTagName('body')[0].style.display='none'; 
} 

El getElementsByTagName es un método del objeto document. Estoy manipulando el elemento body, que es un elemento DOM. Si quería recorrer y encontrar decir, un lapso que puedo hacer esto:

onload = function() { 
var els = document.getElementsByTagName('*'); 
for (var i = els.length; i--;) { 
    if (els[i].nodeType == 1 && els[i].nodeName.toLowerCase() == 'span') { 
     alert(els[i]) 
    } 
} 
} 

estoy atravesando la lista de nodos devueltos por getElementsByTagName en el fragmento anterior, y en busca de un lapso basado en la propiedad nodeName.

+3

¿El DOM es la API que se puede usar en Javascript para modificar HTML? –

+2

Sí, y hay bibliotecas en otros idiomas también para el DOM. –

+0

¡Sí! Esta respuesta es definitivamente lo que estaba buscando. Ahora no me sentiré como un tonto cuando las personas hablen de eso. ¡Gracias de nuevo! –

16

Significa trabajar con Document Object Model, que es una API para trabajar con documentos similares a XML.

De W3 en la DOM:

El Document Object Model es una plataforma y la interfaz de lenguaje neutro que permitirá a los programas y scripts acceder y actualizar el contenido, estructura y estilo de los documentos de forma dinámica. El documento se puede seguir procesando y los resultados de ese procesamiento se pueden incorporar nuevamente a la página presentada. Esta es una descripción general de los materiales relacionados con DOM aquí en W3C y en la web.

Una de las funciones que se utilizan principalmente en el trabajo DOM es:

getElementById 

Manipulación/Cambio del DOM significa utilizar esta API para cambiar el documento (añadir elementos, eliminar elementos, elementos del movimiento alrededor etc ...).

Atravesando el DOM significa que la navegación - la selección de elementos específicos, interactuando sobre grupos de elementos, etc ...

+0

Gran punto al mencionar la navegación. –

0

Simplemente necesita leer algo al respecto, porque cualquiera que sea la respuesta que voy a enumerar aquí no será suficiente, hay libros al respecto.
Pero se puede obtener respuesta a sus preguntas mediante la comprobación de los siguientes:
http://en.wikipedia.org/wiki/Document_Object_Model
http://www.w3.org/DOM/
http://www.w3schools.com/htmldom/default.asp

+0

No espero saber todo al respecto, pero al menos qué es. ¡Creo que esta pregunta y las respuestas dadas sirven a este propósito muy bien! :) –

0

D OCUMENTO

O bject

M Odel

Este es el DOM. Ya sea un XML, o HTML, o documento similar. Todos estos términos significan analizar el documento y/o realizar cambios en él (generalmente utilizando algunas herramientas disponibles, como JavaScript o C#).

El mejor ejemplo de un DOM cuando las personas usan esos términos es el documento HTML en un navegador. Es posible que desee manipular el DOM en este caso para agregar algo a la página web.

0

En resumen:

Cuando se carga una página web, el navegador crea un objeto Modelo Documento de la página, que es una representación orientada objeto de un documento HTML, que actúa como una interfaz entre JavaScript y el documento en sí y permite la creación de páginas web dinámicas.

Fuente: w3schools - HTML DOM

Cuestiones relacionadas