Maison  >  Article  >  interface Web  >  Quelle est la différence entre innerText et innerHTML des objets dom ?

Quelle est la différence entre innerText et innerHTML des objets dom ?

jacklove
jackloveoriginal
2018-05-21 10:28:402454parcourir

Cet article expliquera les différences pertinentes entre innerText et innerHTML des objets dom.

innerText affichera toutes les sorties sous forme de texte sur la page, et inderHTML renverra la structure HTML de l'élément et créera automatiquement un DOM basé sur le contenu.

Quelle est la différence entre elem.children et elem.childNodes ?

elem.children doit obtenir des objets de nœud DOM autres que les nœuds de texte.
elem.childNodes doit obtenir tous les nœuds DOM, y compris les nœuds vides et de texte.

Combien de méthodes courantes existe-t-il pour interroger des éléments ?

getElementsById() : recherche l'élément avec l'attribut ID spécifié

getElementsByClassName() : recherche l'élément avec l'attribut de classe spécifié

getElementsByTagName() : recherche l'élément avec la balise spécifiée

getElementsByName() : Rechercher les éléments avec l'attribut name

querySeletor() : Équivalent au sélecteur CSS, trouver le premier nœud avec l'étiquette correspondante

querySeletorAll() : Equivalent au sélecteur css, trouver tous les nœuds avec la balise correspondante

Comment créer un élément ? Comment définir les attributs des éléments ?

createElement() crée un élément HTML, le paramètre est tagname, sans crochets a8093152e673feb7aba1828c43532094

createTextNode() crée un nœud de texte et le paramètre est le contenu du texte.

setAttribute() est utilisé pour définir les attributs des éléments. Ajouter ou supprimer des éléments

 ?

appendChild() : Ajouter un élément à la fin d'un élément

insertBefore() : Ajouter un élément avant un élément

removeChild() : Supprimer un élément

Quelle est la différence entre les méthodes d'écoute des événements DOM0 et DOM2 ?

L'événement DOM niveau 0 consiste à lier une affectation de fonction à un gestionnaire d'événements et ne peut gérer qu'un seul événement à la fois.

Le niveau DOM2 définit deux méthodes pour gérer les opérations de spécification et de suppression des gestionnaires d'événements, et peut ajouter plusieurs gestionnaires d'événements pour les événements.

Quelle est la différence entre attachEvent et addEventListener ?

Le nombre de paramètres est différent. addEventListener a trois paramètres et attchEvent n'en a que deux. Le gestionnaire de temps ajouté par attachEvent ne peut se produire que dans la phase de bouillonnement. est capturé. Traitement de l'étape ou de l'étape bouillonnante

Le premier paramètre a des significations différentes. Le premier paramètre de addEventListener est le type d'événement (tel que clic, chargement), tandis que le premier paramètre de addachEvent spécifie le nom de l'événement. fonction de traitement (onclick , onload)

La portée du gestionnaire d'événements est différente. La portée de addEventListener est l'élément lui-même, cela fait référence à l'élément déclencheur, et le gestionnaire d'événements attachEvent s'exécutera dans la variable globale, c'est window

Lors de l'ajout de plusieurs gestionnaires d'événements à un événement, l'ordre d'exécution est différent. addEventListener sera ajouté dans l'ordre d'ajout, tandis que addachEvent ajoutera plusieurs gestionnaires d'événements dans un ordre irrégulier (quand il y en a peu). méthodes ajoutées, la plupart d'entre elles seront dans l'ordre d'addition). (Exécutées dans l'ordre inverse, mais si vous en ajoutez trop, cela deviendra irrégulier), donc lorsque vous en ajoutez plusieurs, si vous vous fiez à l'ordre d'exécution de fonctions, vous devez le gérer vous-même et vous ne pouvez pas compter sur le navigateur.

Expliquez le bouillonnement des événements IE et le mécanisme de propagation des événements DOM2 ?

Le bouillonnement d'événements IE signifie que les événements commenceront à partir de l'élément le plus interne et se propageront couche par couche jusqu'au nœud racine HTML.

Mécanisme de propagation des événements DOM2 :

Phase de capture d'événements : Les événements recherchent le nœud cible de l'événement couche par couche depuis le nœud racine vers le bas.

Étape cible : atteindre le nœud cible et exécuter l'événement cible.

Étape de bouillonnement d'événements : les événements sont retracés du nœud cible au nœud racine couche par couche.

Comment empêcher les événements de bouillonner ? Comment empêcher un événement par défaut ?

Utilisez la fonction stopPropagation() pour arrêter le bouillonnement d'événements.

Utilisez la fonction PreventDefault() pour annuler le comportement par défaut de l'événement.

Question de code

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. La compatibilité n'est pas prise en compte

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li></ul>
  <script>var ct = document.querySelector(&#39;.ct&#39;),
    li= ct.querySelectorAll(&#39;li&#39;);for(var i= 0; i< li.length; i++){
    li[i].onclick = function(){        console.log(this.innerText);
    }
}</script>

Cet article explique les différences pertinentes entre innerText et innerHTML des objets dom Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations associées :

Quelques questions de base sur JS

Comment modulariser require avec js front-end .js

Un exemple de bouton implémenté avec une image en utilisant CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn