200811 TIL (DOM)

DOM(Document Object Model)은 말 그대로 '문서 객체 모델'이다. 문서를 객체처럼 접근할 수 있는 방법인 것이다. 지금까지 우리가 문서를 만드는 데 이용했던 HTML은 '정적인' 언어로, 이미 출력된 화면 상에서 변화가 일어나지 않는다. 이를 '동적인' 언어인 자바스크립트로 접근한다면, 여러 가지 동작이 일어나는 웹페이지를 만들 수 있을 것이다. 이를 가능하게 해 주는 것이 바로 DOM이다.

• DOM이란? HTML 문서의 구조와 관계를 객체로 표현한 모델이며 객체와 마찬가지로 트리구조를 가진다. (객체 : key->value / DOM : 부모 노드 ->자식노드)
• document라는 전역변수로 접근이 가능

다음은 알아두면 좋은 속성들에 대한 내용이다.관련하여 또 유용한 정보는 이쪽 에서 확인할 수 있다.

• innerHTML vs textContent : 두 가지 다 엘리먼트에 담긴 내용에 접근하는 속성이나, innerHTML은 보안 이슈가 있으므로 textContent를 사용하는 게 더 바람직하다. (둘 다 값을 할당할 수 있는 속성이다)
• classList : class 목록(배열)
• className : class 이름(문자열)
• .value : 입력한 값을 받아올 수 있다(form 입력값)
• element vs node : node가 더 상위 개념

DOM 메소드 정리

• document.createElement : 엘리먼트 생성
• append vs appendchild : 두 가지 다 부모 노드에 엘리먼트를 추가하는 메소드이지만 차이가 있다.
  append는 DOM 메소드이고, appendChild는 JavaScript 메소드이다. 자세한 내용은 이 링크를 참고할 것.
• append vs prepend : prepend를 사용하면 가장 첫 자식 노드로 추가된다.
• querySelector, querySelectorAll : 선택자를 이름으로 조회할 수 있는 메소드이다. 다만, querySelector는 이름으로 조회된 가장 첫번째 값만을 가져오므로, 선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll을 사용해야 한다.