Javascript : DOM 요소에 접근하고 조작하는 방법

 DOM (Document Object Model) 이란?

 Document = 문서   Object = 객체   Model = 모델 

HTML의 태그들을 웹 브라우저의 메모리에 올려서 자바스크립트로 사용하기 위해 만들어진 웹문서이다.

자바스크립트를 통해 HTML에 접근하려면 HTML태그들이 객체가 되어야 한다.

그래야 자바스크립트를 통해 각 객체에 접근을 할 수 있기 때문이다. 이 객체를 DOM에서는 노드(Node)라고 부른다.

 

---

DOM과 HTML의 차이점

HTML	DOM
단순히 규칙에 따라 정해진 태그, 속성값으로 이루어진 언어이다.	브라우저가 HTML 파싱한 후 생성되는 객체 모델로 document에 접근가능한 API이다.

 

---

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

 

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

속성	내용
document.querySelector(#id)	ID 선택자에 해당하는 가장 첫번째의 DOM Element를 잡아온다.
document.querySelector(.class)	Class 선택자에 해당하는 가장 첫번째의 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 생성하기

var element = document.createElement('tagName');

지정한 태그네임의 HTML Element를 만들어 반환한다.

 

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

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

var addClass = element.classList.add('className');

 

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

var removeClass = element.classList.remove('className');

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

var removeClass = element.classList.toggle('className');

 

3. 속성 추가하기

setAttribute : 지정된 속성을 Element에 추가하고 지정된 값을 제공한다.

element.setAttribute ('attribute', 'value');
// attribute : 속성의 특정 이름을 설정한다.
// value : 속성에 값을 할당한다.

사용 예시

var bloglink = document.querySelector('a');
bloglink.setAttribute('href','https://choa-ri.tistory.com');

 

4. Element 제거하기

remove() : node를 제거한다.

node.remove();
// node : 여러가지 DOM타입들이 상속하는 인터페이스이다.
// (ex : Document, Element, CharacterData 등)

사용 예시

var el = document.querySelector('div');
el.remove();

 

---

 

DOM Events

addEventListener() : 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다.

target.addEventListener(type, listener);
// type(이벤트명) : 반응할 이벤트의 유형 및 이름 (ex: 'mouseover', 'onclick' 등)
// listener(이벤트핸드럴) : 지정된 타입의 이벤트가 발생했을 때 실행될 함수 (ex : function(event 객체){})

 

Event 객체 소개

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

 

Event.target 과 Event.currentTarge 의 차이점

- Event.target : 해당 이벤트가 발생한 근원지에 위치한 DOM Element를 가리킨다.

- Event.currentTarget : addEventListener를 실행한 대상이 되는 Element를 가리킨다 (이벤트가 실제로 등록이 된 Element)