JS 문법 - DOM(문서객체모델) 트리

현재 수강하고 있는 멀티캠퍼스 k-digital 지능형 웹서비스 풀 스택 과정을 수강하며 적은 내용입니다.

교재로는 모던 자바스크립트 입문을 사용하고 있습니다.

웹페이지의 내용은 Document객체가 관리한다.

웹 브라우저가 웹 페이지를 읽어 들이면 렌더링 엔징은 웹 페이지의 HTML 문서 구문을 해석하고 Document 객체에서 문서 내용을 관리하는 DOM트리라 하는 객체의 트리 구조를 만든다.

DOM트리를 구성하는 하나의 객체를 노드라 한다. 기본적 노드는 문서 노드, HTML 요소 노드, 텍스트 노드가 있다.

노드 객체 가져오기

1. id속성 값으로 가져오기

getElementById("id이름")

단 1개의 요소 객체에 접근할 수 있다.

2. 태그 이름으로 가져오기

getElementsByTagName("태그 이름")

인수로 넘긴 태그에 해당하는 복수개의 요소 객체(= NodeList)에 접근할 수 있다.

3. class 속성 값으로 가져오기

getElementsByClassName("class속성 값")

인수로 넘긴 class 속성 값에 해당하는 복수개의 요소 객체(= NodeList)에 접근할 수 있다.

4. name 속성 값으로 가져오기

getElementsByName("name속성 값")

인수로 넘긴 name의 속성 값에 해당하는 복수개의 요소 객체(= NodeList)에 접근할 수 있다.

5. CSS 선택자로 노드 가져오기 - 단수

CSS선택자로 노드를 가져오는 경우에는 앞선 getElementByxxx 메서드들과 다른 점은 만약 h1태그 하위의 a태그를 가져오는 등의 자세한 선택을 할 수 있다는 점이다.

EX) document.querySelector(h1 > a)

document.querySelector("CSS선택자")

인수로 넘긴 CSS선택자에 해당하는 단 1개의 요소 객체를 가져올 수 있다.

6. CSS 선택자로 노드 가져오기 - 복수

document.querySelectorAll("CSS선택자")

인수로 넘긴 CSS선택자에 해당하는 복수개의 요소 객체(= NodeList)를 가져올 수 있다.

+) innerHTML 프로퍼티

요소 안의 HTML 코드이다. 동적으로 태그의 텍스트를 바꾸기 위해 자주 사용한다. (textContent도 같은 기능을 한다. 하지만 이 태그는 html태그를 넣으면 인식하지 못하고 텍스트로 본다.)

꾸준함 = 경험치