Lado del cliente: HTML, DOM y CSS?

No he trabajado mucho en el Client Side/Front End de la aplicación y estoy tratando de leer sobre HTML, CSS and DOM pero de alguna manera no soy capaz de descubrir la diferencia entre ellos, por lo que realmente apreciaría si alguien puede:

  1. Explícame en inglés simple ¿cómo funcionan HTML, CSS y DOM?
  2. ¿Cómo se relacionan entre sí desde el punto de vista de Client Side Technology?

Actualización He wikipedia artículos de wikipedia pero no he podido entender claramente el funcionamiento de DOM.

Gracias.

HTML es lo que está en su sitio web (encabezados, listas, tablas)

CSS es cómo se ven esas cosas (bordes, colores, tamaños de fuente)

DOM es cómo acceder a esas cosas a través de javascript (obtener nodos, agregar nuevos elementos, cambiar su estilo)

Aquí hay un ejemplo de los 3 trabajando juntos (no parece funcionar en ie) http://jsfiddle.net/gj9zT/

¿Cuál es el DOM?

Digamos que abre un navegador web (por ejemplo, Chrome) y carga una página web en él (por ejemplo, stackoverflow.com). Ahora, dentro del navegador, hay un objeto de window . Este objeto representa la ventana del navegador.

Este objeto de window tiene docenas de propiedades (miembros), el más importante de ellos es el objeto del document . El objeto del document representa la página web que está cargada actualmente en la ventana del navegador.

Este document objeto es la raíz del árbol DOM:

http://sofes.miximages.com/html/htmltree.gif

Cada cuadro en la imagen de arriba es un nodo dentro del árbol DOM. Un nodo es un objeto que está “conectado” a otros objetos del árbol DOM.

Los progtwigs de JavaScript que están vinculados a una página web tienen acceso completo a cada nodo del árbol DOM. Pueden eliminar nodos, agregar nuevos nodos o simplemente manipular las propiedades de un nodo.


En resumen, dentro del navegador existen cientos de objetos. Todos estos objetos están conectados (de alguna manera), y esta enorme estructura de objetos interconectados es el DOM.

HTML describe la estructura de un documento. El navegador analiza HTML y construye una representación interna de los elementos del documento, como:

 document | |-body | |-div | | | |-p | | | |-"some text" |-div | |-... 

Esta representación interna es el DOM, el Modelo de Objetos del Documento. Esta es la base para crear la representación visual real del sitio web.

CSS se usa para definir cómo se ve exactamente esta representación visual.

Partes del DOM también están expuestas a través de una API, por lo que puede manipular el DOM (es decir, el documento) utilizando un lenguaje de progtwigción como Javascript.

Mira esto

  1. Confundido por la relación entre DOM y HTML (API)
  2. Diferencia entre html y dom

Es una explicación larga, pero trataré de explicar en breve

CSS: se usan para aplicar propiedades a elementos html. Si desea aplicar un color común a varios elementos html, podemos hacerlo en CSS y aplicar esa clase al elemento html. Podemos evitar la repetición de código con css. Podemos lograr muchas otras cosas con CSS. Leer en google

HTML: HTML no es más que varios tipos de tags que utilizamos para mostrar los elementos como tablas, divs, p, ul, li, etc.

DOM: DOM no es más que la relación entre los elementos html, usamos javascript normalmente para manipular el DOM como cambiar la altura, movernos de un lugar a otro …

Habrá muchos enlaces en google, puede mejores explicaciones.

HTML (HyperText Markup Language) es el marcado que utilizamos para describir la estructura de nuestra página. Define los diferentes constructos como

    Ordered List o

    Tables etc …

    HTML es el código con el que comenzamos, es legible por humanos (bueno, se supone que es de todos modos: p) y fácilmente compresible y transferible.

    DOM (Document Object Model) es el marco que utiliza su computadora para organizar la página que representa en HTML. Cuando su computadora descompone su documento HTML, lo organiza en un modelo de objetos con el que puede trabajar más fácilmente (y también puede hacerlo en javascript / css / etc …).

    CSS (Hojas de estilo en cascada) describe cómo desea que se vean los elementos en sus documentos. Se denominan hojas de estilo en cascada porque se “conectan en cascada” al siguiente para rellenar los agujeros o anular el estilo. CSS describe las cualidades visuales de los objetos en el DOM.

    HTML es efectivamente el marcado de su DOM (Document Object Model). La raíz del documento es , que contiene muchos niveles de

    s

    ,

    aragraphs,

    eaders, etc.

    El DOM es el árbol (estructura gráfica) de su marcado HTML. Tendrá una ‘raíz’, que tiene muchos ‘hijos’, los niños tendrán ‘hermanos’ y ‘padres’, ‘descendientes’ y ‘ancestros’. La raíz no tiene un padre, y es un ancestro de todos los nodos descendientes. por ejemplo, su documento html típico se estructurará así:

        Banner Example     

    here is a bunch of content.

    En este caso, html es el nodo raíz, que tiene dos hijos: cabeza y cuerpo. La cabeza y el cuerpo son hermanos. Puede usar el modelo DOM con selectores para seleccionar qué objetos (contenidos en un nodo) se verán afectados por un código como CSS.

    CSS tomará selectores y los diseñará según lo especifique en su bloque de atributos. Puede seleccionar todos los elementos

    , usando

     p { color: red; } 

    O puede seleccionar solo ‘p’ donde es un descendiente de un div cuyo id es content :

    div # content {color: black; }

    CSS típicamente diseñará una etiqueta usando la descripción DOM más específica que se le puede aplicar. Entonces, en mi ejemplo html anterior, el primer estilo CSS se aplicará a todo p, y luego el segundo, un estilo más específico se aplicará solo a esa p en el div de contenido.

    Esencialmente, lo que sucede es que su navegador analizará su código HTML en secciones que les permiten ser seleccionadas individualmente. Esa estructura analizada es tu DOM. CSS usa el DOM para aplicar estilos. jQuery hace lo mismo, permitiéndole seleccionar un nodo específico del DOM y aplicar estilos o acciones a ese nodo dinámicamente en el lado del cliente.

      Intereting Posts