[4] 03/16 자바스크립트 수업

Noh Sinyoung·2023년 3월 16일
0

DOM

Document Object Model

기본원리 - 1. 원하는 태그 선택. 2. 선택한 태그를 조작함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트3 DOM</title>
</head>
<body>
    <h1>제목으로 사용하는 h1태그</h1>
    <p>본문의 내용으로 주로 사용하는 p태그</p>
    <ul>
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ul>


    <script>
        //Document Object Model

        //기본원리 : 1. 원하는 태그 선택.    2. 선택한 태그를 조작함

        let 선택한놈1
        let 선택한놈2
        선택한놈1 = document.querySelector("h1")
        선택한놈2 = document.querySelector("p")

        console.log(선택한놈1)
        console.log(선택한놈2)

        선택한놈1.style.color = "cyan"
        선택한놈2.style.backgroundColor = "aquamarine"


    </script>
</body>
</html>

0개의 댓글