js tutoriel - code dom pour obtenir des éléments
Obtenir des éléments :
document.getElementsByClassName ('class') Récupérer des éléments par nom de classe, dans un tableau de classes La forme existe. getElementsByTagName
document.querySelector('selector') Récupère l'élément via le sélecteur CSS, le ème 1 qui répond aux conditions de correspondance élément.
document.querySelectorAll('selector') Obtient des éléments via des sélecteurs CSS, sous une forme semblable à un tableau.
Opération de nom de classe :
Node.classList. add('class') Ajouter une classe
Node.classList.remove('class') Supprimer une classe
Node.classList.toggle ( 'class') Changez de classe, supprimez-la si elle existe, ajoutez-la si ce n'est pas le cas
Node.classList.contains('class') Vérifiez si la classe existe
Attributs personnalisés :
En HTML5 nous pouvons personnaliser les attributs, le format est comme suit data-* ="", par exemple : data-info="Je suis un attribut personnalisé", via Node.dataset['info'], nous pouvons obtenir la valeur de l'attribut personnalisé.
Lorsque nous définissons le format comme suit, il doit être au format camel case pour l'obtenir correctement : data-my-name="itcast", get Node.dataset['myName']
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
.green{
color: green;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<ul>
<li>请选择</li>
<li class="red">前端</li>
<li class="green">java</li>
<li class="blue">javascript</li>
<li id="c">c++</li>
</ul>
<script>
/*获取第一个li标签*/
window.onload=function(){
/*ElementsByTagName获取的是数组*/
/*索引：不直观 以后的数据都是从后台动态获取，前台动态生成添加*/
/*var cli=document.getElementsByTagName("li")[1];
console.log(cli);*/
/*query:查询 Selector：选择器 querySelector(传入选择器名称)*/
/*querySelector:获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素*/
/*参数要求：如果是类选择器，必须添加. 如果是id选择器， 必须添加# ,否则当成标签处理*/
var javaLi=document.querySelector(".green");
//var javaLi=document.querySelector("#c");
console.log(javaLi);
/*querySelectorAll获取满足条件的所有元素--数组*/
var allLi=document.querySelectorAll("li")[0];
console.log(allLi);
}
</script>
</body>
</html>
Recommandations associées :
Comment obtenir des éléments DOM en js
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1207
24
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 ?
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
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
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 ?
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
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 ?
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
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 !
