집 > 기사 > 웹 프론트엔드 > Node.js 튜토리얼--요소를 가져오는 DOM 코드

Node.js 튜토리얼--요소를 가져오는 DOM 코드

php是最好的语言원래의: 2018-08-09 13:20:331332검색

요소 가져오기:

document.getElementsByClassName ('class') 클래스 배열 형식으로 클래스 이름별로 요소를 가져옵니다. getElementsByTagName
document.querySelector('selector') CSS 선택기를 통해 일치 조건을 충족하는 번째 1 요소를 가져옵니다.
document.querySelectorAll('selector') CSS 선택기를 통해 배열과 같은 형식으로 요소를 가져옵니다.

클래스 이름 연산:

Node.classList.add('class') 클래스 추가
Node.classList.remove('class') 클래스 제거
Node.classList.toggle('class')는 클래스를 전환하고, 존재하면 제거하고, 존재하지 않으면 추가합니다.
Node.classList.contains('class')는 클래스가 존재하는지 감지합니다.

self 속성 정의:

HTML5에서는 data-*="" 형식으로 속성을 사용자 정의할 수 있습니다. 예: data-info="나는 사용자 정의 속성입니다", Node.dataset[ 'info'] 우리는 사용자 정의 속성 값을 얻을 수 있습니다.

다음과 같이 형식을 설정할 때 올바르게 가져오려면 카멜 케이스 형식을 사용해야 합니다: 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>

Node.js 튜토리얼--요소를 가져오는 DOM 코드

관련 기사