Al comienzo del artículo, quiero mencionar en términos generales qué es DOM y qué es BOM , porque este artículo está dirigido en última instancia a amigos que tienen cierta base en JavaScript, pero que no entienden o ni siquiera saben acerca de DOM y BOM. .
Sin embargo, antes de hablar sobre qué es DOM y qué es BOM , permítame mostrarle la estructura completa de Javascript :
En la imagen de arriba, podemos ver que hay cuatro elementos: JavaScript, ECMAScript, DOM y BOM . Entonces, ¿cuál es la conexión entre los cuatro? Utilice una ecuación para resumir la relación entre ellos:
JavaScript = ECMAscript + BOM + DOM
Demos una descripción general de ellos uno por uno :
ECMAscript:
ECMAScript es un lenguaje aprobado por ECMA International (anteriormente la Asociación Europea de Fabricantes de Computadoras) a través de ECMA-262. un lenguaje de programación de scripts estandarizado . Es el estándar para JavaScript (JS para abreviar) y los navegadores implementan este estándar .
ECMAscript es más como una regulación que estipula cómo cada navegador ejecuta la sintaxis de JavaScript , ¡porque sabemos que JavaScript es un lenguaje de secuencias de comandos que se ejecuta en el navegador! Existen regulaciones, pero todavía nos falta una forma de interactuar con cada elemento en la página . ¡En este momento nació el siguiente DOM!
DOM:
DOM ( Document Object Model ) es una interfaz de programación de aplicaciones independiente del lenguaje para operar documentos xml y html .
Para JavaScript: para permitir que JavaScript funcione con HTML , JavaScript tiene su propia interfaz de programación DOM .
En una oración: DOM proporciona a JavaScript un "método" para acceder y operar elementos HTML (la razón por la que no usamos la palabra interfaz es porque tememos que algunos amigos se asusten cuando vean la interfaz, pero de hecho la descripción más precisa es JavaScript) se proporciona la interfaz )
BOM:
BOM es el modelo de objetos del navegador, modelo de objetos del navegador . BOM es una interfaz que parece controlar el comportamiento del navegador .
Para JavaScript: para permitir que JavaScript controle el comportamiento del navegador , JavaScript tiene su propia interfaz BOM .
En una frase: BOM proporciona a JavaScript un "método" para controlar el comportamiento del navegador.
Finalmente, entre los tres componentes anteriores de JavaScript, ECMscript es una especificación , mientras que los dos restantes proporcionan "métodos", correspondientes a elementos HTML y navegadores respectivamente , por lo que a continuación nos centramos en los dos últimos: DOM y BOM, para dar una explicación sistemática . Como es para principiantes, mis siguientes explicaciones serán lo más simples y fáciles de entender posible. Si no tienes una buena base, ¡puedes comerlo con confianza !
Primero, expliquemos el conocimiento relacionado de DOM . Lo dividí en dos partes :
Bien, entonces, ¿qué es un árbol DOM?
Algunos principiantes que han aprendido DOM pueden no estar familiarizados con esta palabra, pero de hecho, el árbol DOM no es una cosa particularmente fantástica. Por el contrario, para el personal de front-end, el árbol DOM es el HTML de las páginas que procesa. todos los días. El árbol compuesto por elementos:
En el árbol BOM , cada nodo puede tener dos identidades: puede ser un nodo hijo del nodo padre o puede ser el nodo padre de otros nodos hijos. Observemos juntos el siguiente código :
<!DOCTYPE html>.
<html lang="es">
<cabeza>
<meta juego de caracteres="UTF-8">
<título>DOM_demo</título>
</cabeza>
<cuerpo>
<p>
<a href="https://blog.csdn.net/qq_52736131">Cangrejos de río bailando el tango</a>
</p>
</cuerpo>
</html> Para el código anterior, su árbol DOM debería ser así:
En este momento, alguien quiere preguntar: ¿ Crees que el árbol DOM durante tanto tiempo tiene algo que ver con la operación de elementos html ?
La respuesta es muy relevante, solo comprendiendo la estructura del árbol DOM del documento podemos operar elementos DOM de manera precisa y efectiva ; de lo contrario, aparecerán varios errores inesperados. Antes de operar los elementos HTML de una página, debemos tener un dibujo claro del DOM de toda la página . Incluso si en realidad no estamos dibujando, debemos tener una estructura de contexto clara en nuestra mente.
Con respecto a algunos métodos comunes para operar elementos html en DOM en JavaScript , los he dividido en varias subpartes para presentárselos:
// 1. Pasar Obtener el valor del atributo id del elemento y devuelve un objeto de elemento var elemento = document.getElementById(id_content) // 2. Obtener el elemento a través del valor de su atributo de nombre y devolver una matriz de objetos de elemento var element_list = document.getElementsByName(name_content) // 3. Obtener el elemento a través del valor del atributo de clase del elemento y devolver una matriz de objetos de elemento var element_list = document.getElementsByClassName(class_content) // 4. Obtener el elemento a través del nombre de la etiqueta y devolver una matriz de objetos de elemento var element_list = document.getElementsByTagName(tagName)
// 1. Obtener el valor del atributo del elemento. Los parámetros pasados son, naturalmente, los nombres de los atributos, como clase, id, href. var attr = elemento.getAttribute(nombre_atributo) // 2. Establecer el valor del atributo del elemento. Los parámetros pasados son, naturalmente, el nombre del atributo del elemento y el valor del atributo correspondiente que se establecerá element.setAttribute(attribute_name,attribute_value)
// 1. Cree un elemento html y el parámetro pasado es el tipo de elemento, como p, h1-5, a, tomando p como ejemplo a continuación var element = document.createElement ( "pag") // 2. Cree un nodo de texto y pase el contenido de texto correspondiente (tenga en cuenta que es un nodo de texto, no un elemento html) var text_node = documento.createTextNode(texto) // 3. Cree un nodo de atributo y el parámetro pasado es el nombre del atributo correspondiente var attr_node = document.createAttribute(attribute_name) element.setAttributeNode(attr_node)
Preste especial atención al tercero. Este método para crear un nodo de atributo debe coincidir con un elemento específico , es decir, primero debe obtener un elemento específico, crear un nodo de atributo y finalmente agregarlo. nodo de atributo a este elemento (setAttributeNode) .
//1. Agregue un nodo al final del elemento. El parámetro pasado es el tipo de nodo element.appendChild(Node). // 2. Inserte un nodo delante de un nodo existente dentro del elemento y aún pase un parámetro de tipo de nodo element.insertBefore(new_Node,existent_Node).
Tenga en cuenta que antes de agregar un nodo , primero debe crear el nodo y en el. Al mismo tiempo, seleccione el elemento del nodo principal . En el segundo método, incluso debe encontrar los nodos hermanos detrás de la posición de inserción .
// Eliminar un nodo dentro del elemento. El parámetro pasado es el parámetro de tipo de nodo element.removeChild(Node).
Tenga en cuenta que al eliminar, debe encontrar el elemento del nodo principal correspondiente para eliminarlo sin problemas .
Finalmente, algunos atributos DOM comunes :
//1. Obtener el nodo padre del elemento actual var element_father = element.parentNode //2.Obtener el nodo secundario del tipo de elemento html del elemento actual var element_son = element.children //3.Obtener todos los tipos de nodos secundarios del elemento actual, incluidos elementos html, texto y atributos var element_son = element.childNodes //4.Obtener el primer nodo hijo del elemento actual var element_first = element.firstChild // 5. Obtener el elemento hermano anterior del elemento actual var element_pre = element.previousSibling //6. Obtener el siguiente elemento hermano del elemento actual var element_next = element.nextSibling //7.Obtiene todo el texto del elemento actual, incluido el código fuente html y el texto var element_innerHTML = element.innerHTML // 8. Obtenga todo el texto del elemento actual, excluyendo el código fuente html var element_innerTEXT = element.innerText
Entre ellos, el séptimo significa convertir el código html y el texto del elemento en texto , y el código html original. se ejecuta. , convertirlo en texto es equivalente a convertirlo en una cadena normal.
A continuación, hablaremos sobre BOM nuevamente. Debido al espacio limitado, BOM no se explicará en detalle (la practicidad de hecho no es tan buena como DOM). Repasemos la introducción sobre BOM al principio:
BOM proporciona varios "métodos" para que JavaScript opere el navegador.
Primero, usemos una imagen para ordenar la estructura de toda la BOM. Similar a DOM, BOM también tiene una estructura de árbol:
En la imagen de arriba, podemos ver:
la ventana es la parte superior de toda la cadena alimentaria del árbol BOM , por lo que cada ventana recién abierta se considera un objeto ventana.
El objeto de ventana tiene las siguientes propiedades y métodos comunes :
| Propiedad/Método | Significado |
| abridor | La ventana principal de la |
| longitud | de la ventana actualEl número de marcos en el |
| documento | de ventanaEl objeto de documento que se muestra actualmente en la ventana |
| alerta (cadena) | Crea un cuadro de diálogo de advertencia y muestra un mensaje |
| close() | Cierra la ventana |
| confirm() | Crea un cuadro de diálogo que requiere confirmación del usuario |
| open(url, nombre, [opciones]) | Abre una nueva ventana y devuelve el |
| mensaje del nuevo objeto de ventana (texto, entrada predeterminada) | Crea un cuadro de diálogo que requiere que el usuario ingrese información |
| setInterval(expresión, milisegundos) | calcula una expresión después del intervalo de tiempo especificado |
| setInterval(función, milisegundos, [argumentos]) | llama a una función setTimeout(expresión, milisegundos) después del intervalo de tiempo especificado |
| setTimeout(expresión, milisegundos | |
| ) | después de que expire el temporizador | calcula una función después de que expire el temporizador. |
Entre ellas, puede ver que hay una función alert() arriba , porque cuando aprendemos JavaScript, la mayoría de las veces. Usamos la ventana emergente de la función alert() como flujo de entrada y salida. Esta es mi primera demostración , así que cuando vea esto, puede preguntarse:
Cuando usé la función alert(), parecía que esa ventana no se mencionaba. Entonces, ¿ el alert() aquí es el mismo alert() que aprendí antes ? La respuesta es esta:
estas dos alertas () son de hecho la misma función . La razón por la que se puede omitir ventana es porque todas las propiedades y métodos de ventana se pueden expresar de dos maneras :
(1) método ventana.property/ventana ().
(2) La llamada directa a atributo/método ()
no es solo alerta (), todos los atributos y funciones de la ventana anteriores son válidos, los amigos interesados pueden probarlo ellos mismos.
¿Qué es un objeto de ubicación ?
El objeto de ubicación es un atributo del objeto de ventana que proporciona información sobre el documento cargado en la ventana actual y también proporciona algunas funciones de navegación.
El objeto de ubicación tiene los siguientes atributos y métodos comunes:
| Atributo/método | contenido | |
| host | nombre de host: número de puerto | |
| nombre | de host | nombre de host|
| href | URL completa | |
| de ruta | nombre de ruta | |
| puerto | número de puerto | |
| protocolo | parte | del protocolo|
| cadena | de consulta de búsqueda | |
| reload() | recarga la URL actual | |
| usando | repalce() | La nueva URL reemplaza la página actual. |
De hecho, si observamos cuidadosamente el diagrama de estructura anterior, encontraremos que
el objeto de ubicación no es solo un atributo del objeto de ventana, sino también un atributo del objeto de documento.
Esto significa:
ventana.ubicación = ubicación = documento.ubicación
¿Qué es el objeto histórico ?
El objeto de historial es un atributo del objeto de ventana. Guarda el registro del acceso a Internet del usuario. La marca de tiempo de este registro se calcula desde el momento en que se abrió la ventana.
El objeto de historial tiene los siguientes atributos y métodos comunes:
| Atributo/método | descripción |
| longitud | El número de registros en el objeto de historial |
| back() | va a la URL anterior de la entrada del historial del navegador, similar a retroceder |
| hacia adelante () | va a la siguiente URL de la entrada del historial del navegador, similar a avanzar |
| (num) | El navegador avanza o retrocede en el objeto del historial |
Finalmente, introduzcamos el objeto navegador :
El objeto navegador es un atributo de ventana en la lista de materiales que identifica el navegador del cliente.
Algunos atributos comunes relacionados con el navegador:
| descripción | del atributo |
| appName | nombre completo del navegador y versión de información |
| plataforma | sistema plataforma donde se |
| complementos | conjunto de información de complementos instalados en el navegador |
| userAgent | cadena de agente de usuario del navegador |
| userLanguage | idioma predeterminado del sistema operativo |