Document Object Model


HTML 은 구성을 짜는 설계도 같은 역할을 하고, CSS 로 디자인을 했다면, DOM을 이용해서 화면을 만들어 준다.

document


html 문서의 구조와 관계를 객체로 표현한 모델.
html 문서도 javascript 객체도 부모와 자식이 있는 트리구조 이다.
document라는 전역 변수로 접근이 가능하다.

아래 그림과 같이 documenthtml이 담겨있다.
image.png

$0 키워드를 이용해서 콘솔에서 선택한 엘리먼트에 접근할 수 있다


image.png

console.dir로 접근하면 객체 모양으로 element가 가지고 있는 다양한 속성들을 볼 수 있다


image.png

DOM 엘리먼트를 선택하는 방법


querySelector

class 선택: .
document.querySelector('.storylink');

Id 선택: #
document.querySelector('#storylink');

  • 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환한다.
  • 일치하는 요소가 없으면 null을 반환한다.
  • 클래스를 사용하는 classList 중 가장 첫번째 요소를 가지고 온다.

image.png

querySelectorAll

document.querySelectorAll('.storylink');

  • nodeList 유사배열로 반환된다.
  • 일치하는 것이 없는 경우에는 비어 있는 NodeList 빈배열을 반환한다.

image.png

getElementsByClassName

document.getElementsByClassName('storylink');

  • HTMLCollection 유사배열로 반환된다.
  • 일치하는 것이 없는 경우에는 비어 있는 HTMLCollection 빈배열을 반환한다.

image.png

getElementById

document.getElementById('score_21510894');

  • ID는 대소문자를 구분하는 문자열로, 문서 내에서 유일해야 한다.
  • 하나의 값은 하나의 요소만 사용할 수 있다.
  • 일치하는 요소가 없으면 null을 반환한다.

image.png

getElementsByTagName

document.getElementsByTagName('span');

  • HTMLCollection 유사배열로 반환된다.
  • 일치하는 것이 없는 경우에는 비어 있는 HTMLCollection 빈배열을 반환한다.

image.png

부모, 형제, 자식 요소들을 선택하는 방법


parentElement

rank.parentElement;

  • 현재 element 의 부모 element 를 반환한다.
  • 요소가 없다면 null.

image.png

nextElementSibling

title.nextElementSibling;

  • 현재 element 의 다음 형제 element 를 반환한다.
  • 요소가 없다면 null.

image.png

previousElementSibling

votelinks.previousElementSibling;

  • 현재 element 의 이전 형제 element 를 반환한다.
  • 요소가 없다면 null.

image.png

children

athing.children;

  • 현재 element의 자식 elements를 HTMLCollection 유사배열로 반환한다.

image.png

DOM 엘리먼트를 수정하는 작업


1. add, remove, toggle class

add

pagespace.classList.add('world');

  • class를 만들고 추가할 수 있다.

image.png

remove

pagespace.classList.remove('world');

  • class를 삭제할 수 있다.

image.png

toggle

pagespace.classList.toggle('world');

  • class가 없다면 추가하고 class가 있다면 삭제할 수 있다.

image.png

2. Create a DOM element

createElement

document.createElement('a');

  • element를 생성한다.

image.png

3. Add attributes

setAttribute

menu.setAttribute('href', 'https://www.naver.com');

  • 속성을 추가할 수 있다.

image.png

4. Append an element

appendChild

title.appendChild(menu);

  • element의 마지막 자식으로 넣어준다.

image.png

prepend

title.prepend(menu);

  • element의 첫번째 자식으로 넣어준다.

image.png

4. Removing an element

remove

menu.remove()

  • element를 삭제할 수 있다.

image.png

DOM 엘리먼트에 대한 이벤트 등록 방법


Events

https://developer.mozilla.org/ko/docs/Web/Events

AddEventListener

link.addEventListener('mouseover', function(){ console.log(123); });

  • 인자를 최대 3개까지 넣을 수 있다.
  • 첫 번째 인자로는 이벤트 이름을 적고, 두 번째 인자로는 함수를 넣어준다.

image.png

Introduction to Event objects


  • 현재 발생한 이벤트에 대한 각종 상세정보에 대한 객체.
  • 이벤트를 등록해 주게 되면 addEventListener 의 인자로 항상 이벤트 객체가 들어간다.
    image.png

Event.target vs Event.currentTarget


target

tbody.addEventListener('click', function(ev){ console.log(ev.target); });

  • target 속성은 해당 이벤트가 발생한 근원지에 위치한 element 요소를 말한다.

image.png

currentTarget

tbody.addEventListener('click', function(ev){ console.log(ev.currentTarget); });

  • currentTarget 속성은 실제로 등록된 dom element 정보를 담고있다.

image.png