15-1. JS 문서객체모델 DOM (DOM, DOM트리, getElementById(), getElementByClassName(), getElementByTagName(), innerText(), innerHTML(), getAttribute(), setAttribute())

 

1. 문서객체모델 DOM 

자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다. 

웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 

웹 문서 전체는 document객체이고, 삽입한 이미지는 image 객체가 된다.

DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리한다. 

 

2. DOM 트리 

이런 웹 문서가 존재한다고 했을 때 

DOM 트리는 

HTML -> HEAD  -> META,

                      -> TITLE 

        -> BODY  -> H1

                     -> IMG 

라고 할 수 있다. 

 

 

부모와 자식 구조로 표시하면 트리형태가 되는데 이를 DOM 트리라고한다. 

DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 하고, DOM 트리의 시작부분인 HTML 노드를 나무 뿌리에 해당한다해서 루트 노드라고 한다. 

 

DOM 구성 원칙 

1️⃣ 모둔 HTML 태그는 요소(element) 노드이다. 

2️⃣ HTML 태그에서 사용하는 텍스트 내용은 나식 노드인 텍스트(text) 노드이다. 

3️⃣ HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드이다. 

4️⃣ 주석은 주석(comment) 노드이다. 

 

 

3. DOM 요소에 접근하고 속성 가져오기 

DOM 요소에 접근할 때 선택자(class, id, 태그 등 ) 을 사용해서 접근해야 한다. 

 

1️⃣ id 선택자로 접근하는 getElementById() 메서드 

요소명.getElementById("id명")

 

2️⃣ class 값으로 접근하는 getElementByClassName() 메서드 

요소명.getElementByClassName("class명")

ex) document.getElementByClassName("bright")

 

3️⃣ 태그이름으로 접근하는 getElementByTagName() 메서드 

요소명.getElementByTagName("태그명")

ex) document.getElementByTagName("p") -> p 태그 사용한 모든 요소에 접근 

 

4️⃣ 다양한 방법으로 접근하는 querySelector(), querySelectorAll() 메서드 

앞에 getElementById(), getElementByClassName(), getElementByTagName() 메서드 반환값은 htmlCollection 객체이다. 

이 객체에는 html 요소만 저장된다. 

따라서 DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어하기 위해서는 querySelector(), querySelectorAll() 메서드를 사용해야한다. 

id 선택자처럼 반환값이 하나라면 querySelector() 메서드를 사용하고, class 선택자나 태그 이름을 사용하여 여러 값을 한꺼번에 반환될 경우에는 querySelectorAll() 메서드를 사용한다. 

 

노드.querySelector(선택자)

노드.querySelectorAll(선택자 또는 태그) 

-> 선택자를 표시할 때 class면 . 사용 id면 # 사용

-> 이 메서드의 반환 값은 노드 아니면 노드 리스트이다. 

노드리스트는 노드를 한꺼번에 여러 개 저장한 것으로 배열과 비슷하다고 할 수 있다. 

 

 

4. innerText, innerHTML 프로퍼티 

자바스크립트에서 웹 요소의 내용을 수정하기 위해서는 innerText, innerHTML 프로퍼티를 사용하는 방법이다. 

innerText 프로퍼티 : 텍스트 내용 표시 

innerHTML 프로퍼티 : HTML 태그까지 반영하여 표시 

 

요소명.innerText = 내용

요소명.innerHTML = 내용 

innerText

innerHTML

 

 

5. getAttribute(), setAttribute() 

웹 문서를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장된다. 

이때 속성에 접근하려면 getAttribute() 메서드를 사용하고, 속성의 값을 바꾸려면 setAttribute()메서드를 사용한다. 

 

getAttribute("속성명") -> 속성을 가져올 때 메서드 

setAttribute("속성명", "값") -> 원하는 속성값을 지정하는 메서드 

 

아이디가 cup의 src 속성 

아이디가 cup 인 src 속성에 newpic 값 지정