Maison > Article > interface Web > js tutoriel - code dom pour obtenir des éléments

js tutoriel - code dom pour obtenir des éléments

php是最好的语言original: 2018-08-09 13:20:331346parcourir

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 :

Js natif obtient des éléments dom dans iframe - les pages parents et enfants obtiennent le dom de chacun

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!

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

Article précédent：La différence entre les variables définies par const, var et let en JavaScriptArticle suivant：La différence entre les variables définies par const, var et let en JavaScript

Articles Liés

Voir plus