DOM 요소를 CSS 선택기를 사용하여 선택하는 방법과 DOM Elements 제어방법

DOM 요소를 CSS 선택기를 사용하여 선택하는 방법

 

1. querySelector를 사용하여 DOM 요소를 선택하는 방법

 

• document.querySelector : CSS 선택자에 해당하는 가장 첫번째의 DOM Element를 잡아옵니다.
• document.querySelectorAll : CSS 선택자에 해당하는 모든 DOM Element를 잡아옵니다.

 

 

2. ID, Class, Tag를 사용하여 DOM 요소를 선택하는 방법

 

• getElementById : 주어진 문자열과 일치하는 id속성을 가진 요소를 찾아옵니다.
• getElementsByClassName : 주어진 클래스 이름을 가진 모든 자식 요소를 배열과 같은 객체로 변환합니다.
• getElementsByTagName : Element의 HTMLCollection과 주어진 태그명을 반환합니다. Root node를  포함해 전체 document를 대상으로 검색됩니다.

 

 

3. 부모, 형제, 자식 DOM 요소를 선택하는 방법

 

• parentElement : 호출된 Element의 부모 요소를 반환합니다.
• nextElementSibling : 호출된 Element의 바로 뒤에 있는 요소(형제)를 반환합니다.
• previousElementSibling : 호출된 Element의 바로 앞에 있는 요소(형제)를 반환합니다.
• children : 호출된 Element의 모든 자식을 반환합니다.

 

 

DOM Elements 제어 방법

1. DOM Element 생성하기

지정한 tagName의 HTML Element를 만들어 반환합니다.

 

 

 

2. Add, remove, toggle를 이용하여 class 제어하기

• Class 추가하기 (classList.add) : 지정한 class값을 추가합니다.

• Class 삭제하기 (classList.remove) : 지정한 class값을 제거합니다.

• Class 토글 (classList.toggle) : class가 존재한다면 제거하고 존재하지 않으면 class를 추가합니다.

 

 

 

3. 속성 추가하기

 

• setAttribute 구문 : 지정된 속성을 Element에 추가하고 지정된 값을 제공합니다.

* attribute : 속성의 특정 이름을 설정합니다.

* value : 속성에 값을 할당합니다.

 

• 사용 예시

 

 

 

4. Element 제거하기

• remove() 구문 : node를 제거합니다.

node : 여러가지 DOM타입들이 상속하는 인터페이스입니다.

Ex) Document, Element, CharacterData 등...

• 사용 예시

 

 

 

 

5. Element 추가하기

• appendChild() 구문 : 특정 부모 node의 자식 node리스트 중 마지막 자식으로 붙입니다.

* element : 부모 요소

* aChild : 지정된 부모의 밑으로 들어갈 자식 요소

 

• 사용 예시

 

 

 

 

DOM Events

DOM Event에 대한 자세한 설명은 여기를 참조해주세요

 

 

addEventListener() 구문

EventTarget의 addEventListener() 메소드는 "지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정"합니다.

 

* type (이벤트명) : 반응할 이벤트의 유형 및 이름 ( Ex) 'mouseover')

* listener (이벤트핸들러) : 지정된 타입의 이벤트가 발생했을 때 실행될 함수 ( Ex) function(event 객체){} ) 

 

 

TIP

Event 객체 : DOM 내에 위치한 이벤트를 나타내며 사용자가 현재 취한 액션에 대한 상세정보를 담고 있습니다.

* Event.target : 해당 이벤트가 발생한 근원지에 위치한 DOM Element를 가리킵니다.
* Event.currentTarget : addEventListener를 실행한 대상이 되는 Element를 가리킵니다. (이벤트가 실제로 등록이 된 Element)