Cette fois je vous apporte un résumé de JS Dom et des événements Quelles sont les précautions Voici un cas pratique, jetons un coup d'oeil.
Quelle est la différence entre innerText et innerHTML de l'objet dom ?
innerHTML fait référence à l'intégralité du contenu depuis la position de départ jusqu'à la position de fin de l'objet, y compris la balise HTML .
innerText fait référence au contenu de la position de départ à la position de fin, mais il supprime la balise Html.
Quelle est la différence entre elem.children et elem.childNodes ?
Node (node) est le nom commun de tout type d'objet dans la hiérarchie DOM. Il existe de nombreux types de nœuds, tels que les nœuds d'éléments, les nœuds d'attributs, les nœuds de texte, les nœuds de commentaires, etc. Element hérite de la classe Node, ce qui signifie qu'Element est l'un des nombreux types de Node. Autrement dit, lorsque NodeType est 1, Node est ElementNode. De plus, Element étend Node et Element a des attributs tels que l'identifiant, la classe et les enfants. . children est un attribut d'Element et childNodes est un attribut de Node.
Combien de méthodes courantes existe-t-il pour interroger des éléments ?
Il existe trois manières courantes d'obtenir des éléments, à savoir via l'ID d'élément, via le nom de la balise et via le nom de la classe.
1.getElementById
DOM fournit une méthode appelée getElementById, qui renverra un objet nœud correspondant à l'attribut id.
2.getElementsByTagName
Cette méthode renvoie un tableau d'objets (HTMLCollection pour être précis, ce n'est pas un tableau au vrai sens du terme). Chaque objet correspond à une balise donnée dans le document. d'un élément. Semblable à getElementById, cette méthode ne fournit qu'un seul paramètre, et son paramètre est le nom de la balise spécifiée.
3.getElementsByClassName
En plus d'obtenir des éléments via des balises spécifiées, DOM fournit également la méthode getElementsByClassName pour obtenir des éléments avec des noms de classe spécifiés.
Comment créer un élément ? Comment définir les attributs des éléments ?
1.createElement(name) crée un nœud d'élément
createElement() est une méthode dans l'objet Document. Cette méthode renvoie un objet Element basé sur le nom de l'élément spécifié.
2. Définir les attributs du nœud d'élément créé
Après avoir créé l'élément, nous devrons peut-être définir les attributs de l'élément, tels que la définition des styles CSS pour l'élément, l'ajout d'événements de clic, etc. Pour définir les attributs d'un élément, vous pouvez utiliser la méthode setAttribute de l'objet Element ou vous pouvez utiliser le nom de l'attribut pour le définir.
3. Insérez le nœud de l'élément dans la position spécifiée du document DOM
Une fois l'élément créé, vous devez insérer le nœud de l'élément dans la position spécifiée du document DOM. Pour ajouter un élément, utilisez appendChild. () ou la méthode insertBefore() de l'objet Element. La méthode appendChild()
consiste à ajouter un nouveau nœud enfant à l'élément, et le nœud enfant ajouté sera son dernier nœud enfant. La méthode insertBefore() est utilisée pour insérer un nouveau nœud avant le nœud existant, et le nœud ajouté sera un nœud frère. Ajouter ou supprimer des éléments
? Ajout d'éléments
: utilisez createElement pour ajouter des éléments
Suppression d'éléments : Si vous devez supprimer un élément HTML, vous devez d'abord obtenir l'élément parent de l'élément, puis utiliser RemoveChild pour supprimer l'élément correspondant.
Quelle est la différence entre les méthodes d'écoute des événements DOM0 et DOM2 ?
Événement DOM0 : l'événement DOM0 fait référence à la liaison de l'événement directement au nœud. Un nœud ne peut lier qu'un seul événement, sinon le gris à l'arrière couvrira le devant.
var oBtn = document.querySelctor('#btn');
oBtn.onclick=function(){
console.log('a')
};
Événement DOM2 : DOM2 Les événements de niveau peuvent lier plusieurs événements à un élément, et les événements suivants n'écraseront pas les événements précédents ; vous pouvez utiliser les paramètres true et false pour définir l'événement à déclencher dans la phase de bouillonnement ou la phase de capture. Utilisez RemoveEventListener pour supprimer des événements.
oBtn.addEventListener("click",function(){
});
oBtn.removeEventListener("click",fn,false);
Quelle est la différence entre attachEvent et addEventListener?
1. Problèmes de compatibilité entre addEventListener et attachEvent
addEventListener est une méthode de liaison d'événements conforme aux spécifications du W3C, Chrome et Safari l'utilisent toutes pour lier des événements.
attachEvent est privé pour IE et n'est pas conforme aux spécifications du W3C. De plus, sous IE, il ne peut être utilisé que pour lier des événements, et addEventListener n'est pas valide.
Donc, si vous souhaitez lier des événements, vous devez gérer des problèmes de compatibilité.
2. Règles de grammaire pour addEventListener et attachEvent
addEventListener a 3 paramètres : element.addEventListener(type,listener,useCapture)
attachEvent a 2 paramètres : element.attachEvent(type,listener);
3 . Traitement de compatibilité du code
function regEvent(ele, event_name, fun)
{
if (window.attachEvent)
ele.attachEvent(event_name, fun) //Appareil de navigation IE. 🎜>
else
{
event_name = event_name.replace(/^on/, ""); //S'il commence par on, supprimez on, comme onclick->click
ele . addEventListener(event_name, fun, false); //Navigateurs non IE
}
>
Expliquer le bouillonnement des événements IE et le mécanisme de propagation des événements DOM2 ?
Bugbling d'événement IE : L'événement se produit sur l'élément déclencheur. À partir de l'élément déclencheur, l'événement est transmis niveau par niveau à l'élément parent jusqu'à l'élément html .
Événement DOM2 : la propagation de l'événement est divisée en 3 étapes, l'étape de capture, l'étape cible de l'événement et l'étape de bouillonnement. L'écouteur d'événement ne peut choisir de s'exécuter que dans l'une des phases de capture ou de bouillonnement.
Phase de capture : lorsqu'un événement se produit, il part du nœud racine et recherche niveau par niveau pour connaître l'élément cible.
Étape de bouillonnement : A partir de l'élément déclencheur, l'événement est transmis niveau par niveau à l'élément parent jusqu'à l'élément html
Comment empêcher l'événement de bouillonner ? Comment empêcher un événement par défaut ?
Empêcher le bouillonnement d'événements : la méthode du w3c est e.stopPropagation() et IE utilise e.cancelBubble = true.
Empêcher les événements par défaut : la méthode du w3c est e.preventDefault() et IE utilise e.returnValue = false.
Q&A
Il existe le code suivant, qui nécessite que la console affiche le contenu textuel de chaque élément li lorsque l'on clique sur l'élément li. Non considéré comme compatible avec le code
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>Copier après la connexion
:
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//方法一
/*var item = document.getElementsByClassName("ct")[0].getElementsByTagName('li')
for(var i=0;i<item.length;i++){
item[i].addEventListener('click', function(){
console.log(this.innerText);
})
} */
//方法二
var item = document.getElementsByTagName('li')
for(var i=0;i<item.length;i++){
item[i].addEventListener('click', function(){
console.log(this.innerText);
})
}
</script>Copier après la connexion
code de complétion, exigences :
1 Lorsque vous cliquez sur le bouton, ajoutez-le au début. de , le contenu est une chaîne non vide saisie par l'utilisateur ; lorsque vous cliquez sur la fin pour ajouter, ajoutez l'utilisateur après ;Classe Front-end 6 🎜>La chaîne d'entrée non vide.2. Lorsque vous cliquez sur chaque élément li, la console affiche le contenu textuel de l'élément.
<ul class="ct">
<li>这里是</li>
<li>555</li>
<li>666</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//todo ...
</script>
Copier après la connexion
Code :
<ul class="ct">
<li>这里是</li>
<li>666</li>
<li>555</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
Copier après la connexion
<script>var ct = document.querySelector('.ct')var start = document.getElementById('btn-add-start');var end = document.getElementById('btn-add-end');var input = document.querySelector(".ipt-add-content");
end.addEventListener('click',function(){ var list = document.createElement('li'); list.innerText = input.value ct.appendChild(list); }) start.addEventListener('click',function(){ var list = document.createElement('li'); list.innerText = input.value ct.insertBefore(list,ct.firstChild); }) ct.addEventListener('click', function(e){ if(e.target.tagName.toLowerCase() === 'li'){ console.log(e.target.innerText); } }); </script>Copier après la connexion
Compléter le code, exigence : lorsque la souris sera placée sur l'élément li, il sera affiché dans img-preview L'image correspondant au data-img de l'élément li actuel.
<ul class="ct">
<li data-img="1.png">鼠标放置查看图片1</li>
<li data-img="2.png">鼠标放置查看图片2</li>
<li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//todo ...
</script>Copier après la connexion
Code :
<ul class="ct"><li data-img="http://img5.imgtn.bdimg.com/it/u=3425851328,2681317699&fm=21&gp=0.jpg">鼠标放置查看图片1</li><li data-img="http://pic24.nipic.com/20121003/10754047_140022530392_2.jpg">鼠标放置查看图片2</li><li data-img="http://img2.3lian.com/img2007/4/22/303952037bk.jpg">鼠标放置查看图片3</li></ul><div class="img-preview"></div><script>var ct = document.querySelector('.ct')var list = document.getElementsByTagName('li')var preview = document.querySelector('.img-preview')for(var i=0;i<list.length;i++){list[i].addEventListener('mouseover',function(){if(document.querySelector('img')){preview.removeChild(document.querySelector('img'))console.log(1)}var item = document.createElement('img')var img = this.getAttribute('data-img')preview.appendChild(item)item.src=img;
}) } </script>Copier après la connexion
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !
Lecture connexe :
Comment utiliser Python pour déterminer la similarité des images
Script Javascript utilisé pour télécharger des images
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
