APl: interfaz de programación de aplicaciones, que tiene algunas funciones predefinidas, el propósito es lograr ciertas funciones y no es necesario conocer los detalles de su implementación interna.
En pocas palabras, si desea usar bien la API, solo necesita comprender qué hace la interfaz API y qué devuelve .

WebAPI es un conjunto de interfaces proporcionadas por el navegador para operar páginas web, lo que permite a los usuarios operar fácilmente los elementos de la página y algunas funciones del navegador.
API web = Modelo de objetos de documento DOM (cambiar el contenido, la estructura y el estilo de las páginas web) + Modelo de objetos del navegador BOM (interactuar con la ventana del navegador independientemente del contenido)

Aquí se presenta principalmente el modelo de objeto de documento DOM

dos, dom

inserte la descripción de la imagen aquí

Árbol DOM: visualice documentos HTML en una estructura de árbol, que se denomina árbol de documentos o árbol DOM. El árbol del documento refleja intuitivamente la relación entre las etiquetas.

objeto DOM

Objeto DOM: el objeto JS generado por el navegador de acuerdo con la etiqueta html, considera todos los contenidos en el árbol DOM como objetos.
Documento: Una página es un documento, que está representado por un documento en DOM
Elemento: Todas las etiquetas en la página son elementos, y el elemento se usa en DOM para representar
nodos: Todo el contenido de una página web es un nodo (etiqueta, atributo, texto , comentario, etc.), DOM usa el nodo para representar
características
1. Todas las propiedades de la etiqueta se pueden encontrar en este objeto
2. La modificación de las propiedades de este objeto se asignará automáticamente a la etiqueta

Tres, adquisición de elementos DOM

método de obtención	gramática	parámetro	devolver
obtener por identificación	documento.getElementByld()	nombre de identificación	objeto elemento
Obtener por nombre de etiqueta	documento.getElementsByTagName()	nombre de la etiqueta	Una colección de objetos de elementos, almacenados en forma de pseudoarreglo, si no existe, devuelve un pseudoarreglo con una longitud de 0
HTML5 nuevo método para obtener	①document.getElementsByClassName() ② document.querySelector() ③document.querySelectorAll()	① nombre de clase ② selector css ③ selector css	① Una colección de objetos de elementos, almacenados en forma de pseudoarreglo. ② El primer elemento que coincide con el selector CSS, un objeto HTMLElement. Si no se encuentra ninguna coincidencia, se devolverá un valor nulo. ③ Una colección de objetos NodeList que coinciden con el selector CSS, que es una pseudo-matriz

Obtener elementos especiales:
obtener objeto de cuerpo: document.body,
obtener elemento html: document.documentElement;

4. Elementos operativos

4.1 Modificar el contenido del elemento

document.write()
1. Solo el contenido del texto se puede agregar a la posición anterior (creación)
2. La etiqueta contenida en el texto será analizada por
el atributo innerText del elemento
1. Agregue o actualice el contenido del texto a la posición de cualquier etiqueta
2. El texto contiene Las etiquetas no se analizarán, y
el atributo innerHTML del
Agregue/actualice el contenido del texto a cualquier posición de etiqueta.
2. Las etiquetas contenidas en el se analizará el texto y se conservarán el espacio en blanco y la nueva línea.

Ejemplo de código:

<body>
   <P>段落一</P>
   <p id="pp">段落二</p>
<script>
    document.write('好好学习，天天向上');
    // 里面的标签会被解析
    document.write('<h2>学习令人兴奋</h2>');
    var one=document.querySelector('p')
    one.onclick=function(){
        one.innerText='<h1>段落 三</h1>'  
    }
    var two=document.getElementById('pp')
    two.onclick=function(){
        two.innerHTML='<h1>段落 三</h1>'
    }
</script>
</body>

Efecto :

4.2 Configuración/modificación de los atributos de los elementos

Caja pequeña: mostrar/ocultar entrada de contraseña

Efecto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
        .box {
            position: relative;
            width: 200px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img {
            position: absolute;
            top: 10px;
            right: 30px;
            width: 24px;
        }
    </style>
</head>
<div class="box">
    <label for=""><img src="图片地址" id="eye"> </label>
    <input type="password" name="" id="pwd">
</div>
<script>
    var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0;
        eye.onclick = function () {
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = '';
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.src = '';
                flag = 0;
            }
 
        }
</script>
</body>
</html>

Se puede acceder a los atributos de cada elemento de la etiqueta a través de "."

4.3 Configuración/modificación de atributos de estilo

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

método	ejemplo
a través del atributo de estilo	div.style.backgroundColor = 'rosa'; div.estilo.ancho = '250px';
Por nombre de clase className	.cambiar{ ancho:30px;alto:30px;} //Cambiar el nombre de clase del elemento actual para cambiar //nombreDeClase sobrescribirá el nombre de clase original this.className = 'cambiar'; //Mantener el nombre de clase original this.className = 'cambio anterior';
por classList	//Para resolver el problema de que className es fácil de sobrescribir el nombre de clase anterior, podemos agregar y eliminar nombres de clase a través de classList element.classList.add('nombre de clase') //añadir element.classList.remove('nombre de clase') //eliminar element.classList.toggle('nombre de clase') // cambiar

Caso pequeño: realice la función de solicitud de texto del cuadro de entrada

<input type="text" value="请输入账号" style="width: 200px; height:30px; outline: none; color: rgb(201, 189, 189);;">
<script>
    var inp = document.querySelector('input');
    inp.onfocus = function () {
        if (this.value == '请输入账号') {
            this.value = '';
            this.style.color = 'black'
        }
    }
    inp.onblur = function () {
        if (this.value == '') {
            this.value = '请输入账号'
            this.style.color = 'rgb(201, 189, 189)'
        }
    }
</script>

pensamiento exclusivo

Si hay un conjunto de estilos, y queremos que cierto elemento logre cierto estilo, necesitamos usar el algoritmo de pensamiento exclusivo del ciclo:

1. Todos los elementos limpian estilos (matan a otros)

2. Dale estilo al elemento actual (déjame en paz)

3. Tenga en cuenta que el orden no se puede revertir, matar a otras personas primero y luego dejarme

</head>
<button>11</button>
<button>22</button>
<button>33</button>
<script>
    //1.获取所有的元素
    var btns = document.getElementsByTagName('button');
    //btns得到的是伪数组，里面的每一个元素btn[i]
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            //1.我们先把所有按钮的背景颜色去掉，干掉其他人
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            //2.然后才让当前元素的颜为pink留下我自己
            this.style.backgroundColor = 'pink';
        }
    }
</script>
</body>
</html>

4.4 Atributos personalizados

Propósito: para guardar y guardar datos, algunos datos se pueden guardar en la página en lugar de en la base de datos.Algunos
atributos personalizados son fáciles de causar ambigüedad, y no es fácil juzgar si se trata de un atributo integrado o uno personalizado. , por lo que H5 ha estipulado atributos personalizados para data-comenzar

obtener valor de atributo

Obtener valores de atributos integrados (atributos que vienen con el propio elemento): Obtener atributos personalizados:element.属性;
element.getAttribute('属性');

establecer valor de atributo

Establecer valores de propiedad incorporados: establecer principalmente propiedades personalizadas:element.属性 = '值';
element.setAttribute('属性','值');

Cinco, nodo nodo

Todo el contenido de una página web es un nodo (etiqueta, atributo, texto, comentario, etc.) y el árbol DOM se puede utilizar para dividir los nodos en diferentes relaciones jerárquicas. Las comunes son padre, hijo, hermano y jerárquica. relaciones En el desarrollo real, las operaciones de nodo operan principalmente nodos de elementos, que son relativamente simples y lógicos, pero un poco menos compatibles.

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

5.1 Nodos padre e hijo:

// nodo padre

node.parentNode: Devuelve el nodo principal de un nodo, presta atención al nodo principal más cercano, si el nodo especificado no tiene un nodo principal, devuelve nulo

// nodo hijo

parentNode.children : es una propiedad de solo lectura que devuelve todos los nodos de elementos secundarios, y el resto de los nodos no devuelven (importante) (no estándar, pero ampliamente utilizado) parentNode.firstChild : devuelve
el primer nodo secundario, ya sea un nodo de texto o un nodo de elemento, devuelve nulo si no hay
parentNode.lastChild : devuelve el último nodo secundario, ya sea un nodo de texto o un nodo de elemento, devuelve nulo si no hay
parentNode.firstElementChild : es un propiedad de solo lectura, solo devuelve el primer nodo secundario, devuelve nulo si no hay, IE9 y superior solo admiten
parentNode.lastElementChild : es una propiedad de solo lectura que solo devuelve el último nodo secundario y devuelve nulo si no hay 1. IE9 y superiores solo admiten
//escritura en el desarrollo real, no hay problema de compatibilidad y
se puede devolver el elemento parentNode .children[0]
parentNode.children[parentNode.children.length-1]

Qué son las propiedades de solo lectura:

Por ejemplo: si <div> <img src='' ''> </div> en la página html

parentNode.firstElementChild devuelve <img src='' ''>

parentNode.firstChild devuelve , porque los nodos de texto y los nodos de comentarios también se cuentan como nodos secundarios

5.2 Nodos hermanos

nextSibling devuelve el siguiente nodo del elemento hermano del elemento actual, incluidos los nodos de elementos y los nodos de texto, y devuelve un valor nulo si no se encuentra.

anteriorSibling devuelve el nodo del elemento hermano anterior del elemento actual, incluidos los nodos de elementos y los nodos de texto, y devuelve nulo si no se puede encontrar

nextElementSibling devuelve el siguiente nodo de elemento hermano del elemento actual, o nulo si no se encuentra. Compatibilidad, IE 9+

previousElementSibling devuelve el nodo del elemento hermano anterior del elemento actual, o devuelve un valor nulo si no se encuentra. Compatibilidad, IE 9+

5.3 Crear, agregar, eliminar y copiar nodos

Para agregar un nuevo elemento a la página, primero debe crear el elemento y luego agregarlo

1. Cree un nodo
document.createElement('tagName')
Debido a que estos elementos no existían antes, se generan dinámicamente de acuerdo con los requisitos, por lo que también se denomina creación dinámica de nodos de elementos
2. Agregue un nodo
node.appendChild(child)    método para agregar un nodo a Especifica el final de la lista de nodos secundarios del nodo principal. Similar al pseudo-elemento after en CSS.
El método node.insertBefore(hijo, elemento especificado)    agrega un nodo al frente del nodo secundario especificado del nodo principal. Similar al pseudo-elemento before en CSS.

3. Eliminar nodo

El método node.removeChild(child)    elimina un nodo secundario del DOM y devuelve el nodo eliminado

4. Nodo duplicado

El método node.cloneNode() devuelve una copia del nodo en el que se llamó al método.

Si los paréntesis son falsos (predeterminado), es una copia superficial, es decir, solo se clona el nodo copiado y los nodos secundarios dentro no se clonan. Si el parámetro de paréntesis es verdadero, es una copia
profunda, que copiar el nodo en sí y todos sus nodos secundarios

La diferencia entre los tres elementos creados dinámicamente.

1.document.write()
   document.write('<div>123</div>')
   escribe directamente el contenido en el flujo de contenido de la página, pero el flujo del documento se ejecuta, por lo que hará que todas las páginas se vuelvan a dibujar , es decir, si se carga el flujo de documentos de la página, el original desaparecerá
2. element.innerHTML
   element.innerHTML = '<a> crear etiqueta</a>'
características:
(1) innerHTML es para escribir el contenido en un determinado nodo DOM, ** No hará que la página se vuelva a dibujar **
(2) innerHTML es más eficiente para crear múltiples elementos (pero no use la forma de cadenas de empalme, es eficiente usar empalme de matriz)
3.document Características de .createElement ()
: al crear una gran cantidad de elementos, es un poco menos eficiente, pero la estructura es más clara

6. Eventos

Los eventos son comportamientos que JavaScript puede detectar, como las operaciones del teclado y del mouse. Comprensión simple: mecanismo de activación-respuesta

6.1 Tres elementos del evento:

    事件源 ：事件被触发的对象 谁 按钮
    事件类型 如何触发，什么事件，比如鼠标点击，还是鼠标经过
    事件处理程序：通过一个函数赋值的方式完成

6.2 Pasos para ejecutar el evento

obtener la fuente del evento
Registrar evento (evento vinculante)
Agregue controladores de eventos (en forma de asignaciones de funciones)

6.3, evento de registro

1. Método de registro

Agregar eventos a los elementos se denomina registrar eventos o vincular eventos. Hay dos formas de registrar eventos: el método tradicional y el método de registro de monitoreo de eventos
El método tradicional
btn.onclick = function() { }
Características: la singularidad de los eventos registrados
El mismo elemento y el mismo evento solo pueden establecer una función de controlador , y la última función de controlador registrada anulará la función de controlador registrada anteriormente.

Método de registro de monitoreo de eventos -- -----método recomendado por w3c, el mismo elemento y el mismo evento pueden registrar múltiples oyentes, y se ejecutarán secuencialmente de acuerdo con el orden de registro.
1. eventTarget.addEventListener(tipo,oyente[,useCapture])

tipo: cadena de tipo de evento, como clic, mouseover, tenga cuidado de no traer aquí
oyente: función de procesamiento de eventos, cuando ocurre el evento, se llamará a la función de escucha
useCapture: parámetro opcional, es un valor booleano, el valor predeterminado es falso. Después de leer el flujo de eventos DOM, obtenga más información sobre

2. eventTarget.attachEvent(eventNameWithOn, devolución de llamada)

eventNameWithOn: cadena de clase de evento, onclick, onmouseover, aquí con on
devolución de llamada: función de procesamiento de eventos, la función de devolución de llamada se llama cuando el objetivo toca el evento.

2. Eliminar evento (desvincular evento)

El método tradicional
eventTarget.onclick =
método de escucha de eventos nulos

eventTarget.removeEventListener(tipo,oyente[,useCapture]);
eventTarget.detachEvent(eventNameWithOn, devolución de llamada); se usa junto con addedEvent

6.4, flujo de eventos DOM

El flujo de eventos describe el orden en que se reciben los eventos de la página. Cuando se produce un evento, se propagará entre los nodos de elementos en un orden específico. Este proceso de propagación es el flujo de eventos DOM: IE se propuso por primera vez y el evento es iniciado por el
más específico. El elemento se recibe y luego se propaga hasta el nodo superior del DOM paso a paso. Captura de eventos de abajo hacia arriba : Netscape primero propuso que comience desde el nodo superior del DOM y luego se propague hacia abajo hasta el proceso de recepción de elementos más específico. De arriba a abajo

Burbujeo de eventos:
1. Cuando se activa un evento de un elemento, el mismo evento (evento con el mismo nombre) se activará secuencialmente en todos los elementos ancestros del elemento. Este proceso se denomina burbujeo de eventos.
2. El burbujeo de eventos existe de manera predeterminada. Si desea limitar el evento al elemento actual, debe detener el flujo de eventos. Para detener el flujo de eventos, debe obtener el objeto de evento.

Aviso:

Solo se puede ejecutar una fase de captura o burbujeo en js

onclick y attachEvent solo pueden obtener la fase burbujeante

Si el tercer parámetro de addEventListener(type,listener[,useCapture]) es verdadero: significa que se llama al controlador de eventos durante la fase de captura de eventos; falso (no escrito/predeterminado): significa que se llama al controlador de eventos durante la fase de captura de eventos. fase burbujeante del evento

Evitar el burbujeo
e.stopPropagation();
e.cancelBubble = true;
Si el elemento secundario evita que el evento se burbujee, el elemento principal y el elemento principal no responderán, pero en este momento, si el elemento principal activa el evento, el elemento principal el elemento todavía tendrá reaccionar

6.5, objeto de evento

// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
eventTarget.onclick = function(event) {} 

 1. event 就是一个事件对象 事件绑定的回调函数的第一个参数就是 事件对象
 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;

Explicación oficial: el objeto de evento representa el estado del evento, como el estado de la tecla del teclado, la posición del mouse y el estado del botón del mouse. Comprensión simple: después de que ocurre el evento, una serie de eventos relacionados
con el evento se desencadena. La recopilación de información relevante se coloca en este evento de objeto de evento; tiene muchas propiedades y métodos

Propiedades y métodos comunes de los objetos de eventos

Método de propiedad de objeto de evento	ilustrar
e.objetivo	Devuelve los criterios del objeto que desencadenaron el evento.
e.tipo	Devuelve el tipo de evento, como hacer clic con el mouse sin activar
e.preventDefault()	Este método evita el estándar de comportamiento predeterminado, como no permitir que los enlaces salten
e.detener la propagación()	evitar el burbujeo de criterios
El uso de return false también puede evitar el comportamiento predeterminado.	El código después de la devolución no se ejecuta, solo se limita al método de registro tradicional y no hay problema de compatibilidad.

La diferencia entre e.target y este

e.target devuelve el objeto (elemento) que desencadena el evento this devuelve el objeto (elemento) que vincula el evento

<div>123</div>
<ul>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
</ul>
<script>
// 常见事件对象的属性和方法
// 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
// 区别：e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
    console.log(e.target);   //div
    console.log(this);  	 //div
    })
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
    // 我们给ul 绑定了事件  那么this 就指向ul  
    console.log(this);  //ul
    console.log(e.currentTarget);  //ul
    // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
    console.log(e.target);  //li
})
</script>

6.6 Delegación de eventos

Principio: el detector de eventos se establece en su nodo principal y luego usa el principio de burbujeo para afectar la configuración de cada nodo secundario

Función: Solo manipulamos el DOM una vez, lo que mejora el rendimiento del programa

6.5 En el caso: al registrar un evento de clic para ul, y luego hacer clic en el li dentro, el li actual se puede obtener usando event.target, y haciendo clic en li, el evento subirá a ul, y si ul tiene un registro evento, el monitoreo de eventos se activará dispositivo.

6.7, tipo de evento

evento del ratón	evento de enfoque	eventos de teclado	evento de texto
gatillo del ratón	el formulario obtiene el cursor	gatillo del teclado	activador de entrada de formulario

6.7.1 Eventos de ratón y sus objetos

evento del ratón	ilustrar
al hacer clic	Activado por clic izquierdo del ratón
onmouseover / onmouseout	mouseover/dejar disparador
onmouseenter/onmouseleave (sin burbujas/recomendado)	Mouseover/leave trigger (no burbujeante/recomendado)
onmovemove	Activado por el movimiento del ratón
onmouseup / onmousedown	Disparador arriba/abajo del ratón

La diferencia entre mouseover y mouseenter : cuando se activa en un determinado nodo, siempre que el mouse aún esté en el nodo, el evento mouseover se activará varias veces, mientras que el evento mouseenter solo se activará una vez

Aplicaciones:

Deshabilitar la selección del mouse	document.addEventListener('contextmenu',function(e{e.preventDefault();})
禁止鼠标右键	document.addEventListener('selectstart', function(e){e.preventDefault();})

6.7.2 键盘事件及其对象

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发，最常用，识别所有的键（包括功能键），不区分字母大小写
onkeydown	某个键盘按键被按下时触发，识别所有的键（包括功能键），不区分字母大小写
onkeypress	某个键盘按键被按下时触发，但是它不识别功能键，比如 ctrl shift 箭头退格等，区分字母大小写

三个事件的执行顺序是：keydown–keypress–keyup

键盘对象属性keyCode：返回该键值的ASCII值，我们可以利用keycode返回的ASCII码值来判断用户按下了那个键

七、DOM小结

关于DOM，主要针对的是页面的元素操作，主要有创建，增，删，改，查，属性操作，事件操作

创建	`1、document.write` `2、innerHTML` `3、createElement`
增	1、`appendChild 2、insertBefore`
删	1、`removeChild`
改	主要修改dom的元素属性，dom元素的内容、属性、表单的值等修改元素属性：src、href、title 等修改普通元素内容：innerHTML、innerText 修改表单元素：value、type、disabled 修改元素样式：style、className
查	Obtenga principalmente los métodos API proporcionados por el DOM para consultar elementos : getElementById, getElementsByTagName (uso antiguo, no recomendado) Nuevos métodos proporcionados por H5: querySelector, querySelectorAll (recomendado) usan operaciones de nodo para obtener elementos: padre (parentNode), hijo (hijos) ), Brother (anteriorElementSibling, nextElementSibling) defensores
manipulación de atributos	Principalmente para atributos personalizados setAttribute: establece el valor del atributo de dom getAttribute: obtiene el valor del atributo de dom removeAttribute: elimina el atributo
acción de evento	Registro de eventos, flujo de eventos, objeto de evento

Siguiente: BOM de JavaScript Advanced Web API Notas

DOM de JavaScript Advanced Web API Notas

1. ¿Qué es la API web?