DOM

문서 객체 모델(Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다.

이제 이해를 해보자

작성한 HTML 코드가 브라우저에 의해 파싱되면 DOM이 됩니다.
HTML -> 최초의 설계도 / DOM -> 설계도를 실제로 화면에 나타내는 인터페이스

DOM은 문서에 접근 할 수 있는 API입니다. node와 property, method를 갖는 객체로 이루어져 CSS, 스크립트와 같은 언어들이 DOM에 접근하여 커스텀 할 수 있게 만들어주는 연결고리역할 이라고 보면 됩니다.
DOM을 이용하여 텍스트 내용 변경, 스타일링 및 노드 구조까지도 변경 할 수 있습니다.

CSS 선택자 & DOM

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

• document.querySelector: CSS 선택자의 태그와 일치하는 첫번째 태그만 선택합니다.

ele = baseElement.querySelector(".section");

• document.querySelector: CSS 선택자의 태그와 일치하는 모든 태그을 선택합니다.

ele = baseElement.querySelectorAll(".section");

2. id, class를 사용하여 DOM 요소 선택

• getElementById: 문서의 해당되는 id명과 일치하는 요소를 반환합니다.

var ele = document.getElementById('Home')

• getElementByClassName: 문서의 해당되는 class명과 일치하는 요소를 반환합니다.

var ele = document.getElementByClassName('Room')

3. 부모, 형제, 자식 DOM 요소를 선택

• parentElement: 호출된 요소의 부모 요소를 반환합니다.
• children: 호출된 요소의 모든 자식요소를 반환합니다.

JavaScript & DOM

JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어로 DOM은 이 작업이 이루어지는 장소입니다.

DOM Elements 제어

1. DOM Elemnet 생성

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

지정한 tagName의 HTML Elements를 반환합니다.

2. add, remove, toggle를 이용한 class 제어

• Class 추가 - 지정한 class값이 추가됩니다.

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

• Class 삭제 - 지정한 class값이 삭제됩니다.

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

• Class 토글 - class가 있을시 제거 없을시 추가됩니다.

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

3. Element 추가, 제거

node란? 여러 DOM타입들이 상속하는 인터페이스

• appendChild()
  지정한 부모 node의 자식 node리스트 중 라스트 자식을 추가합니다.
  element: 부모 요소
  aChild: 지정된 부모의 밑에 추가되는 자식 요소

element.appendChild(aChild);

• remove()
  node를 제거한다

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

4. 속성 추가

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

element.setAttribute ( 'attribute' , 'value' );

• attribute: 속성이름
• vlaue: 속성값

document.getElementById('el').setAttribute('href','https://velog.io/playck');

DOM 이벤트

addEventListener()

addEventListener는 메서드입니다.
지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 등록합니다.
동일한 요소에 동일한 이벤트를 여러 개 등록할 수 있습니다.

element.addEventListener( type, listenr);

• type: 이벤트의 유형 (ex: 'click')
• listenr: 지정된 타입의 이벤트가 발생시 실행되는 함수 (ex: function(event객체){})

자주 사용되는 이벤트 유형

• change: 변동이 있을 시 발생
• click: 클릭시 발생
• focus: 포커스를 얻을 시 발생
• keyup: 키에서 손을 놓았을 때 발생
• keydown: 키를 누를 때 발생
• load: 로드가 완료 될시 발생
• mousedown: 마우스를 클릭 했을 때 발생
• mouseout: 마우스가 특정 객체 밖으로 나갈때 발생
• mouseover: 마우스가 특정 객체 위로 올라갔을 때 발생
• mousemove: 마우스가 움직였을 때 발생
• select: option tag 등에서 선택을 했을 때 발생