Este artículo mostrará la estructura del documento con el que trabaja. JavaScript. Al tener un conocimiento práctico del modelo de objeto de documento abstracto, puede Escribir código JavaScript Y eso funciona en cualquier página web.
Introducción
Cómo funciona Páginas web y JavaScript juntos y cómo pueden hablar entre ellos? Las respuestas están en entender cómo funciona. Modelo de objeto de documento (DOM)
PROPÓSITO DE DOM
El DOM organiza el contenido de una página web y proporciona una hoja de ruta en ella. El modelo consta de nodos. Los nodos se organizan en una jerarquía, que se considera mejor como una estructura de árbol. Deberíamos poder tomar cualquier código HTML y representarlo de esta manera.
Por ejemplo, el texto de este párrafo es un nodo dentro del Modelo de objetos del documento. El párrafo es otro nodo y es el padre del nodo de texto. El documento en sí es, en última instancia, un nodo principal para ambos.
Podemos escribir JavaScript para trabajar en la página web definiendo nodos. Dado que cada pieza de contenido es un nodo, podemos escribir un JavaScript relacionado con cualquier entidad que queramos cambiar. Notarás que esto es similar a cómo trabajo CSS: Aplica el estilo visual o apariencia al contenido utilizando los atributos de id y class de los elementos HTML, tal como se comporta JavaScript.
Es importante observar que código CSS y JavaScript no están en el DOM, sino fuera de él. Ambos manejan el contenido del DOM, en lugar de que tú estés dentro de él.
reutilización de código
¿Por qué se gestiona de esta forma el código fuente de las páginas web? Hay dos razones principales:
- Almacenar JavaScript en archivos separados facilita la reutilización del código. Cuando el código JavaScript se escribe en línea, junto al contenido al que se vincula, debe copiarse para que la misma funcionalidad ocurra en otros lugares.
- Separar JavaScript en un archivo externo hace que el código fuente sea más legible al eliminar la funcionalidad de la página web (JavaScript) del contenido (HTML).
Contrato DOMO
Los nodos que se crean y controlan se limitan a lo que admiten las especificaciones HTML y los navegadores. Esta es una de las razones por las que la introducción de HTML5 Para los nuevos elementos de nivel superior es importante.
Para nuestros propósitos, los tipos de nodos más importantes son:
- Element
- Atributo
- Texto
Aunque la lista de especificaciones en En realidad doce en total.
Use un script para crear nodos en el DOM
Con el propósito de una demostración simple, usaremos JavaScript para crear un elemento específico.
Aquí le mostraremos cuán poderoso es JS usándolo para crear uno de los objetos de página web básicos más populares, que es Dirección.
Para seguir este ejemplo, no vale la pena crear un servidor completamente virtual, por lo que es mejor usar el Sandbox en línea. Necesitarás un widget para probar como JSBin. JSBin es excelente porque tiene varias partes e incluye una forma de ver y manipular todo: HTML, JS, CSS y vistas previas de páginas web de una sola vez.
(Codepen Similar, y por el bien de este ejemplo, funcionará de la misma manera).
JSBin también puede generar dinámicamente direcciones URL para instrucciones JS que se pueden compartir más adelante. para ti El ejemplo que creé para este tema.
Recreé y anoté los siguientes fragmentos para producir un nuevo encabezado H1 en el cuerpo:
fragmento de HTML
fragmento de javascript
//declare a new variable to hold a new h1 element
var newHeading = document.createElement("h1");
//add the text node to the document
var h1Text = document.createTextNode("Heading Level 1");
//make it a child node of the new heading
newHeading.appendChild(h1Text);
//append this as a child of element defined as "bt"
document.getElementById("bt").appendChild(newHeading); que crea un elemento H1 Nuevo y su contenido está directamente relacionado con la etiqueta. .
Tenga en cuenta que el HTML de origen en el panel derecho no cambia. Este código es bastante fácil de leer en este ejemplo. En la Ayuda avanzada de Javascript, las cosas pueden complicarse más.
Aprende un poco sobre la estructura del vocabulario de JavaScript
El fragmento anterior tiene alguna explicación.
crear var Una variable, almacena un valor aleatorio para que lo use su código.
= Es el agente de reclutamiento. Funciona aquí usando el término var y el nombre de la nueva variable (por ejemplo, nuevo encabezamiento) para formar una variable completa.
objeto.método Es una llamada que utiliza la sintaxis”puntoPara separar objetos, como un documento, de los métodos utilizados en relación con ellos, como en getElementById.
concepto dignoobjetosHay mucho debate en la programación y está más allá del alcance de este artículo. Baste decir que son componentes importantes de su aplicación.
Métodos Es lo que cabría esperar: una acción específica o una acción planificada que se puede aplicar a los objetos.
Seguro que hemos cubierto muchos recursos excelentes Para aprender JavaScript. Vuelve a consultar en nuestra sección de programación para mayor información.
Que sigue
Uno de los frameworks más populares que usan JavaScript es JQuery. Es una base importante para la última iteración de aplicaciones y páginas web enriquecidas, y es donde quizás desee comenzar a continuación.
JQuery es una biblioteca de JavaScript que acorta muchas secuencias de comandos y tareas repetitivas comunes para facilitar la programación. JQuery es un software gratuito de código abierto con mi licencia MIT وJBL.
