DOM API

DOM API 란?

• Document Object Model Application Programming Interface 의 약어이다.
• 흔히 우리가 HTML에서 제어하는 div, span, input 등의 요소들을 Document Object Model 이라고 한다. - DOM
• 프로그램을 사용하기 위한 명령들의 집합을 Application Programming Interface 라고 한다. - API
• 즉, DOM API는 HTML의 요소들을 JS에서 제어하기 위한 명령들의 집합을 뜻 한다.

document.querySelector()

• 여기서 document 는 브라우저가 불러온 페이지를 뜻 하며, DOM 요소를 불러오는(진입점) 역할을 한다.
• querySelector()는 document 에 속한 함수, 즉 메소드로써 인수에 CSS의 선택자를 작성하면 해당 HTML 문서에서 일치하는 요소를 1개만 반환한다.
• 이때 해당 요소가 2개 이상이라면, 가장 먼저 찾은 요소를 하나만 리턴한다.

<!--HTML-->
<div class="this">1번 요소</div>
<div class="this">2번 요소</div>
<div class="this">3번 요소</div>

document.querySelector('.this') // 1번 요소 하나만 선택.

document.querySelectorAll()

• HTML 문서에서 일치하는 선택자를 가진 모든 요소를 찾아 선택하며, 이때 반환하는 데이터는 배열데이터의 모양으로 정렬되어 반환된다.
• 배열과 같은 방법으로 사용하게 되는데, 원하는 데이터를 선택하기 위해서는 몇번째 데이터인지 명시하여야 한다.

<!--HTML-->
<div class="this">1번 요소</div>
<div class="this">2번 요소</div>
<div class="this">3번 요소</div>

document.querySelectorAll('.this') // ["1번 요소", "2번 요소", "3번 요소"] < 배열로 표시
document.querySelectorAll('.this')[1] // 2번 요소를 선택.

//0부터 순서를 지정한다.

• 그러나 이는 배열과 모양은 유사하나 엄밀히 말해 배열은 아니므로 이를 유사 배열이라고 한다. (array-like)

이벤트로 요소 제어하기

.addEventListner()

• 선택한 요소에 어떠한 상황(이벤트)이 발생했을때, 지정한 함수를 실행하는 메소드.
• 선택할 요소.addEventListner(a, b(){}) 로 사용한다.
• 두개의 인수를 입력가능하며, a의 위치에는 상황(이벤트)을, b의 위치에는 실행시킬 함수를 작성한다.
  즉 선택한 요소에 a의 이벤트가 발생하면 b의 함수를 실행시켜라 라는 뜻이 된다.
• https://velog.io/@chl4842/이벤트리스너event-listener 참고

Class 제어하기

.classList.add()

• 인수의 내용을 선택한 요소의 클래스로 추가한다.

.classList.remove()

• 인수의 내용을 선택한 요소의 클래스에서 삭제한다.

.classList.contains()

• 인수의 내용이 선택한 요소의 클래스에 포함되어 있는지 확인한다.

• 해당 내용이 포함되어 있는 경우 true, 아닌 경우 false를 반환한다.

<!--HTML-->
<div class="this">this</div>

let a = document.querySelector('.this');

a.classList.add('addClass'); 
// <div class="this addClass">this</div>
// 선택한 요소에 addClass 라는 클래스가 추가됨.

a.classList.contains('addClass');
console.log(a.classList.contains('addClass')) // true
//contains 가 포함여부를 확인하고 true 를 반환.

a.classList.remove('addClass'); 
// <div class="this">this</div>
// 선택한 요소에 추가되었던 addClass 클래스를 삭제함.

a.classList.contains('addClass');
console.log(a.classList.contains('addClass')) // false
//contains 가 포함여부를 확인하고 false 를 반환.

forEach()

• 배열에서만 사용이 가능하며, 선택된 배열의 아이템에 반복적으로 익명함수의 내용을 실행시킨다.
• 배열.forEach(function(a, b){함수내용}); 으로 사용이 가능하다.
• 익명함수의 매개변수인 a는 forEach 구문에서 반복되고 있는 아이템들의 명칭을 지정하며,
  b는 반복되고 있는 횟수(index)의 명칭을 지정한다. (0부터 indexing)

let a = ["ㄱ", "ㄴ", "ㄷ", "ㄹ", "ㅁ", "ㅂ", "ㅅ", "ㅇ", "ㅈ", "ㅊ"];
a.forEach(function(자음, 위치){
  console.log(`${자음}은 ${위치+1}번째에 있습니다.`)
})

/*
"ㄱ은 1번째에 있습니다."
"ㄴ은 2번째에 있습니다."
"ㄷ은 3번째에 있습니다."
"ㄹ은 4번째에 있습니다."
"ㅁ은 5번째에 있습니다."
"ㅂ은 6번째에 있습니다."
"ㅅ은 7번째에 있습니다."
"ㅇ은 8번째에 있습니다."
"ㅈ은 9번째에 있습니다."
"ㅊ은 10번째에 있습니다."
*/

• 내부에서 사용하는 반복중인 요소와 index의 명칭은 임의로 지정 가능하다.

+

JS를 불러올 때 정상적을 읽지 못하는 경우

• HTML 문서를 읽는 과정에서 JS가 먼저 작성된 경우 body 내부의 내용이 JS 보다 늦게 읽히게 되므로, 작성한 JS가 제대로 작동하지 않는 경우가 있다.
• 이 경우 물리적으로 JS 를 body 하단에 작성해서 읽기 문제를 해결하거나, script 태그에 defer 라는 속성을 이용하여 JS 를 마지막에 불러 올 수 있게끔 할 수 있다.