자바 스크립트

DOM은 Document Object Model의 약어로, HTML, XML 등의 문서에 접근하고 조작할 수 있는 인터페이스입니다. HTML 문서를 브라우저가 해석하면서 각각의 HTML 요소를 JavaScript가 사용할 수 있는 객체로 생성하고, 이들 객체를 계층적으로 연결해 문서를 표현합니다. 이렇게 DOM을 사용하여 문서 구조, 스타일, 내용 등을 변경할 수 있고 이를 통해 동적인 웹 페이지를 만들 수 있습니다.

querySelector

괄호 속에 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환 일치하는 요소가 없다면 null 반환

// 기준 html
<body>
    <h1>h1</h1> // 태그이름
    <h2 class="h2">h2</h2> // 클래스 이름
    <h3 id="h3">h3</h3> // id 이름
    <h3>h3_2</h3>
    
    <div> // 복합태그 이름
        <span>Span1</span> // 복합태그이름
        <span>Span2</span>
    </div>
    
    <script src="app.js"></script>
</body>

태그 select : 괄호 속에 태그이름을 쓰면 된다.

const selected = document.querySelector("h1");
selected.style.color = "red";

클래스 select : 괄호속에 .클래스이름을 쓰면 된다.

const selected = document.querySelector(".h2");
selected.style.color = "red";

ID select : 괄호 속에 #id이름을 쓰면 된다.

const selected = document.querySelector("#h3");
selected.style.color = "red";