Selector API와 DOM조작

JS를 사용하는 가장 큰 이유

input요소를 찾고 button요소를 찾고 출력요소를 찾아서 한다.

1. DOM이란?

웹브라우저가 HTMl문서를 이해하고 다루는 방식
내부적으로 트리구조의 객체로 변환된다.

HTML태그는 요소라고 불린다

예시

doㅇ	최상위 객체 HTML전체 대표
HTML	모든 문서의 루트요소
HEAD	메타 정보, title, script등 포함
body	실제 사용자에게 보여지는 콘텐츠를 담는다
p h1	문단, 제목과 같은 콘텐츠 요소
table, tr, td	표 구조 구성요소

DOM트리 구조예시

<body>
  <h1>안녕!</h1>
  <p>이건 단락입니다.</p>
</body>

document
└── html
    ├── head
    └── body
        ├── h1
        └── p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 실행의 순서가 중요하다 -->
<body>
    이름: <input type="text" name="username">
    <input type="button" value="입력"><br>
    <p>당신의 이름은 <span class="output">_______</span>입니다</p>
    <script>
        var input = document.querySelector("input[name=username]");
        var btn = document.querySelector("input[type=button]");
        var ouput = document.querySelector(".output");

        btn.onclick = function(event){
            let name = input.value;
            input.value="";
            ouput.innerHTML ="<B>"+name +"</B>";
        }
    </script>

</body>
</html>

ㄴㅇinput 변수는 요소를 찾아서 저장해. 이걸로 사용자가 입력한 값을 가져올 수 있다
btn 변수는 버튼() 요소를 선택해서 저장하고, 이 버튼에 클릭 이벤트를 걸어준다
btn.onclick = function()는 버튼을 클릭했을 때 실행될 이벤트 핸들러 함수를 정의해. 이 함수가 실행되면:
- input.value를 읽어서 name 변수에 저장.
- input.value = ""로 입력창을 초기화
- output.innerHTML = "**" + name + "**"를 통해 결과를 출력

Selector API를 이용해서 DOM트리로부터 HTML DOM객체를 가져오기 위해서는 자바 스크립트 코드의 실행이 HTML문서가 파싱된 다음 실행되어야한다.