JavaScript DOM 작업을 통해 요소에 액세스

5473 단어 domJavaScript

class 속성, 선택기를 통해 요소에 접근


class="weather"
index.html
    <!DOCTYPE html>
    <html lang="ja">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <h1>JavaScript Practice</h1>
        <dl>
            <dt>今日の天気</dt>
            <dd class="weather">晴れ</dd>
        </dl>
        <script src="index.js"></script>
    </body>

    </html>

1,class 속성이나 선택기를 통해 요소 얻기


document.querySelector("클래스 이름");
index.js
    // querySelectorでweatherのクラスがついている要素を取得
    let element1 = document.querySelector(".weather");
    console.log(element1);

    // querySelectorでdlセレクタ要素を取得
    let element2 = document.querySelector("dl");
    console.log(element2);

    // DOMのツリー構造を踏まえて指定が可能
    let element3 = document.querySelector("dl dt");
    console.log(element3);

2. 콘솔 표시 결과



3. 주요 요소 획득 방법


index.js
    // 主な要素取得メソッド
    document.getElementById("引数");           //id名
    document.getElementsByClassName("引数");   //class名
    document.getElementsByTagName("引数");     //要素名
    document.getElementsByName("引数");        //name属性
    document.querySelector("引数");            //セレクタ
    document.querySelectorAll("引数");         //セレクタ
귀환의 피보나치 수열
무한 스크롤의 매우 간단한 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage