Q. DOM?
: Document Object Model의 약어.
여기서 ‘document’란 HTML에 들어있는 여러가지 object model을 뜻하는데, ‘object model’이란 div, span, input… 등의 요소들을 말하는 것임. 그렇다면 ‘API’는 application programming interface라는 단어의 약어임. 쉽게 말하자면 애플리케이션, 웹사이트가 동작하기 위해서 입력하는 프로그래밍 명령임.
DOM API : 자바스크립트에서 HTML을 제어하는 여러가지 명령들.
자바스크립트 파일을 연결한 뒤, class가 'box'인 div 태그를 만들고 'box!'를 작성해주었다. 
class가 'box'인 요소를 가져오기 위해, 'querySelector'를 사용. 출력해보면, 'null'임. 
왜?
: 해당하는 요소를 찾지 못했으므로 'null' 출력. script 태그를 head 영역에 넣었기 때문. script를 body 부분에 넣는다면 잘 작동함. 또다른 방법으로는 script 태그를 head 영역에 쓰되, 'defer'라는 속성을 추가해주면 된다.
defer는 브라우저에게 "이 스크립트는 페이지가 완전히 로드된 후 실행되어야 해. 그 동안 다른 것들을 먼저 로드하고 보여줘"라고 알려주는 것.
defer 속성 추가.
class가 'box'인 요소가 잘 출력되었다!
Q. HTML 코드에서 왜 이러한 이상한 현상이 나타나는지?
: 브라우저는 위 -> 아래로 코드를 읽어나감. script 태그를 head 영역에 명시하였기 때문에, HTML 요소가 있는 body 영역보다 더 먼저 읽히게 됨. 그럼, body 영역을 아직 읽지 않은 상황이므로 'box'라는 class를 가진 요소를 찾지 못해 모른다는 것. 근데 main.js에서는 'box'라는 class를 가진 요소를 찾아 콘솔창에 출력해달라... 이러니까 못찾아서 null이라는 의미 없는 데이터가 출력되는 것임.
해결 방법 1. script 태그의 위치를 body 영역 끝부분에 넣기
해결 방법 2. script 태그를 head 영역에 넣되, 'defer' 속성 추가하기
: HTML 코드를 다 읽은 상태로 다시 main.js 내용을 실행하겠다는 의미.
1. HTML 요소 1개 검색 / 찾기
2. HTML 요소에 적용할 수 있는 메소드
3. addEventListener에 인수 추가 가능.
일단 이 메소드에는 2개의 인수를 추가할 수 있다. 이때 숫자 1,2는 데이터가 아니라 첫 번째 인수, 두 번째 인수에도 어떠한 것을 넣을 수 있다는 표시.
첫 번째 인수 : 어떠한 이벤트에 대한 정보
사용자가 boxElement를 클릭했을 때 상황을 이벤트라고 보는 것. 이벤트를 지켜보다가 클릭이라는 이벤트가 발생하면, 무엇인가를 하겠다라는 의미.
두 번째 인수 : 익명의 함수
즉, body 영역에서 찾은 boxElement라는 부분에 이벤트를 듣고 있는 어떠한 개념(addEventListener)을 추가하는데, 그 이벤트는 클릭 이벤트이고 그 클릭 이벤트가 일어나는지 일어나지 않는지를 브라우저가 감시. 사용자가 boxElement를 클릭할 때, 익명의 함수(핸들러)를 실행하겠다는 의미. - > addEventListener 메소드의 역할.
실제로 addEventListener 메소드가 잘 작동하는지 보면, 내가 'box'라는 class를 가진 요소를 클릭했을 때마다 'COYS'라는 문구가 콘솔창에 출력된다. 성공.
지금 진행하고 있는 것은 DOM API. DOM API 중에 addEventListener, document.querySelector 이런 것들을 하나씩 배우고 있는 중임.
classList라는 객체 부분에는 'add'라는 메소드를 사용할 수 있는데, 여기다 'active'라는 문자데이터를 추가한 것임. 'box'라는 class를 가지고 있는 요소에 'active'라는 class를 add, 즉 추가하겠다는 뜻.
그리고 나서 boxElement 부분에 classList라는 클래스 정보를 가진 객체 내부에서 'contains'라는 포함이 되어 있는지에 대한 메소드를 사용하여, 해당 요소에 'active'라는 class가 있는지 없는지를 체크해주는 API임. 체크해서 만약 'active' class가 있다면, true 반환. 없다면 false 반환.
class를 추가하는 메소드도 배웠으니, 제거하는 메소드는 무엇일까?
boxElement에서 'actvie' class를 제거함.
class가 'Sonny'인 요소를 클릭하면,
1. 콘솔창에 'worldclass'가 출력된다.
2. 그 요소에 'active'라는 class를 추가함.
3. 'active' class가 있으므로 true 반환
4. 그 요소의 'active' class 제거.
5. 'active' class 없으므로 false 반환.
4. HTML 요소 모두 검색 / 찾기 : querySelectorAll 
querySelector와는 다르게, 해당하는 요소 전체를 찾아줌. 그래서 변수명도 복수 형태로 설정했음. 
sonnyElements는 복수 형태이며, 배열 데이터로 만들어짐. 'Sonny'라는 class를 가진 요소 여러 개를 찾아서 만든 그 배열을 'forEach'라는 메소드를 통해서 반복시켜줄 수 있음. 익명 함수가 반복적으로 실행이 되는데, 이 함수의 매개변수로는
첫 번째 매개변수 : 반복되는 하나의 요소 (작명 마음대로)
두 번째 매개변수 : 반복되는 어떤 번호 (작명 마음대로)
일단 실습을 위해, HTML 코드를 수정했음.
1) 일단 class가 'sonny'인 요소 모두를 찾아서 반환해라. (배열)
2) 순회하면서 익명의 함수를 실행해서 반환해라.
잘 출력되었음.
이번엔 classList를 통해서 class를 add할 것임.
class가 추가됨.
근데, HTML과 CSS는 zerobased-numbering을 사용하지 않음.
그래서 현재 각 요소의 인덱스는 0부터 시작함.
이것을 1로 시작하도록 바꿔주려면,
각 요소의 인덱스 + 1을 하면 됨.
인덱스 + 1로 잘 출력됨.
변수 부분에다가 할당을 하고, console.log를 통해서 sonnyElement에 'textContent'라는 속성을 적용해보겠음. sonnyElement에 들어 있는 내용이 반환됨. 텍스트로만 이루어진 내용이 반환, 그 내용이 console.log로 출력됨. 
해당 요소의 텍스트 콘텐츠인 '1'이 출력. (숫자 데이터 x. 문자인데 숫자처럼 나온 것임)
textContent도 당연히 DOM API임.
이는 값을 얻는 용도로도 사용되는데, 값을 지정하는 용도로도 쓰일 수 있음.
지정한 값으로 잘 출력됨.
'Sonny'를 class로 가지는 요소의 텍스트가 변경된 것도 확인할 수 있다.
값을 얻는 용도의 API : Getter
값을 지정하는 용도의 API : Setter