교육 | 외부활동/JAVASCRIPT

KH_JAVASCRIPT_5_문서 객체 모델(DOM)

wn1331 2023. 1. 11. 20:11
반응형

문서 객체 모델이란

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

 - 웹 문서와 그 안의 요소를 '객체' 로 인식하고 처리함.

 ex) 웹 문서 전체는 document 객체, 삽입한 이미지는 image 객체

 

DOM 트리

 - 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것

 - 나무 형태가 되기 때문에 "DOM 트리" 라고 함.

 - 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목

 - 루트 노드(root node) : DOM 트리의 시작 부분(html)

 

DOM을 구성하는 원칙

 - 모든 html 태그는 요소 노드이다.

 - 웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트 노드

 - 태그의 속성은 요소 노드의 자식 노드인 속성 노드

 - 주석은 주석 노드

 

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

 

DOM 요소에 접근하기

 - 웹 문서에서 원하는 요소를 찾아가는 것을 "접근한다(access)" 고 함.

 

getElementById() 메서드

요소명.getElementById("id명");

getElementsByClassName() 메서드

요소명.getElementsByClassName("class명");

getElementsByTagName() 메서드

요소명.getElementsByTagName("태그명");

querySelector() 메서드, querySelectorAll() 메서드

 - querySelector() 메서드는 한 개의 값만 반환

 - querySelectorAll() 메서드는 반환 값이 여러 개일 때 모두 반환 -> 노드 리스트로 저장됨

 - id 이름 앞에는 해시 기호(#), class 이름 앞에는 마침표(.), 태그는 기호 없이 태그명 사용

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

innerText, innerHTML 프로퍼티

 웹 요소의 내용을 수정하는 프로퍼티

 - innerText : 텍스트 내용 지정

 - innerHTML : HTML 태그까지 포함해서 텍스트 내용 지정

요소명.innerText = 내용;
요소명.innerHTML = 내용;

 

getAttribute() 메서드, setAttribute() 메서드

 - getAttribute() 메서드 : 속성 노드의 값을 가져옴

 - setAttribute() 메서드 : 속성 노드의 값을 바꿈

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

 

DOM에서 이벤트 처리하기

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

 

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

(...생략...)
<img src = "images/cup-1.png" id = "cup">
........

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

 

함수 이름을 사용해 연결하기

 - 함수를 따로 정의해 놓았다면 DOM 요소에 함수 이름을 사용해 연결

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

 

 <img src = "images/cup-1.png" id="cup">
 .....
 
 <script>
 	var cup = document.querySelector("#cup");
    cup.onclick = changePic;
    
    function changePic(){
    	cup.src = "images/cup-2.png";
    }
 </script>

 

DOM의 event 객체

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

 

(...생략...)
	<img src="images/cup-1.png" id = "cup">
    .....

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

 

 

this

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

(...생략...)
	<img src="images/card.png" id="card">
	.....

<script>
	var card = document.querySelector("#card");
    card.onclick = function(event){
    	alert("");
    }
</script>

 

addEventListener() 메서드 사용하기

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

요소.addEventListener(이벤트, 함수, 캡쳐 여부);

 

CSS속성에 접근하기

 - 자바스크립트를 사용해 각 요소의 스타일을 자유롭게 수정할 수 있음

document.요소명.style.속성명

ex) id가 desc인 요소의 글자를 파란색으로 변경하려면

document.getElementById("desc").style.color = "blue";

 - color처럼 한 단어인 속성명은 그대로 사용한다.

 - background-color, borderradius 처럼 중간에 하이픈(-) 이 있는 속성은 backgroundColor나 borderRadius처럼 두 단어를 합쳐서 사용한다.

 - 이때 두 번째 단어의 첫 글자는 Color와 Radius처럼 대문자로 표시

 

DOM에서 노드 추가, 삭제하기

노드 리스트란

querySelectorAll() 메서드를 사용해 가져온 여러 개의 노드를 저장한 것

 

텍스트 노드를 사용하는 새로운 요소 추가하기

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

document.createElement(노드명)
let newP = document.createElement("p");

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

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

 

 

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

부모노드.appendChild(자식노드)
newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);

 

 

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

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

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

 

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

[기본형] document.createAttribute(속성명)

let srcNode = document.createAttribute("src");
let altNode = document.createAttribute("alt");
srcNode.value = "images/dom.jpg";
altNode.value = "돔 트리 예제 이미지";

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

[기본형] 요소명.setAttributeNode(속성노드)

newImg.setAttributeNode(srcNode);

 

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

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

 

전체 소스코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>DOM</title>
  <style>
    #container{
      width:500px;
      margin:10px auto;
      padding:20px;
    }
    #info {
      margin-top:20px;
    }
  </style>
</head>
<body>
  <div id="container">    
    <h1>DOM을 공부합시다</h1>
    <a href="#" onclick="addContents(); this.onclick='';">더 보기</a>    
    <div id="info"></div>
  </div>
  <script>
    function addContents() {
      var newP = document.createElement("p");
      var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
      newP.appendChild(txtNode);
      
      var newImg = document.createElement("img");
      var srcNode = document.createAttribute("src");
      var altNode = document.createAttribute("alt");
      srcNode.value = "images/dom.jpg";
      altNode.value = "돔 트리 예제 이미지";
      newImg.setAttributeNode(srcNode);
      newImg.setAttributeNode(altNode);

      document.getElementById("info").appendChild(newP);
      document.getElementById("info").appendChild(newImg);
    }
  </script>
</body>
</html>

 

노드 삭제하기

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

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

 

parentNode 프로퍼티

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

노드.parentNode

 

removeChild() 메서드

 - 자식 노드 삭제

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

 

반응형