1. Temas y puntos de investigación
Dirección de asunto: https://github.com/zhangxinxu/quiz/issues/9
El contenido del tema es el siguiente (haga clic para ver la imagen más grande):
Esta pregunta examina principalmente cómo juzgar la posición frontal y posterior del documento del nodo DOM, la relación padre-hijo, etc. Miré la respuesta final y casi el 90% de las respuestas utilizaron un método muy largo y la proporción fue inesperadamente alta. De hecho, esta pregunta tiene un método muy simple que se puede implementar en unas pocas líneas. Siempre que conozca las siguientes dos API nativas DOM útiles, una es un contains()método para determinar si un elemento o nodo DOM tiene una relación de contención; el otro es un compareDocumentPosition()método, DOM más poderoso o juicio de relación de posición de nodo, ya sea al frente y al dorso, adentro y afuera, o entre documentos.
La transmisión en vivo de preguntas y respuestas de la estación B comienza a las 10:34 de la mañana y dura aproximadamente 30 minutos. Se graba y transmite. Puede hacer clic directamente en el video a continuación para verlo.
Dos, el juicio de la relación de contención DOM contiene ()
contains()El método es una API muy antigua, que se utiliza para determinar la relación de contención entre dos nodos DOM, la sintaxis es la siguiente:
node.contains (otherNode)
Devuelve un valor booleano, que indica nodesi contiene otherNodeo es él nodemismo.
P.ej:
document.documentElement.contains (document.body); // El valor de retorno es verdadero document.body.contains (document.body); // El valor de retorno es verdadero document.body.contains (document.documentElement); // El el valor de retorno es falso
Esta API tiene buena compatibilidad y es compatible con IE5. Es muy conveniente de usar. No necesitamos atravesar elementos ancestros para juzgar la relación de anidamiento entre dos nodos.
otro
Si los dos elementos de nodo evaluados se encuentran en el documento iframe, se considerarán sí false. Por ejemplo, usamos directamente Blob para crear dinámicamente un iframe de enlace no externo , el código es el siguiente:
var htmlIframe = '<img id = "img" src = "https: //.../mm.jpg" οnclick = "console.log (window.parent.document.body.contains (this))">';
var iframe = document.createElement ('iframe');
var blob = new Blob ([htmlIframe], {'tipo': 'texto / html'});
iframe.src = URL.createObjectURL (blob);
iframeBlob1.appendChild (iframe);
El efecto en tiempo real es el siguiente, haga clic en la imagen de la niña para ver el resultado de salida.
La salida de la consola es la siguiente:
Si desea conocer el interior y el exterior de la relación de contención iframe, es necesario utilizar API adicional: compareDocumentPosition().
Tres, juzgue comparar Documento Posición en cualquier posición
En esta pregunta, la comparación de las posiciones frontal y posterior de los elementos DOM de la imagen no necesita escribir un bucle para el recorrido. Existe una API lista para usar que puede lograr el efecto que queremos, es decir, la Node.compareDocumentPosition API.
Esta API es bastante detallada, y escribí un artículo para presentar esta API, consulte aquí: " API Node.compareDocumentPosition en profundidad ".
P.ej:
var compareValue = img.compareDocumentPosition (compareImg);
if (compareValue == 2) {
// compareImg before
} else if (compareValue == 4) {
// compareImg after
} else if (compareValue == 0) {
// ¿Es el elemento compareImg en sí mismo
} else {
// otras relaciones posicionales
}
Si lo compareValuees 2, significa compareImgen imgel frente; si lo es 4, significa compareImgen imgla parte posterior.
A partir de esto, podemos determinar fácilmente la relación de posición del documento entre la imagen en la que se hace clic y la imagen de comparación, una cuestión de unas pocas líneas de código.
Sin embargo, debe tenerse en cuenta que si está juzgando la relación posicional de otros elementos que no son de reemplazo, no puede usar la comparación numérica, porque compareDocumentPosition()el valor después de que se puede ejecutar el método es un valor mixto, por ejemplo:
// El valor de retorno es 10, 8 + 2 document.body.compareDocumentPosition (document.documentElement); // El valor de retorno es 20, 16 + 4 document.documentElement.compareDocumentPosition (document.body)
Necesitamos usar &el resultado de la operación del bit AND para una sola coincidencia y el valor objetivo correspondiente para determinar, por ejemplo:
if (document.body.compareDocumentPosition (document.documentElement) & 2) {
// document.documentElement 在 document.body 前面
// ...
}
Si no lo entiende bien, puede visitar el artículo que acabo de escribir que presenta en profundidad compareDocumentPosition .
Cuarto, cómo determinar que el elemento de clic es una imagen
P.ej:
container.onclick = function (event) {
// event.target ...
}
El método más comúnmente utilizado en la industria es usar el valor tagName para juzgar, de la siguiente manera:
event.target.tagName == 'IMG' // verdadero 或 falso
Todos los navegadores devuelven el nombre de la etiqueta en mayúsculas. Por supuesto, si no está preocupado (cambiará en el futuro o encontrará el navegador SB), puede compararlo de manera más estricta:
/^img$/i.test(event.target.tagName) // verdadero o falso
event.target.tagName.toLowerCase () == 'img' // verdadero 或 falso
También podemos usar nodeName para juzgar, por ejemplo:
event.target.nodeName == 'IMG' // verdadero 或 falso
Finalmente, se introduce un método de juicio de tipo de objeto, como sigue:
event.target instanceof Image // verdadero 或 falso
también está bien.
V. Resumen de puntos clave
Node.contains()Método de uso recomendado de relación de inclusión ;- Para determinar si el elemento actual es una IMG, puede:
event.target.tagName / nodeName == 'IMG'
/^img$/i.test(event.target.tagName)
event.target.tagName.toLowerCase () == 'img'
event.target instancia de imagen
- Juzga la relación entre los nodos frontal y posterior
Node.compareDocumentPosition().
Acerca de las preguntas y respuestas en vivo
Todos los miércoles se publicará una pequeña prueba en los números de este proyecto , seguida de CSS, JS y DOM.
Aquellos que estén interesados en participar pueden prestar más atención.
Arriba ~