1. Thèmes et points d'enquête
Adresse du sujet: https://github.com/zhangxinxu/quiz/issues/9
Le contenu du sujet est le suivant (cliquez pour agrandir l'image):
Cette question examine principalement comment juger de la position avant et arrière du document du nœud DOM, la relation parent-enfant, etc. J'ai regardé la réponse finale, et près de 90% des réponses utilisaient une méthode très longue, et le ratio était étonnamment élevé. En fait, cette question a une méthode très simple qui peut être implémentée en quelques lignes. Tant que vous connaissez les deux API natives DOM utiles suivantes, l'une est une contains()méthode pour déterminer si un élément ou un nœud DOM a une relation de confinement; le autre est une compareDocumentPosition()méthode, un DOM plus puissant ou un jugement de relation de position de nœud, que ce soit avant et arrière, à l'intérieur et à l'extérieur, ou entre les documents.
L'émission en direct de questions-réponses de la station B commence à 10 h 34 du matin et dure environ 30 minutes. Elle est enregistrée et diffusée. Vous pouvez directement cliquer sur la vidéo ci-dessous pour la regarder.
Deuxièmement, le jugement de la relation de confinement DOM contient ()
contains()Method est une très ancienne API, utilisée pour déterminer la relation de confinement entre deux nœuds DOM, la syntaxe est la suivante:
node.contains (otherNode)
Renvoie une valeur booléenne, indiquant nodesi elle contient otherNodeou est nodeelle - même.
Par exemple:
document.documentElement.contains (document.body); // La valeur de retour est true document.body.contains (document.body); // La valeur de retour est true document.body.contains (document.documentElement); // Le la valeur de retour est false
Cette API a une bonne compatibilité et est prise en charge par IE5. Elle est très pratique à utiliser. Nous n'avons pas besoin de traverser les éléments ancêtres pour juger de la relation d'imbrication entre deux nœuds.
autre
Si les deux éléments de nœud jugés se trouvent dans le document iframe, ils seront considérés comme oui false. Par exemple, nous utilisons directement Blob pour créer dynamiquement une iframe de lien non externe , le code est le suivant:
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], {'type': 'text / html'});
iframe.src = URL.createObjectURL (blob);
iframeBlob1.appendChild (iframe);
L'effet en temps réel est le suivant, cliquez sur l'image de la fille pour voir le résultat de sortie?
La sortie de la console est la suivante:
Si vous voulez savoir à l'intérieur et à l' extérieur de la relation de confinement iframe, vous devez utiliser l' API supplémentaire: compareDocumentPosition().
Troisièmement, juger comparerDocumentPosition à n'importe quelle position
Dans cette question, la comparaison des positions avant et arrière des éléments DOM de l'image n'a pas besoin d'écrire une boucle pour la traversée.Il existe une API prête à l'emploi qui peut obtenir l'effet souhaité, c'est-à-dire l' Node.compareDocumentPosition API.
Cette API est assez approfondie, et j'ai écrit un article pour présenter cette API, voir ici: " API Node.compareDocumentPosition approfondie ".
Par exemple:
var compareValue = img.compareDocumentPosition (compareImg);
if (compareValue == 2) {
// compareImg before
} else if (compareValue == 4) {
// compareImg after
} else if (compareValue == 0) {
// Est le Élément compareImg lui-même
} else {
// autres relations de position
}
Si compareValuec'est 2, cela signifie compareImgà imgl'avant, si elle est 4, cela signifie compareImgà imgl'arrière.
À partir de là, nous pouvons facilement déterminer la relation de position du document entre l'image cliquée et l'image de comparaison, en quelques lignes de code seulement.
Cependant, il convient de noter que si vous jugez la relation de position d'autres éléments non de remplacement, vous ne pouvez pas utiliser de comparaison numérique, car compareDocumentPosition()la valeur après l'exécution de la méthode est une valeur mixte, par exemple:
// La valeur de retour est 10, 8 + 2 document.body.compareDocumentPosition (document.documentElement); // La valeur de retour est 20, 16 + 4 document.documentElement.compareDocumentPosition (document.body)
Nous devons utiliser &le résultat de l'opération de bit ET pour une seule coïncidence et la valeur cible correspondante pour déterminer, par exemple:
if (document.body.compareDocumentPosition (document.documentElement) & 2) {
// document.documentElement 在 document.body 前面
// ...
}
Si vous ne comprenez pas bien, vous pouvez consulter l'article que je viens d'écrire et qui présente compareDocumentPosition en profondeur .
Quatrièmement, comment déterminer que l'élément de clic est une image
Par exemple:
container.onclick = function (événement) {
// event.target ...
}
La méthode la plus couramment utilisée dans l'industrie consiste à utiliser la valeur tagName pour le jugement, comme suit:
event.target.tagName == 'IMG' // vrai 或 faux
Tous les navigateurs renvoient le nom de la balise en majuscules. Bien sûr, si vous n'êtes pas inquiet (cela changera à l'avenir, ou rencontrera le navigateur SB), vous pouvez le comparer plus strictement:
/^img$/i.test(event.target.tagName) // vrai ou faux
event.target.tagName.toLowerCase () == 'img' // vrai 或 faux
Nous pouvons également utiliser nodeName pour juger, par exemple:
event.target.nodeName == 'IMG' // vrai 或 faux
Enfin, une méthode de jugement de type d'objet est introduite, comme suit:
event.target instanceof Image // vrai 或 faux
c'est bien aussi.
V. Résumé des principaux points
Node.contains()Méthode d' utilisation recommandée de la relation d'inclusion ;- Pour déterminer si l'élément actuel est un IMG, vous pouvez:
event.target.tagName / nodeName == 'IMG'
/^img$/i.test(event.target.tagName)
event.target.tagName.toLowerCase () == 'img'
event.target instanceof Image
- Jugez de la relation entre les nœuds avant et arrière
Node.compareDocumentPosition().
À propos des questions-réponses en direct
Chaque mercredi , un petit test sera publié dans les numéros de ce projet , suivi de CSS, JS et DOM.
Ceux qui souhaitent participer peuvent y prêter plus d'attention.
Ci-dessus ~