Resumen de puntos de conocimiento de JavaScript: DOM

1. Introducción a DOM

1.1 ¿Qué es DOM?

Una implementación completa de JavaScript consta de las siguientes 3 partes diferentes:

• Núcleo (ECMAScript): La parte central del lenguaje, que describe la sintaxis y los objetos básicos del lenguaje.

• Modelo de objetos de documento (DOM): estándar de operación de documentos de páginas web, que describe métodos e interfaces para procesar el contenido de la página web.

• Modelo de objetos del navegador (BOM): la base para las operaciones de las ventanas del cliente y del navegador, que describe los métodos e interfaces para interactuar con el navegador.

Document Object Model ( Document Object Model，简称DOM ) es una编程接口estándar recomendada por la organización W3C para procesar lenguaje de marcado extensible (HTML o XML).
W3C ha definido una serie de interfaces DOM a través de las cuales se puede cambiar el contenido, la estructura y el estilo de las páginas web.

Idioma oficial: Document Object Model (DOM) es una interfaz de programación estándar recomendada por la organización W3C para procesar lenguajes de marcado extensibles. Es una interfaz de programación de aplicaciones (API) independiente de la plataforma y el lenguaje que puede acceder dinámicamente a programas y scripts y actualizar su contenido, estructura y estilo de documentos www (los documentos HTML y XML se definen a través de secciones de descripción). El documento se puede procesar más y los resultados del procesamiento se pueden agregar a la página actual. DOM es un documento API basado en árbol que requiere que todo el documento esté representado en la memoria durante el procesamiento. Otra API simple es SAX basada en eventos, que se puede utilizar para procesar documentos XML muy grandes. Debido a su gran tamaño, no son adecuados para procesarlos todos en la memoria.

1.2 árbol DOM

• Documento: una página es un documento. El documento se usa en DOM para representar
• elementos: todas las etiquetas en la página son elementos y el elemento se usa en DOM para representar
• nodos: todo el contenido de la página web son nodos (etiquetas, atributos, texto, comentarios, etc.) Utilice el nodo en DOM para representar

DOM 把以上内容都看做是对象

2. Obtener elementos

2.1 Cómo obtener elementos de página

DOM se utiliza principalmente para operar elementos en nuestro desarrollo real.
¿Cómo obtenemos los elementos de la página? Puede obtener los elementos de la página de las siguientes maneras:

• Obtener según el ID
• Obtener según el nombre de la etiqueta
• Obtener elementos especiales
• mediante nuevos métodos en HTML5
• 
  

2.2 Obtener según ID

Utilice el método getElementById() para obtener el objeto elemento con ID.

document.getElementById('id');

Utilice console.dir() para imprimir el objeto elemento que obtuvimos y ver mejor las propiedades y métodos del objeto.

2.3 Obtener basado en el nombre de la etiqueta

Utilice el método getElementsByTagName() para devolver una colección de objetos con el nombre de etiqueta especificado.

document.getElementsByTagName('nombre de etiqueta');

Nota:

1. Debido a que lo que obtenemos es una colección de objetos, debemos recorrerlos si queremos operar los elementos internos.
2. La obtención del objeto elemento es dinámica

2.4 Obtener document.getElementsByClassName('class name') mediante el nuevo método de HTML5

; // Devuelve la colección de objetos elemento según el nombre de la clase document.querySelector('selector'); el selector especificado El primer elemento objeto document.querySelectorAll('selector'); // Retorna según el selector especificado

注意：
Los selectores en querySelector y querySelectorAll deben estar marcados, por ejemplo: document.querySelector('#nav');

2.5 Obtener elementos especiales (cuerpo, html)

1. Obtener el elemento del cuerpo

doucumnet.body // Devolver el objeto del elemento del cuerpo

2. Obtener el elemento html

document.documentElement // Devolver el objeto del elemento html

3. Conceptos básicos del evento

3.1 Descripción general del evento

JavaScript habilita Nos permite crear páginas dinámicas y los eventos son comportamientos que JavaScript puede detectar.
简单理解： 触发--- 响应机制。
Cada elemento de la página web puede generar ciertos eventos que pueden activar JavaScript. Por ejemplo, podemos generar un evento cuando el usuario hace clic en un botón y luego realizar ciertas operaciones.

3.2 Tres elementos de los eventos:

1. origen del evento (quién)
2. tipo de evento (qué evento)
3. controlador de eventos (qué hacer)

caso:

var btn = document.getElementById('btn');
btn.onclick = función() {
 alerta('¿Cómo estás?'); 
};

3.3 Pasos para ejecutar eventos:

1. obtener el origen del evento,
2. registrar el evento (evento vinculado)
3. , agregar un controlador de eventos (en forma de asignación de función)

3.3 Eventos comunes del mouse

注：以下图片的事件只是常见的并不代表所有

3.4 Analizar los tres elementos

de los eventos:
1. Fuente del evento (en qué desea operar)

2. Evento (qué desea hacer para lograr el efecto de interacción deseado)

3. Función de procesamiento (cómo desea que se vea el objetivo después de que se desarrolle el evento)

4 . Elemento de operación

Las operaciones DOM de JavaScript pueden cambiar el contenido, la estructura y el estilo de las páginas web. Podemos usar elementos de operación DOM para cambiar el contenido, los atributos, etc. Tenga en cuenta que los siguientes son todos atributos

4.1. Cambie el contenido del elemento

element.innerText

desde la posición inicial a la posición final, pero elimina la etiqueta html. Al mismo tiempo, los espacios y los saltos de línea también eliminarán

todo el contenido del inicio. position a la posición final de

element.innerHTML

4.2 Operaciones de atributos de elementos comunes

InnerText e InnerHTML para cambiar el contenido del elemento.
src, href
id, alt, title

4.3 Operaciones de atributos de elementos de formulario

Puede usar DOM para operar los atributos de los siguientes elementos de formulario:

tipo, valor, marcado, seleccionado, deshabilitado

4.4 Operaciones de atributos de estilo

Podemos modificar el tamaño, color, posición y otros estilos de elementos a través de JS.

1. element.style Operación de estilo en línea
2. element.className Operación de estilo de nombre de clase

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

los elementos operativos son el contenido central del DOM.

4.5 Pensamiento excluyente

Si hay el mismo grupo de elementos y queremos que un determinado elemento implemente un determinado estilo, debemos utilizar el algoritmo exclusivo de bucle:

1. borrar los estilos de todos los elementos (matar a otras personas)
2. y establecer el estilo para el elemento actual ( dejándome en paz).
3. Tenga en cuenta que el orden no se puede invertir, primero mate a otras personas y luego configúrelo usted mismo

4.6 Operación de atributos personalizados

1. Obtenga el valor del atributo

• element.property Obtenga el valor del atributo.
• element.getAttribute('attribute');

Diferencia:

• element.attribute obtiene el valor del atributo incorporado (el atributo que viene con el elemento en sí)
• element.getAttribute('attribute'); nuestros programadores Propiedad

2. Establezca el valor de la propiedad

• element.property = 'valor' Establezca el valor de la propiedad incorporada.
• element.setAttribute('Attribute', 'Value');

Diferencia:

• element.Attribute establece el valor del atributo incorporado
• element.setAttribute('Attribute'); establece principalmente atributos personalizados (estándar)

3. Elimina atributos

• element.removeAttribute(' Propiedades ');

4.7 Propiedades personalizadas H5

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

Los atributos personalizados se obtienen mediante getAttribute('attribute').
Sin embargo, algunos atributos personalizados pueden causar ambigüedad fácilmente y es difícil determinar si son atributos integrados o atributos personalizados del elemento.

H5 nos ha agregado nuevos atributos personalizados:

1. Establecer atributos personalizados de H5

H5 estipula que el comienzo de los datos del atributo personalizado debe usarse como nombre del atributo y asignarse un valor.

O use JS para configurar

element.setAttribute('data-index', 2)

2. Obtenga atributos personalizados H5 <br/> Compatibilidad Obtenga element.getAttribute('data-index');
H5 ha agregado element.dataset.index o element.dataset['index'], que solo se admite en IE 11.

5. Las operaciones de nodo

generalmente usan dos métodos para obtener elementos:
1. Utilice los métodos proporcionados por DOM para obtener elementos

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector, etc.  La lógica no es sólida ni engorrosa

• Utilice

la relación jerárquica de nodos para obtener elementos.

nodo

• hijo-hermano para obtener elementos
• La lógica es fuerte, pero Ligeramente menos compatible

Ambos métodos pueden obtener nodos de elementos, que se usarán más adelante, pero las operaciones de nodos son más simples

. nodo (etiqueta, atributo, texto, comentario, etc.) En el DOM, un nodo Utilice nodo para representar.
Se puede acceder a todos los nodos del árbol HTML DOM a través de JavaScript y se pueden modificar, crear o eliminar todos los elementos HTML (nodos).

Generalmente, los nodos tienen al menos tres atributos básicos: nodeType (tipo de nodo), nodeName (nombre de nodo) y nodeValue (valor de nodo).

• El nodo de elemento nodeType es 1,
• el nodo de atributo nodeType es 2
• y el nodo de texto nodeType es 3 (los nodos de texto incluyen texto, espacios, saltos de línea, etc.)

5.3 Nodo

我们在实际开发中，节点操作主要操作的是元素节点

El nivel

usa el árbol DOM para dividir los nodos. Para diferentes relaciones jerárquicas, la más común es父子兄层级关系

1. Nodo principal

node.parentNode

parentNode

puede

• devolver el nodo principal de un determinado nodo. Tenga en cuenta que es el nodo principal más reciente.
• Si el nodo especificado no tiene un nodo principal, se devolverá nulo.

childNodes (estándar)

parentNode.childNodes devuelve include Una colección de nodos secundarios del nodo especificado, que es una colección que se actualiza inmediatamente.
Nota: El valor de retorno contiene todos los nodos secundarios, incluidos los nodos de elementos, los nodos de texto, etc.
Si solo desea introducir los nodos de los elementos, debe manejarlo de manera especial. Por lo tanto, generalmente no recomendamos el uso de childNodes

var ul = document. querySelector('ul');for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i]. tipo de nodo == 1 ) {
 // ul.childNodes[i] es el nodo del elemento console.log(ul.childNodes[i]);}}

2. parentNode.children (no estándar)

parentNode.children es una propiedad de solo lectura que devuelve todos los nodos de elementos secundarios. Solo devuelve nodos de elementos secundarios y no se devuelven otros nodos (esto es en lo que nos centramos).
Aunque Children no es un estándar, es compatible con varios navegadores, por lo que podemos usar

3. parentNode.firstChild

firstChild de forma segura para devolver el primer nodo secundario, o null si no se encuentra. Asimismo, se incluyen todos los nodos.

4. parentNode.lastChild

lastChild devuelve el último nodo secundario, o nulo si no se encuentra. De manera similar, también contiene todos los nodos

5. parentNode.firstElementChild

firstElementChild devuelve el primer nodo del elemento secundario; si no se encuentra, devuelve nulo.

6. parentNode.lastElementChild

lastElementChild devuelve el último nodo del elemento secundario, o nulo si no se encuentra.
注意：这两个方法有兼容性问题，IE9 以上才支持

En el desarrollo real, firstChild y lastChild contienen otros nodos, lo cual es inconveniente de operar, y firstElementChild y lastElementChild tienen problemas de compatibilidad. nodo de elemento o ¿Qué pasa con el último nodo de elemento secundario?
Solución:

1. si desea el primer nodo de elemento secundario, puede usar parentNode.chilren[0]
2. Si desea el último nodo de elemento secundario, puede usar

parentNode.chilren[parentNode.chilren.length - 1]

Resumen

del modelo de objetos de documento (Documento El modelo de objetos (DOM para abreviar) es una interfaz de programación estándar recomendada por la organización W3C para procesar lenguaje de marcado extensible (HTML o XML).

W3C ha definido una serie de interfaces DOM a través de las cuales se puede cambiar el contenido, la estructura y el estilo de las páginas web.

Para JavaScript, para permitir que JavaScript opere HTML, JavaScript tiene su propio conjunto de interfaces de programación DOM.

Para HTML, DOM hace que HTML forme un árbol DOM.

El elemento DOM que contiene documentos, elementos y nodos es un objeto, por lo que se denomina modelo de objeto de documento

. En cuanto a las operaciones DOM, nos centramos principalmente en la operación de elementos. Incluye principalmente creación, adición, eliminación, modificación, consulta, operación de atributos y operación de eventos.