[JavaScript] JavaScript 문서 객체 모델(DOM)이란?

 문서 객체 모델 (DOM)

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

 

 

 

DOM 트리

• 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것
• 나무 형태가 되기 때문에 “DOM 트리“라고 함.
• 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목
• 루트 노트(root node) : DOM 트리의 시작부분(html)

 

 

DOM 을 구성하는 원칙

• 모든 HTML 태그는 요소(element)노드
• 웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트(text) 노드
• 태그의 속성은 요소 노드의 자식 노드인 속성(attribute) 노드
• 주석은 주석(comment)노드

 

 

DOM 요소 접근/속성 가져오기

 

 getElementById("id 명")

• id는 항상 한 개만 가져올 수 있다.
• id는 유일해야함. 유일하지 않으면 html 표준에 어긋난 것이다.
• 만약에 id를 잘못 만들어서 여러 개 있다면 제일 처음 있는 것을 가져온다.

 

 

 getElementByClassName("class 명")

getElementByTagName("태그명")

• 반환 값이 2개 이상일 수 있다.
• HTMLCollections 객체에 저장된다.

 

 

 querySelector(선택자)

 querySelectorAll(선택자 or 태그)

• querySelecotor( ) 메서드는 한 개의 값만 반환
• querySelecotorAll( ) 메서드는 반환 값이 여러 개일 때 모두 반환 →  노드리스트로 저장됨
• id 이름 앞에는 해시기호(#), class 이름 앞에는 마침표(.), 태그는 기호 없이 태그명 사용

 

 

 innerText/HTML

• 웹 요소의 내용을 수정하는 프러퍼티
• innerText : 텍스트 내용 지정
• innerHTML : HTML 태그까지 포함해서 텍스트 내용 지정

 

 

 getAttribute("속성명")

setAttribute("속성명", "값")

• getAttribute( ) 메서드 : 속성 노드의 값을 가져옴
• setAttribute( ) 메서드 : 속성 노드의 값을바꿈

 

 

DOM에서 이벤트 처리

 

 DOM 요소에 함수 직접 연결하기

<script>
    var cup = document.querySelector("#cup");
    cup.onclick = function(){
    	alert("이미지를 클릭했습니다.");
	}
</script>

 

DOM 요소에 이벤트 처리기 함수를 직접 연결

 

 

 DOM 요소에 함수 이름을 사용해 연결하기

<script>
    var cup = document.querySelector("#cup");
    cup.onclick = changePic;
   	
    function changePic(){
    	cup.src = "image3.png";
	}
</script>

함수를 따로 정의해 놓고, DOM 요소에 함수 이름을 사용해 연결

이 때 함수 이름 다음에 괄호를 추가하지 않는다.

 

 

 DOM의 event 객체

웹 문서에서 이벤트 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 담긴 객체

 

 

<script>
    var cup = document.querySelector("#cup");
    cup.onclick = function(event) {
    	alert("이벤트 유형: " + event.type + ", 이벤트 발생 위치: " + event.pageX + "," + event.pageY);
</script>

 

 

 this

이벤트가 발생한 대상에 접근할 때 사용하는 예약어

 

<script>
    var cup = document.querySelector("#cup");
    cup.onclick = function(event) {
    	alert("클릭한 이미지 파일: " + this.src);
</script>

 

 

 addEventListener()

이벤트 객체를 사용해 이벤트 처리기 연결

 

<script>
    var cover = document.querySelector("#cover");
    cover.addEventListener("mouseover", changePic);
    cover.addEventListener("mouseout", originPic);
    
    function changePic() {
    	cover.src = "change.png"
    }
    function originPic() {
    	cover.src = "origin.png"
    }
</script>

 

 

 CSS 속성에 접근하기

// id가 desc인 요소의 글자를 파란색으로 변경
document.getElementByID("desc").style.color = "blue";

<script>
    var my = document.querySelector("#my");
    my.addEventListener("mouseover", function() {
    	my.style.color = "blue";
    });
</script>

 

 

DOM 노드 추가

 

 1. 요소 노드 만들기 - createElement()

var newP = document.createElement("p");

 

 

 

 2. 텍스트 노드 만들기 - createTextNode()

var txtNode = document.createTextNode("DOM은 document object model의 줄임말입니다.");

 

 

 3. 자식 노드 연결하기 - appendChild()

newP.appendChild(txtModel);
document.getElementById("info").appendChild(newP);

 

 

---

 

속성 값이 있는 새로운 요소 추가

1. 요소 노드 만들기 - createElement()

var newImg = document.createElement("img");

 

 

2. 속성 노드 만들기 - createAttribute()

var srcNode = document.createAttribute("src");

 

 

3. 속성 노드 연결하기 - setAttributeNode()

newImg.setAttributeNode(srcNode);

 

 

4. 자식 노드 연결하기 - appendChild()

document.getElementById("info").appendChild(newImg);

 

 

DOM 노드 삭제

노드를 삭제할 때는 부모 노드에서 자식 노들르 삭제해야 한다.

-> 노드를 삭제하려면 부모 노드부터 찾아야 한다.

 

 parentNode

현재 노드의 부모 노드에 접그해서 부모 노드의 요소 노드를 반환

노드.parentNode

 

 

 removeChild()

부모노드.removeChild(자식노드)