[JS] 문서 객체 모델(DOM)

Preface

 

이번 장에선 문서 객체 모델의 정의와 사용법을 공부했다.

 

자바스크립트의 기본이 되고 가장 중요한 내용이라고 하는데, 생각보다 복잡하고 고민해야 할 부분도 많은 것 같다.

 

해당 책에 있는 내용만으론 부족한 것 같아 유튜브에서 다른 강의를 조금 더 찾아보려고 한다.

 

이번 장을 끝으로 해당 책의 내용은 모두 마무리했다.

 

나름 쉽고 빠르게 웹의 기본적인 내용을 학습한 것 같아 다행이다.

 

책의 마지막 부분에 웹 페이지 제작하기 프로젝트가 수록되어 있어 이번 글을 업로드한 후 제대로 된 웹 페이지를 만들어 볼 계획이다.

 

이후엔 생활코딩 사이트에서 깃과 깃허브에 관한 내용을 공부한 후, 개강 전까지 몇몇 사이트를 모방해볼까 한다.

→ 클론 코딩(clone coding)이라고 한다.

 

개강 후엔 자바 공부를 시작할 생각이다. 빠르면 개강 전에 시작할 수도..?

---

 

1. 문서 객체 모델 알아보기

 

 

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

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

2) 웹 문서 전체는 document 객체이다.

3) 각 요소에서 사용한 내용과 속성도 자식으로 나타낸다.

 

 

- DOM을 구성하는 기본 원칙

1) 모든 HTML 태그는 요소 노드이다.

2) HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드이다.

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

4) 주석은 주석 노드이다.

 

---

 

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

 

 

- getElementById( ) 메서드: 특정 id가 포함된 DOM 요소에 접근한다.

요소명.getElementById("id명")

 

 

- getElementByClassName( ) 메서드: 지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근한다.

→ 클래스 이름이 같은 DOM 요소들은 HTMLCollection 객체로 저장된다.

요소명.getElementByClassName("class명")

 

 

- getElementByTagName( ) 메서드: 지정한 태그명을 사용한 DOM 요소에 접근한다.

→ HTMLCollection 형태로 저장된다.

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

 

 

- DOM 트리의 텍스트, 속성 노드까지 제어하는 메서드

→ id 이름 앞에는 해시기호를, class 이름 앞에는 마침표를 붙이며, 반환값은 노드이거나 노드 리스트이다.

1) querySelector( ): 반환값이 하나일 때 사용

2) querySelectorAll( ): 여러 값이 한꺼번에 반환될 경우에 사용

 

 

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

1) innerText: 텍스트 내용을 표시한다.

2) innerHTML: HTML 태그까지 반영하여 표시한다.

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

 

 

- 속성 관련 메서드

1) getAttribute( ): 속성에 접근한다.

2) setAttribute( ): 접근한 속성의 값을 바꾼다.

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

 

---

 

3. DOM에서 이벤트 처리하기

 

 

- 이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결하고, 복잡한 경우엔 함수 이름을 사용해 연결한다.

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

<script>
		var cup = document.querySelector("#cup");  // id = cup인 요소를 가져옴
    cup.onclick = changePic;  // cup을 클릭하면 changePic 함수 실행

    function changePic() {
      cup.src = "images/cup-2.png";
		}
</script>

 

 

- DOM에는 이벤트 정보를 저장하는 event 객체가 있다.

→ 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야 한다.

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

 

 

- addEventListener( ) 메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있다.

→ 끝에 세미콜론을 꼭 붙여야 한다.

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

1) 이벤트: 함수 유형을 지정한다. (on을 붙이지 않고 쓴다.)

2) 함수: 이벤트가 발생하면 실행할 명령이나 함수를 지정한다. (event 객체를 인수로 받는다.)

3) 캡처 여부: true이면 캡처링, false이면 버블링한다.

→ 캡처링: DOM의 부모 노드에서 자식 노드로 전달되는 것 / 버블링: 캡처링의 반대

<script>
	var cover = document.getElementById("cover");
	cover.addEventListener("mouseover",changePic, false);
    cover.addEventListener("mouseout",originPic, false);
    
    function changePic() {
      cover.src = "images/easys-2.jpg";
    }
    function originPic() {
      cover.src = "images/easys-1.jpg";
    }
</script>

 

 

- CSS 속성에 접근하려면 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 적는다.

→ 속성명엔 하이픈을 사용하지 않고, 두 단어 이상일 땐 첫 글자를 대문자로 표기한다.

document.요소명.style.속성명

 

---

 

4. DOM에서 노드 추가/삭제하기

 

 

- 노드 리스트: 노드 정보를 여러 개 저장한 것

 

 

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

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

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

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

→ 자식 노드 중 맨 끝에 추가된다.

 

 

- 링크를 클릭하면 텍스트를 표시하는 프로그램

<script>
    function addP() {
      var newP = document.createElement("p");
      var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
      newP.appendChild(txtNode);
      document.getElementById("info").appendChild(newP);
    }
</script>

 

 

- 속성값이 있는 새로운 요소를 추가하는 단계

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

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

→ 속성값은 value 프로퍼티를 사용해서 지정한다.

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

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

 

 

- 링크를 클릭하면 텍스트와 이미지를 표시하는 프로그램

<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>

 

 

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

1) parentNode 프로퍼티: 현재 노드의 부모 노드에 접근해서 부모 노드의 요소를 반환한다.

2) removeChild( ) 메서드: 자식 노드를 삭제한다.

 

 

- 텍스트 필드에 입력한 값을 화면에 표시하고 해당 값을 누르면 삭제하는 프로그램

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Web Programming</title>
	<link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
  <div id="container">
    <h1>Web Programming</h1>
    <p>공부할 주제를 기록해 보세요</p>
    <p>공부가 끝난 것은 클릭해서 삭제할 수 있습니다.</p>
    <form action="">
      <input type="text" id="subject" autofocus>
      <button onclick="newRegister(); return false;">추가</button>
    </form>
    <hr>  
    <ul id="itemList"> </ul>  
  </div>

	<script>
    function newRegister() {
      var newItem = document.createElement("li");  // 요소 노드 추가 
      var subject = document.querySelector("#subject");  // 폼의 텍스트 필드
      var newText = document.createTextNode(subject.value);  // 텍스트 필드의 값을 텍스트 노드로 만들기
      newItem.appendChild(newText);  // 텍스트 노드를 요소 노드의 자식 노드로 추가

      var itemList = document.querySelector("#itemList");  // 웹 문서에서 부모 노드 가져오기 
      itemList.insertBefore(newItem, itemList.childNodes[0]);  // 자식 노드중 첫번째 노드 앞에 추가

      subject.value="";

      var items = document.querySelectorAll("li");  // 모든 항목 가져오기
      for(i=0; i<items.length; i++) {
        items[i].addEventListener("click", function() {  // 항목 클릭했을 때 실행할 함수
          if(this.parentNode)    // 부모 노드가 있다면 
            this.parentNode.removeChild(this);  // 부모 노드에서 삭제
        });
      }
    }
	</script>
</body>
</html>