DOM (Document Object Model) ⚡

⚡ DOM (Document Object Model)

• DOM(Document Object Model)은 컴퓨터가 문서를 잘 처리할 수 있도록 문서에 대한 구조를 약속한 것입니다.
• js를 통해 html 문서에 접근이 가능한 것은 html 문서가 dom 모델에 따라 기술되고 dom interface를 통해 기술된 html element가 객체로서 js와 연결되기 때문입니다.
• dom은 tree형태로 문서를 표현합니다. document는 최상위 element. 부모와 자식 관계를 통해 원하는 object에 접근 가능합니다.
• children에는 문서의 최상위 엘리먼트인 html이 존재합니다.

👪 자식, 부모 엘리먼트에 접근하는 방법

• .children : 해당 object의 자식 노드에 대한 배열
• .parentNode : 부모 노드
• .firstElementChild : 첫 자식 엘리먼트
• .lastElementChild : 마지막 자식 엘리먼트

👯‍ 같은 레벨의 형제 엘리먼트에 접근하는 방법

• .nextElementSibling
• .previousElementSibling

💛 Document API

• document.getElementBy~ : 단일 엘리먼트를 선택하는 메소드
• document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드, 여러 엘리먼트를 배열에 넣어 반환
• document.getElementsByTagName 메소드 : 인자로 HTML element 태그의 이름을 전달하면 해당 엘리먼트들이 반환
• document.getElementsClassName 메소드 : 인자로 class의 이름을 전달하면, 해당 class의 모든 엘리먼트가 배열로 반환
• document.getElementsByName 메소드 : 인자로 name을 전달하면, 해당 name 속성을 가진 모든 엘리먼트가 배열로 반환
• document.querySelector : css selector를 기반으로 엘리먼트를 선택, 조건에 부합하는 element가 여러개인 경우 첫 엘리먼트만 반환
• document.querySelectorAll : css selector를 기반으로 만족하는 모든 엘리먼트를 선택
• document.createElement() : 문자열 인자로 element tag를 입력하면 해당 엘리먼트가 생성돼 반환

💚 Element API

• .innerHTML 속성 : 엘리먼트 안의 HTML코드를 변경
• .innerText 속성 : 엘리먼트 안의 텍스트를 변경
• .style 속성 : css를 변경 가능
• .value 속성 : input element에 입력된 값은 .value를 통해 얻어올 수 있음, getAttribute 메소드로는 받아올 수 없음
• .appendChild(인자) : 추가할 element를 인자로 받아 호출된 element의 자식으로 인자를 가장 마지막에 추가
• .removeChild(인자) : 삭제할 element를 인자로 받아 호출된 element의 자식중에서 해당 element를 삭제
• .insertBefore(인자1, 인자2) : 인자1로 받은 element를 호출된 element의 자식중 인자2의 이전에 추가
• .cloneNode() : 호출된 element를 복사해서 반환

💙 getAttribute 메소드

• element의 속성의 값을 얻어옵니다.
• 하나의 인자 : attribute 이름을 받습니다.
• 직접 객체에 동기화되지 않는 속성에 대해서도 접근 가능합니다.
• 만약 변수 t에 id가 title인 p태그를 넣고, 변수 t1에 id가 logo인 img태그를 넣는다면 t.src는 undefied고 t1.src는 src가 출력됩니다.
• 그 이유는 img태그에 대해서는 api가 소스 속성을 동기화하여주지만 원래 소스가 정의되지 않는 태그는 동기화해주지 않기 때문입니다.
• 하지만 t.getAttribute("src")를 사용하면 출력할 수 있습니다.

💜 setAttribute 메소드

• element의 속성의 값을 설정합니다.
• 두개의 인자 : attribute 이름, 설정할 속성의 값을 받습니다.
• 직접 객체에 동기화되지 않는 속성에 대해서도 값 설정 가능합니다.

🤎 CSS Selector

• # : name 선택
• . : class 선택
• , : 여러개의 셀렉터를 사용

 

출처 - https://school.programmers.co.kr/learn/courses/10

참고 - https://wit.nts-corp.com/2019/02/14/5522