suchen

Heim >Web-Frontend >js-Tutorial >js-Tutorial – Dom-Code zum Abrufen von Elementen

js-Tutorial – Dom-Code zum Abrufen von Elementen

php是最好的语言
php是最好的语言Original
2018-08-09 13:20:331354Durchsuche

  1. Elemente abrufen:

    1. document.getElementsByClassName ('class') Elemente nach Klassennamen im Klassenarray abrufen Formular existiert. getElementsByTagName

    2. document.querySelector('selector') Ruft das Element über den CSS-Selektor ab, das te 1, das dem entspricht passende Bedingungen Element.

    3. document.querySelectorAll('selector') Ruft Elemente über CSS-Selektoren in einer Array-ähnlichen Form ab.

  2. Klassennamenoperation:

    1. Node.classList. add('class') Klasse hinzufügen

    2. Node.classList.remove('class') Klasse entfernen

    3. Node.classList.toggle ( 'class') Wechseln Sie die Klasse, entfernen Sie sie, wenn sie vorhanden ist, fügen Sie sie hinzu, wenn sie nicht vorhanden ist

    4. Node.classList.contains('class') Überprüfen Sie, ob die Klasse vorhanden ist

  3. Benutzerdefinierte Attribute:

In HTML5 können wir Attribute anpassen, das Format ist wie folgt data-* =“, zum Beispiel: data-info = „Ich bin ein benutzerdefiniertes Attribut“, über Node.dataset ['info'] können wir den benutzerdefinierten Attributwert abrufen.

Wenn wir das Format wie folgt festlegen, muss es im Camel-Case-Format vorliegen, um es korrekt zu erhalten: 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>

Verwandte Empfehlungen:

Native js erhält das Dom-Element im Iframe – die übergeordneten und untergeordneten Seiten erhalten gegenseitig den Dom

So erhalten Sie das DOM-Element mit js

Das obige ist der detaillierte Inhalt vonjs-Tutorial – Dom-Code zum Abrufen von Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Der Unterschied zwischen den durch const, var und let in JavaScript definierten VariablenNächster Artikel：Der Unterschied zwischen den durch const, var und let in JavaScript definierten Variablen

In Verbindung stehende Artikel

Mehr sehen