js tutoriel - code dom pour obtenir des éléments-js tutoriel-php.cn

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

php是最好的语言

Libérer： 2018-08-09 13:20:33

original

1320 Les gens l'ont consulté

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>

Copier après la connexion

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!