JavaScript - DOM의 기초

About Dom!?

DOM, Document Object Model

• 문서 객체 모델의 개념이다.
• 돔은 계층형 구조로써 부모노드, 자식노드, 형제노드가 존재하는 형태이다.
• 노드의 종류에는 코멘트 노드, 요소 노드, 문서 노드, 텍스트 노드 등 12개의 노드가 존재하는데 대부분 요소노드와 텍스트 노드 2가지를 자주 사용하게 된다.

 

요소 노드 (Element node)

• 태그 노드를 뜻하며 자식 노드가 존재할 수 있다.

 

텍스트 노드 (Text node)

• 문자를 표현하는 노드로써 자식 노드가 존재할 수 없다.

 

자바스크립트에서 태그 선택

• id 속성 또는 class 속성을 통하여 태그를 선택하는 등 여러가지 방법으로 자바스크립트를 통해서 태그를 호출하고 변수에 할당하는 방법에 대해서 알아보자!!

 

1. getElementById() 

• id 속성을 통해 태그 선택하는 방법이다!

 

<기본 선언 방법>

document.getElementById('myNumber') // 임의로 myNumber 이라는 id선택

<변수 할당>

const myTag = document.getElementById('myNumber); // myTag에 myNumber 아이디 태그 할당
console.log(myTag); // myNumber 아이디 태그 출력

• 1개의 태그만 선택할 경우 사용하는 방법이다.
• 만약 존재하지 않는 아이디 값을 선택할 경우 undefined가 아닌 null을 return 한다.

 

2. getElementsByClassName()

• class 속성을 활용한 태그 선택하는 방법이다!

 

<예시 1>

const myTags = document.getElementsByClassName('myClassNumber');
console.log(myTags);

• getElementsByClassName는 클래스의 속성같이 여러 개의 태그를 선택하는 경우 사용된다!
• myTags를 출력하였을 때 배열의 형태로 보이지만 배열은 아니다!
• 하지만 인덱스로의 접근이나 length, for of로 접근이 가능하다. 이러한 것을 유사배열(Array-Like Object) 라고 부른다.
• 존재하지 않는 클래스를 선택할 경우 getElementById 와 다르게 null값이 아닌 빈 배열을 return 해주게 된다.

<예시 2>

const myTags = document.getElementsByClassName('없는 클래스')
console.log(myTags.length); // 출력 0
console.log(myTags == null); // false

 

3. getElementsByTagName()

• 태그 이름을 선택해서 해당되는 태그를 선택하는 방법이다!

 

<예시 3>

document.getElementsByTagName('li')

 

4. querySelector()

• css 선택자로 태그를 선택하는 또 다른 방법으로 1개의 태그만 선택이 가능하다는 특징을 가지고 있다.

 

<예시 4>

document.querySelector('#myNumber'); // myNumber (id 선택)

// document.getElementById('myNumber') 과 동일한 구문이다.

<예시 5>

document.querySelector('.myNumber');

• 만약 여러 개의 태그가 선택되는 클래스를 사용하였을 경우에는 myNumber 클래스 이름의 가장 첫 번째 태그가 출력이 된다.

 

5. querySelectorAll()

• 쿼리셀렉터를 사용하여 여러 개의 태그를 선택할 때 사용되는 방법이다!
• getElementsByClassName()과 유사한 결과값을 가진다!
• getElementsByClassName 과의 차이점? getElementsByClassName는 HTML collection 배열을 출력하고 querySelectorAll는 노드 배열이라는 유사 배열을 출력한다.

 

★ querySelector & All을 사용하는 방식이 조금 더 활용도가 높다!

 

이벤트 버튼 클릭 예제

• 태그 선택하는 것을 배웠으니 연습을 해보았다.

 

const btn = document.querySelector('#myBtn');

// 4번 줄부터를 이벤트 핸들링이라고 부른다!
btn.onclick = function() { // 이벤트 핸들링에 사용된 함수를 이벤트 핸들러라고 한다.
	console.log("클릭!")
}