[TIL] DOM

DOM 기초

DOM(Document Object Model)은 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model.(문서 객체 모델)

• DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직일 수 있게 만들 수 있음.
• JS에서 DOM은 document라는 객체에 구현되어 있으며, 브라우저에서 작동되는 js 코드에서는 어디에서나 document 객체를 조회할 수 있음.

console.dir

• DOM 구조를 조회할 때 유용. console.log과 달리 DOM을 객체 형태로 출력함.

DOM에서 요소 조회할 때 사용할 수 있는 속성

• 부모 요소를 나타내는 속성은 .parentElement
• .querySelector / .querySelectorAll
  
  

트리구조

• 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 구조.

CRUD + APPEND

CREATE : HTML Element 추가

• .createElement
  : 처음 만들어지면 아무것도 연결되지 않은 하나의 노드가 생기는 것. (연결을 위해 append 사용 가능.)

APPEND : HTML Element를 부모 노드에 포함

• .append

READ : HTML Element를 조회

• .querySelector : DOM에서 요소 정보 조회를 위해서 해당 속성의 첫번째 인자로 셀렉터를 전달하여 확인 가능. (셀렉터로 HTML 요소 , id, class 등이 가장 많이 사용됨)
• .querySelectorAll : array-like object(유사배열) 형태로 나옴)
• .getElementById : querySelector와 비슷한 역할을 하는 오래된 방식.
• .value : querySelector로 요소를 가져 온 후 .value 속성으로 접근 가능. (값을 가져오거나, 값을 설정할 수도 있음)
  
  

UPDATE : HTML Element를 변경

• .classList.add :지정한 클래스 값을 추가함 (추가하려는 클래스가 요소의 class 속성에 이미 존재한다면 무시한다)
• .classList.remove : 지정한 클래스 값을 제거한다.
• .setAttribute(속성 이름, 속성값) : 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용.

document.queryselector('#xyz').setAttribute('title','This is title');//id가 xyz인 요소의 title 속성을 지정.

DELETE : HTML Element를 삭제

• .remove() : 삭제하려는 요소의 위치를 알고 있는 경우에 사용.
• .innerHtml : 여러개의 자식 요소를 지울 때 사용할 수 있지만, 보안에 몇 가지 문제를 가짐.

document.querySelector('#container').innerHTML = '';

• removeChild : 자식 요소를 지정해서 삭제하는 매서드. (이 매서드와 for, while 문을 결합해서 모든 자식 요소 제거 가능)
  

const container = document.querySelector('#container');
    while (container.firstChild) {
      container.removeChild(container.firstChild);
   }
    
    //.firstChild 라는 매서드는 트리에서 노드의 첫번째 자식이나, 첫번째 자식이 없으면 null을 반환.(.lastChild도 있다)

@

• 배열.forEach : 주어진 함수를 배열 요소 각각에 대해 실행하는 매서드.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
  tweet.remove();
})//클래스 이름이 'tweet'인 요소만 찾아서 제거함. 

• display : none vs. visibility : hidden
  : 전자는 브라우저에서 아예 영역조차 사라짐. 후자는 영역은 남아 있음.
  
  

• 관심사 분리 : js를 이용해서도 스타일을 직접 조작할 수 있지만, CSS 클래스를 이용해 간접적으로 바꾸는 이유.

  • 디자인의 디테일한 요소가 js 코드에 담기는 것 방지.
  • 클래스 이용하면 해당 디자인을 디자이너가 쉽게 바꿀 수 있음.
  • CSS는 디자인, JS는 로직에 집중할 수 있도록 하기 위함.

이벤트

• DOM에서 마우스를 클릭하거나, 키보드 누르거나, 브라우저 창 크기 조절, 스크롤 등을 통해 이벤트가 발생.
• 이벤트 핸들러 : 이벤트가 발생할 때 실행되는 함수.
• 이벤트와 관련된 속성에는 on이라는 접두어가 붙음. (onclick, onkeyup:텍스트가 입력된 후 실행됨)
• 이벤트 속성에 이벤트 핸들러를 등록할 때는 함수 그 자체로 등록해야 하고, 함수 실행을 등록하는 게 아니다.
• .addEventListener : 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정함.

  btn.addEventListener("click", fucntion(){
  			console.log('버튼이 눌렸다네!');
  	});//addEventListener 사용
  
  btn.onclick = function(){
  		console.log('버튼이 눌렸다네!');
  	}//onclick 속성 이용 
  
  function handler(){
  			console.log('버튼이 눌렸다네!');
  	}
  
  btn.onclick = handler; // onclick 속성에 이벤트 핸들러 등록.
  ~~btn.onclick = handler(); // 이벤트 실행을 등록하는 것이 아님!!~~