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

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

May 21, 2018 am 10:28 AM
dom

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 <>

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>
Copier après la connexion

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quels sont les moyens d'obtenir des nœuds DOM dans Vue3 Quels sont les moyens d'obtenir des nœuds DOM dans Vue3 May 11, 2023 pm 04:55 PM

1. Native js obtient le nœud DOM : document.querySelector (sélecteur) document.getElementById (sélecteur d'identifiant) document.getElementsByClassName (sélecteur de classe).... 2. Récupère l'objet instance du composant actuel dans vue2 : car chaque vue Chaque L'instance de composant contient un objet $refs, qui stocke les références aux éléments ou composants DOM correspondants. Ainsi, par défaut, les $refs du composant pointent vers un objet vide. Vous pouvez d'abord ajouter ref="name" au composant, puis transmettre this.$refs.

Que signifie vue dom ? Que signifie vue dom ? Dec 20, 2022 pm 08:41 PM

DOM est un modèle objet de document et une interface pour la programmation HTML. Les éléments de la page sont manipulés via DOM. Le DOM est une représentation objet en mémoire d'un document HTML et fournit un moyen d'interagir avec des pages Web à l'aide de JavaScript. Le DOM est une hiérarchie (ou arbre) de nœuds avec le nœud document comme racine.

Quelle est la raison pour laquelle la liaison ref à dom ou composant échoue dans vue3 et comment la résoudre Quelle est la raison pour laquelle la liaison ref à dom ou composant échoue dans vue3 et comment la résoudre May 12, 2023 pm 01:28 PM

Description du scénario d'analyse de la raison de défaillance d'un composant ou du DOM de liaison Vue3ref Dans Vue3, il est souvent utilisé pour utiliser ref pour lier des composants ou des éléments DOM. Plusieurs fois, ref est clairement utilisé pour lier des composants associés, mais la liaison ref échoue souvent. Exemples de situations d'échec de liaison de référence La grande majorité des cas où la liaison de référence échoue est lorsque la référence est liée au composant, le composant n'a pas encore été rendu, donc la liaison échoue. Ou le composant n'est pas rendu au début et la référence n'est pas liée. Lorsque le composant commence à être rendu, la référence commence également à être liée, mais la liaison entre la référence et le composant n'est pas terminée. À ce stade, des problèmes surviendront. lors de l'utilisation de méthodes liées aux composants. Le composant lié à ref utilise v-if, ou son composant parent utilise v-if pour provoquer l'affichage de la page.

Guide de manipulation du DOM en PHP Guide de manipulation du DOM en PHP May 21, 2023 pm 04:01 PM

Dans le développement web, DOM (DocumentObjectModel) est un concept très important. Il permet aux développeurs de modifier et d'exploiter facilement le document HTML ou XML d'une page Web, comme ajouter, supprimer, modifier des éléments, etc. La bibliothèque d'opérations DOM intégrée à PHP fournit également aux développeurs des fonctions riches. Cet article présentera le guide d'opérations DOM en PHP, dans l'espoir d'aider tout le monde. Le concept de base de DOM DOM est une API multiplateforme indépendante du langage qui peut

Que sont les objets dom et bom ? Que sont les objets dom et bom ? Nov 13, 2023 am 10:52 AM

Il existe 5 objets DOM dont « document », « élément », « nœud », « événement » et « fenêtre » 2. « fenêtre », « navigateur », « emplacement » et « historique » et « écran » et 5 autres ; types d'objets de nomenclature.

Quelle est la différence entre bom et dom Quelle est la différence entre bom et dom Nov 13, 2023 pm 03:23 PM

BOM et DOM sont différents en termes de rôle et de fonction, de relation avec JavaScript, d'interdépendance, de compatibilité des différents navigateurs et de considérations de sécurité. Introduction détaillée : 1. Rôle et fonction. La fonction principale de BOM est de faire fonctionner la fenêtre du navigateur. Il fournit un accès et un contrôle directs à la fenêtre du navigateur, tandis que la fonction principale de DOM est de convertir le document Web en une arborescence d'objets. les développeurs doivent utiliser cette arborescence d'objets pour obtenir et modifier les éléments et le contenu de la page Web ; 2. Relation avec JavaScript, etc.

Quels sont les objets intégrés du DOM ? Quels sont les objets intégrés du DOM ? Dec 19, 2023 pm 03:45 PM

dom内置对象有:1、document;2、fenêtre;3、navigateur;4、emplacement;5、historique;6、écran;7、document.documentElement;8、document.body;9、document.head;10、document .title;11、document.cookie。

Exemples pour expliquer comment js implémente l'animation de défilement horizontal et vertical des éléments dom Exemples pour expliquer comment js implémente l'animation de défilement horizontal et vertical des éléments dom Aug 07, 2022 am 09:36 AM

​Cet article vous présentera comment implémenter une animation de défilement horizontal et vertical des éléments DOM dans js. J'espère que cela sera utile aux amis dans le besoin !

See all articles