DOM API

DOM API 란?

Document(DOM)는 HTML을 뜻하고

Object Model은 HTML의 span, div, input 요소들을 뜻한다.

즉, DOM API는 자바 스크립트에서 HTML을 제어하는 여러가지 명령들이라고 의역할 수 있다.

 

자바 스크립트에서 document 객체에 있는 querySelector 메소드를 통해 HTML의 box 클래스를 가진 요소를 찾은 다음 콘솔에 출력하는 코드를 작성해 보았다.

브라우저는 코드를 위에서 아래로 읽어나가기 때문에 자바 스크립트에 작성된 코드가 먼저 실행이 된다. 그 후에 body부분에서 div요소를 작성하기 때문에 null값이 출력된 것이다.

이를 해결하기 위해서 script 태그를 body의 div 태그 아래 부분으로 옮겨주면 정상적으로 작동한다.

하지만 정보의 내용을 구조의 내용에 작성하는 것이 문제가 발생시키는 것은 아니지만 그다지 좋은 방법은 아니다.
그렇기 때문에 defer라는 키워드를 추가함으로서 HTML코드를 다 읽은 상태에서 다시 main.js 내용을 실행하겠다 라는 의미를 부여해줄 수 있다.

코드를 작성하다가 HTML 부분의 내용을 정상적으로 찾지 못하면 script 태그의 위치나, defer 키워드가 작성되어있는지 확인해보아야 한다.

 

DOM API

1. document.querySelector

document 객체의 querySelector 메소드를 통해 HTML의 요소 중 원하는 요소를 찾을 수 있다.

인수로는 찾고자하는 요소의 특성을 넣어줄 수 있다. 이때 CSS의 선택자를 이용할 수 있다.

 

2. addEventListener

addEventListener 메소드에는 2개의 인수를 추가할 수 있다.
첫번째 인수로는 이벤트(상황)를 작성한다.
두번째 인수로는 이벤트가 발생했을 때 실행할 함수를 익명 함수로 넣어줄 수 있다.
=> 함수를 데이터처럼 사용한다.

이벤트의 이름들은 본격적으로 자바 스크립트를 배울 때 다시 살펴보겠다.

예시에 작성된 메소드는 클릭이 발생하면 콘솔에 Click~! 이라는 문자열을 출력하는 함수를 실행하겠다는 뜻이다.

 

3. classList.add, classList.remove

각각의 코드는 다음과 같은 의미를 가진다.

//박스라는 클래스를 가지고 있는 요소에

//액티브라는 클래스를 추가 하겠다.

//해당 요소의 클래스 리스트에 액티브라는 클래스가 있는지 확인하겠다.

//박스라는 클래스르 가지고 있는 요소에서

//액티브라는 클래스를 제거하겠다.

 

 

 

4. document.querySelectorAll, forEach

 

요소 모두 검색하기

document.querySelector 메소드를 통해 하나의 요소를 검색했다면 document.querySelectorAll 메소드를 통해 여러 개의 요소를 한 번에 찾을 수 있다.

인수로는 찾은 요소 각각에 대해 실행할 함수를 익명 함수로 전달한다.

익명 함수의 첫 번째 매개변수에는 현재 반복 중인 요소를 받아볼 수 있고, 두 번째 매개변수로는 반복 중인 요소의 번호를 받아볼 수 있다. 이때 자바 스크립트는 zero-based numbering을 사용하기 때문에 번호는 0번부터 매겨진다.

매개 변수의 이름은 원하는 대로 지정할 수 있지만 직관적으로 알아볼 수 있도록 이름을 작성하는 것이 좋다.

 

forEach 메소드를 적용해보기 위해  클래스가 box인 요소를 4개 만들어 주었다.

그리고 forEach 메소드로 각 요소에 접근하여 classList에 order-index + 1 클래스를 추가해주었고, 콘솔에 출력해본 결과 잘 적용되었음을 확인할 수 있다.

CSS나 HTML에서는 zero-based numbering을 사용하지 않기 때문에 0부터 시작하는 숫자를 1부터 시작할 수 있도록 만들어주는 것이 좋다.

 

5. textContent 속성

요소에 들어있는 내용 중 text로만 이루어진 내용만 반환해주는 DOM API이다.

textContent 속성은 값을 얻는 용도와, 값을 지정하는 용도 두 가지 용도로 사용될 수 있다.