Comment démarrer rapidement avec VUE3.0 : Entrez dans l'apprentissage
Recommandations associées : Tutoriel JavaScript
1. Obtenezfaire fonctionner les éléments.
L'objet document fournit certaines méthodes pour rechercher des éléments. en fonction de leur identifiant, de leur nom et de leur classe. Obtenez l'élément d'opération via les attributs et les noms de balises.
Résumé :
sauf que la méthode document.getElementById() renvoie l'élément avec l'identifiant spécifié, les autres méthodes renvoient une collection qui répond aux exigences. Pour obtenir l'un des objets, vous pouvez l'obtenir par indice, qui commence à 0 par défaut.
L'objet document fournit certaines propriétés qui peuvent être utilisées pour obtenir des éléments dans le document. Par exemple, récupérez toutes les balises de formulaire, les balises d’image, etc.
Notez que
les éléments d'opération obtenus via les méthodes de l'objet document et les propriétés de l'objet document représentent le même objet. Par exemple, document.getElementsByTagName('body')[0] est conforme à document.body.
Les nouvelles méthodes d'objet de document de HTML5
Afin de faciliter l'obtention des éléments à utiliser, HTML5 ajoute deux nouvelles méthodes à l'objet document, à savoir querySelector() et querySelectorAll().
Étant donné que ces deux méthodes sont utilisées de la même manière, ce qui suit utilise la méthode document.querySelector() comme exemple.
Dans les opérations DOM, les objets élément fournissent également des méthodes pour obtenir des éléments spécifiés dans un élément. Les deux méthodes couramment utilisées sont getElementsByClassName() et getElementsByTagName(). Elles s'utilisent de la même manière que les méthodes du même nom dans l'objet document.
De plus, l'objet element fournit également l'attribut children pour obtenir les éléments enfants de l'élément spécifié. Par exemple, récupérez les éléments enfants de ul dans l'exemple ci-dessus.
Objet HTMLCollection
La différence entre les objets HTMLCollection et NodeList :
Astuce : Pour la collection renvoyée par la méthode getElementsByClassName(), la méthode getElementsByTagName() et l'attribut enfants, l'identifiant et le nom peuvent être automatiquement convertis en attribut.
2. Contenu de l'élément
En JavaScript, si vous souhaitez opérer sur le contenu de l'élément obtenu, vous pouvez utiliser les propriétés et méthodes fournies par le DOM.
Donnez un exemple
Implémentation du code
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<title>Opérations sur le contenu des éléments</title>
</tête>
<corps>
<pid="box">
Le premier paragraphe...
<p>
Le deuxième paragraphe...
<a href="http://www.example.com">troisième</a>
</p>
</p>
<script>
var box = document.getElementById('box');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</script>
</corps>
</html> Notez que
des problèmes de compatibilité du navigateur peuvent survenir lors de l'utilisation de l'attribut innerText. Par conséquent, il est recommandé
d'utiliser innerHTML pour obtenir ou définir autant que possible le contenu textuel des éléments pendant le développement. Dans le même temps, il existe certaines différences entre l'attribut innerHTML et la méthode document.write() dans la définition du contenu. Le premier agit sur l'élément spécifié, tandis que la seconde reconstruit l'intégralité de la page du document HTML. Par conséquent, les lecteurs doivent choisir la méthode de mise en œuvre appropriée en fonction des besoins réels pendant le développement
[Cas] Changer la taille de la boîte
Idées d'implémentation de code :
① Écrivez du HTML et définissez la taille de p.
② Complétez le changement de taille de la boîte en fonction du nombre de clics de l'utilisateur.
③ Lorsque le nombre de clics est un nombre impair, la boîte devient plus grande ; lorsque le nombre de clics est un nombre pair, la boîte devient plus petite.
Implémentation du code
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<style>
.box{largeur:50px;hauteur:50px;arrière-plan:#eee;marge:0 auto;}
</style>
</tête>
<corps>
<p id="box" class="box"></p>
<script>
var box = document.getElementById('box');
var i = 0; // Enregistre le nombre de fois que l'utilisateur clique sur la boîte box.onclick = function() { // Gère l'événement clic de la boîte ++i;
if (i % 2) { // Le nombre de clics est un nombre impair et devient plus grand this.style.width = '200px';
this.style.hauteur = '200px';
this.innerHTML = 'grand';
} else { // Le nombre de clics est un nombre pair et devient plus petit this.style.width = '50px';
this.style.hauteur = '50px';
this.innerHTML = 'petit';
}
} ;
</script>
</corps>
</html> 3. Attributs d'élément
Dans le DOM, afin de permettre à JavaScript d'obtenir, de modifier et de parcourir les attributs pertinents de l'élément HTML spécifié, des attributs et des méthodes d'opération sont fournis.
Vous pouvez utiliser l'attribut attributs pour obtenir tous les attributs d'un élément HTML, ainsi que le nombre de tous les attributs et la longueur.
Donnez un exemple
Implémentation du code
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<title>Opérations sur les attributs d'élément</title>
<style>
.gray{fond : #CCC;}
#épais{font-weight : plus gras ;}
</style>
</tête>
<corps>
<p>mot test.</p>
<script>
// Récupère l'élément p var ele = document.getElementsByTagName('p')[0];
// ① Afficher le nombre d'attributs de l'ele actuel console.log('Nombre d'attributs avant l'opération : ' + ele.attributes.length);
// ② Ajoutez des attributs à ele et vérifiez le nombre d'attributs ele.setAttribute('align', 'center');
ele.setAttribute('titre', 'Texte de test');
ele.setAttribute('classe', 'gris');
ele.setAttribute('id', 'épais');
ele.setAttribute('style', 'font-size:24px;border:1px solid green;');
console.log('Nombre d'attributs après ajout des attributs : ' + ele.attributes.length);
// ③ Obtenez la valeur de l'attribut de style d'ele console.log('Obtenez la valeur de l'attribut de style :' + ele.getAttribute('style'));
// ④ Supprimez l'attribut style de ele et vérifiez les attributs restants ele.removeAttribute('style');
console.log('Afficher toutes les propriétés :');
pour (var je = 0; je < ele.attributes.length; ++i) {
console.log(ele.attributes[i]);
}
</script>
</corps>
</html> 4.
Révision du style des éléments : modifiez le style via l'opération des attributs de l'élément.
Syntaxe du style d'élément : style.Nom de l'attribut.
Condition : vous devez supprimer le trait d'union "-" dans le nom du style CSS et mettre en majuscule la deuxième lettre initiale anglaise.
Exemple : Pour définir la couleur d'arrière-plan, background-color doit être remplacé par backgroundColor dans l'opération d'attribut de style.
Notez que
le style flottant en CSS est en conflit avec les mots réservés de JavaScript et que différents navigateurs ont des solutions différentes
. Par exemple, IE9-11, Chrome et FireFox peuvent utiliser « float » et « cssFloat », le navigateur Safari utilise « float » et IE6~8 utilise « styleFloat ».
Question : Un élément peut avoir plusieurs sélecteurs de classe. Comment faire fonctionner la liste de sélecteurs pendant le développement ?
La solution originale : utilisez l'attribut className de l'objet élément pour obtenir le résultat. Le résultat obtenu est un type de caractère, puis traitez la chaîne en fonction de la situation réelle.
La méthode fournie par HTML5 : la liste de sélection de classe du nouvel élément classList (lecture seule).
Par exemple : si la valeur de classe d'un élément p est "titre de la liste de navigation de l'en-tête de la boîte", comment supprimer l'en-tête ?
Solution HTML5 : p element object.classList.toggle("header
");
Implémentation du code
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<title>Utilisation de classList</title>
<style>
.bg{arrière-plan :#ccc;}
.strong{font-size:24px;couleur:rouge;}
.smooth{hauteur:30px;largeur:120px;border-radius:10px;}
</style>
</tête>
<corps>
<ul>
<li>PHP</li>
<li class="bg">JavaScript</li>
<li>C++</li>
<li>Java</li>
</ul>
<script> // Récupère le deuxième élément li var ele = document.getElementsByTagName('li')[1]; // S'il n'y a pas de classe forte dans l'élément li, ajoutez if (!ele.classList.contains('strong ' )) { ele.classList.add('strong'); } // S'il n'y a pas de classe smooth dans l'élément li, ajoutez-la s'il est supprimé, ele.classList.toggle('smooth'); log('Ajouter et changer de style Après : '); console.log(ele </script>);
<script>
ele.classList.remove('bg');
console.log('Après suppression :');
console.log(ele);
</script>
</corps>
</html> De plus, l'attribut classList fournit également de nombreuses autres méthodes et propriétés d'opération associées.
5. [Case] Effet de commutation de la barre d'onglets
Idées d'implémentation de code :
① Écrivez du HTML pour concevoir la structure et le style de la barre d'onglets, où la classe est égale à actuelle pour indiquer l'onglet actuellement affiché, et la valeur par défaut est le premier onglet.
② Obtenez toutes les balises et le contenu d'affichage correspondant aux balises.
③ Parcourez et ajoutez un événement de survol de la souris pour chaque étiquette. Dans la fonction de traitement d'événements, parcourez tout le contenu d'affichage correspondant à l'étiquette. Lorsque la souris glisse sur l'étiquette, ajoutez le courant via la méthode add() de classList, sinon utilisez. La méthode Remove() sort du courant.
Implémentation du code
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<title>Effet de changement de barre d'onglets</title>
<style>
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
.tab-head{hauteur:31px;}
.tab-head-p{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text- align:center;cursor:pointer;color:#fff;}
.tab-head .current{background:#fff;border-bottom:1px solid #fff;color:#000;}
.tab-head-r{border-right:0;}
.tab-body-p{display:aucun;marge:20px 10px;}
.tab-body .current{display:block;}
</style>
</tête>
<corps>
<p class="tab-box">
<p class="tab-head">
<p class="tab-head-p current">Onglet un</p>
<p class="tab-head-p">Onglet 2</p>
<p class="tab-head-p">Onglet trois</p>
<p class="tab-head-p tab-head-r">Onglet quatre</p>
</p>
<!--jkdjfk?-->
<p class="tab-body">
<p class="tab-body-p actuel"> 1 </p>
<p class="tab-body-p">2 </p>
<p class="tab-body-p"> 3 </p>
<p class="tab-body-p">4 </p>
</p>
</p>
<script>
// Récupère tous les objets éléments d'onglet de la barre d'onglets var tabs = document.getElementsByClassName('tab-head-p');
// Récupère tous les objets de contenu de la barre d'onglets var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // Parcourez l'objet élément tabs[i].onmouseover = function() { // Ajoutez un événement de survol à l'objet élément tag pour ( var i = 0; i < ps.length; ++i) { // Parcourez l'objet élément de contenu de la barre d'onglets if (tabs[i] == this) { // Affiche l'élément li ps[i] que la souris actuelle a glissé sur .classList.add('current');
tabs[i].classList.add('actuel');
} else { // Masquer les autres éléments li ps[i].classList.remove('current');
tabs[i].classList.remove('actuel');
}
}
} ;
}
</script>
</corps>
</html> Recommandations associées : tutoriel javascript
Ce qui précède est le contenu détaillé des opérations sur les éléments HTML expliquées en détail par des exemples JavaScript. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
