1. Nodo de consulta

getElementByid()--Obtener elementos por id

getElementByTagName()--Obtener la lista de nodos por nombre de etiqueta

getElementsByName()--Obtener una lista por nombre

getElementsByClassName()--Obtener una lista por nombre de clase

querySelector()--Obtener nodos a través del selector css

querySelectorAll()--Obtener una lista de nodos a través de un selector css

2. Nodos transversales

1. bucle for

var ps=document.getElementsByTagName("p");
for(var i=0;i<ps.length;i++){
      console.log(ps[i])
}

2. Convertir a matriz Array.from() for.Each

var ps=document.querySelectorAll("div p");
ps.forEach(function(item){
     console.log(item)
})

3. Convertir a una matriz para de

var  ps = document.querySelectorAll("div p");
for(item of ps){
    console.log(item)
}

3. Cambiar el contenido de la capa

innerText--obtener/cambiar contenido de texto

innerText--obtener/cambiar contenido HTML

4. Obtener eventos de formulario

value obtener/cambiar el valor del formulario

marcadaModificar si la casilla de verificación está marcada

Cinco, modifica el estilo a través del estilo.

elem.style.width="400px" modificar el estilo

elem.style.fontSize="48px" Preste atención al uso de nombres de mayúsculas y minúsculas

elem.style.width obtiene el estilo en línea

6. Modifique el nombre y el estilo de la clase a través de classList

classList.toogle() cambia el nombre de la clase

classList.add() agregar nombre de clase

classList.remove() elimina el nombre de la clase

classList.contains() detecta si el nombre de la clase está incluido

Siete, relación de nodo

Padre e hijo

nodo padre parentElement

hijos todos los nodos hijos

firstElementChild primer nodo hijo

lastElementChild último nodo hijo

hermano

anteriorElementChild hermano anterior

siguienteElementoSibling próximo hermano

Ocho, operación de atributo

getAttribute obtener atributo

setAttribute establecer atributo

removeAttribute elimina atributos

9. Información del nodo

js Programación central DOM, cada elemento es un nodo Los nodos tienen diferentes tipos e información diferente.

1. nodeName nombre de nodo

Nodo de elemento: devuelve el ejemplo P en mayúsculas del nombre de la etiqueta del elemento

Nodo de texto: devuelve #texto

2. tipo de nodo nodeType

Nodos de elementos: 1

Nodos de texto: 3

3. El valor del nodo nodeValue

Nodo de elemento: ninguno

Nodo de texto: contenido de texto

10. Operación del nodo

crear nodo

documento.createElement()

Eliminar nodo

elem.remove()

elem.parentElment.removeChild()

Nodo duplicado, sin nodos secundarios

var elemento2=elemento.cloneNode(falso)

Nodo duplicado, con nodos secundarios

var elem3=elem.cloneNode(verdadero)

insertar nodo

parent.appendChild(elem) inserta elem al final del padre

padre, insertBefore (nuevo nodo, nodo relacionado) inserta el nuevo nodo delante del nodo relacionado

reemplazar nodo

padre, replaceChild (nodo nuevo, nodo reemplazado)

11. Operación de formulario

crear línea

fila=tabla.insertarFila(índice)

crear columnas

col=fila.insertarCelda(índice)

Establecer el contenido de la columna.

col.innerText="xxx"

seleccione la primera fila

tabla.primerElementChild.firstElementChild

12. seleccione el cuadro desplegable

crear una opción

var opción = nueva OPción (texto, valor)

insertar una opción

select.add (opción, antes)

13. Registro de eventos

DOM0 en etiquetas html

DOM1 logra la separación de js y html

btn.onclik=llámame;

btn.onclick = function(){}
(múltiples registros, solo se ejecutará el último)

DOM2 puede agregar múltiples o eliminar
btn.addEventListener("clic",llámame)
btn.addEventListener("clic",función(){})

Eliminar todo haga clic en
btn.removeEventLisenter("clic")
elimine uno
btn.removeEventListenter("clic",llámame)

14. Obtén el css del elemento

Estilo en línea
elem.style.style nombre
obtener/establecer estilo en línea

Estilo calculado
document.defaultView.getComputedStyle(elem,null).style name
Obtiene el valor del estilo calculado, el nombre del estilo está escrito en mayúsculas y minúsculas FontSize

15. Ancho y alto de elementos

clientWidth: contenido + relleno (-ancho de la barra de herramientas)

offsetWidth: contenido + relleno + borde

ancho de desplazamiento

No hay barra de desplazamiento, lo mismo que
contenido de clientWidth + barra de herramientas de relleno + distancia de desplazamiento

clientHeight;offsetHeight;scrollHeight

Dieciséis, la distancia entre el elemento y el elemento principal

offsetLeft y el valor de desplazamiento izquierdo relativo al elemento principal
offsetTop y el valor de desplazamiento vertical relativo al elemento principal

offsetParent Relativo al elemento principal
El elemento principal del elemento tiene un valor de posición no estático

Diecisiete, la distancia de desplazamiento del elemento

elemento.scrollTop
elemento.scrollLeft

Distancia de desplazamiento del navegador
document.documentElement.scrollTop
document.body.scrollTop

18. Edición de elementos y ventanas visuales

elem.getBoundingClientRect()
Límite delimitador
Cliente cliente
Rectangle

evento

1. Encuadernación

btn.onclick = función(){}

btn.addEventListener(tipo,nombreDivertido)

2. Desvincular

btn.onclick = null

btn.removeEventListener(tipo,nombreDivertido)

Las funciones anónimas no se pueden desvincular

3. Objeto de evento

event.target
objeto de origen del evento

event.offsetX
event.offsetY
texto desplazado relativo al origen del evento

event.pageX
evnet.pageY
desplazamiento relativo a la página

5. Entrega de eventos

Burbujeo: El elemento más específico captura primero el evento y lo pasa al elemento menos específico (documento)

Capturar: el elemento menos específico captura primero el evento y lo pasa al elemento más específico

El valor predeterminado es burbujeante, use capture
elem.addEventlistener (tipo de evento, función de respuesta, si es capture)
elem.addEventListener("click", doit, true)

Evitar la entrega de eventos
event.stopPropagation()

Prevenir el evento predeterminado
event.preventDefault()

6. Eventos de teclado

presione la tecla presione para aparecer

tocar el teclado

pulsación de teclado

event.keyCode La tecla corresponde al código numérico
event.key El nombre del teclado
event.que es igual a keyCode

7. Eventos de ratón

mouseover mouse move in
mouseout mouse out
mousedown mouse down
mouseup mouseup
mousemove movimiento del mouse
clic clic
doble clic doble clic

8. Formar eventos

cambiar el valor cambia
la entrada se está ingresando la entrada

enfocar enfocarse desenfocar
perder el foco

9. Eventos de página

cargar cargar
cambiar el tamaño de la ventana cambiar
desplazarse desplazarse

Resumen de los puntos de conocimiento de DOM