주니어 기초 코딩공부/Javascript & jQuery

자바스크립트JavaScript 문서 객체 모델(DOM) 개념 및 DOM의 이벤트 처리 및 삭제 방법

jju_developer 2023. 1. 11. 21:21
728x90

안녕하세요 JJU_DEVELOPER입니다.

이번 시간에는 자바스크립트 문서 객체 모델(DOM)에 대해 알아보겠습니다.

자바스크립트는 웹 문서와 그 안에서 사용한 텍스트, 이미지, 표 등의 모든 요소를 각각 다른 객체로 인지하여 처리합니다.

이렇게 자바스크립트에서 웹 문서의 객체를 다루는 시스템을 문서객체 모델이라고 합니다.

 

<목차>

17-1 문서 객체 모델 알아보기
17-2 DOM 요소에 접근하고 속성 가져오기
17-3 DOM에서 이벤트 처리하기
17-4 DOM에서 노드 추가, 삭제하기

 

▼▼▼[지난 시간]▼▼▼

 

자바스크립트JavaScript 내장 객체, 브라우저와 관련된 객체 알아보기

안녕하세요 JJU_DEVELOPER입니다. 이번시간에는 javascript 에서 말하는 객체 대한 설명입니다~! 목차 16-1 객체 알아보기 16-2 자바스크립트와 내장 객체 16-3 브라우저와 관련된 객체 16-1 객체 알아보기

jju240.tistory.com

 

17-1 문서 객체 모델 알아보기

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다. 

기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다.

 

DOM은 원본 HTML 문서의 객체 기반 표현 방식입니다. 

둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점입니다.


DOM의 개체 구조는 “노드 트리”로 표현됩니다. 

하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어져 있기 때문입니다. 

 

이 케이스의 경우, 루트 요소인 <html> 은 “부모 줄기”, 루트 요소에 내포된 태그들은 “자식 나뭇가지” 그리고 요소 안의 콘텐츠는 “잎”에 해당합니다.

 

DOM은 HTML 문서에 대한 인터페이스입니다. 

첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.


DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.
<차이점>
1. 항상 유효한 HTML 형식입니다.
2. 자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.
3. 가상 요소를 포함하지 않습니다. (Ex. ::after)
4. 보이지 않는 요소를 포함합니다. (Ex. display: none)

 

 

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

 

 

 

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

웹 문서에서 원하는 요소를 찾아가는 것을 “접근한다(access)”고 합니다.

 

1. getElementById( ) 메서드 기본형 요소명.getElementById("id명")

아이디를 선택하여 해당 아이디를 찾고,
그 안에있는 메소드(프로퍼티)를 실행합니다.
2. getElementsByClassName( ) 메서드 기본형 요소명.getElementsByClassName("class명")

• 반환 값이 2개 이상일 수 있음
• HTMLCollection 객체에 저장됨
3. getElementsByTagName( ) 메서드 기본형 요소명.getElementsByTagName("태그명")

• 반환 값이 2개 이상일 수 있음
• HTMLCollection 객체에 저장됨
4. querySelector( ) 메서드

5. querySelectorAll( ) 메서드		 document.querySelector() : 일치하는 가장 첫 번째 것만 반환.

document.querySelectorAll() : 일치하는 모든 요소의 NodeList 반환.

기본형 노드.querySelector(선택자), 노드.querySelectorAll(선택자 또는 태그

)
  • DOM트리의 텍스트, 속성 노드까지 자유롭게 제어할 때 사용. id 선택자처럼 반환값이 하나라면 querySelector() 메서드를 사용하고,

    class 선택자나 태그 이름을 사용하여 여러 값이 한꺼번에 반환될 경우에는 querySelecorAll() 메서드를 사용.
  • 반환값은 노드이거나 노드 리스트(node list)임.

6. setAttribute( ) 메서드

 기본형  setAttribute("속성명", "값")

 

innerText, innerHTML 프로퍼티

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


1. innerTex
function inntext(){
            document.getElementById("current").innerText = now;
        }

2. innerHTML
function innhtml() {
            document.getElementById("current").innerHTML = "<em>" + now + "</em>";
        }
 
예시)
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200" onclick="displaySrc()">
    <script>
        function displaySrc() {
            let cup = document.querySelector("#cup");
            alert("이미지 소스 : " + cup.getAttribute("src"));
        }  
    </script>

  //getAttribute : id가 cup인 src의 값을 가져와라

 

즉, 웹 페이지의 이미지를 누르게 되면,

지정해 놓은 이미지의 링크가 팝업으로 뜨게 되는 것입니다.

 

17-3 DOM에서 이벤트 처리하기

17-3-1 DOM 요소에 함수 직접 연결하기
DOM 요소에 이벤트 처리기 함수를 직접 연결

이벤트 핸들러를 function()으로 정의

  <script>
    let jjang = document.querySelector("#jjang");
    jjang.onclick = function () {
      alert("짱구를 클릭했습니다.");
    }
  </script>
 
이렇게 이미지에 마우스 클릭을 하면 바로 function이 실행됩니다.
-> 익명함수

 

17-3-2 함수 이름을 사용해 연결하기
• 함수를 따로 정의해 놓았다면 DOM 요소에 함수 이름을 사용해 연결하시면 됩니다.

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

<body>
  <div id="container">
    <img src="images/day.jpg" id="day">  
  </div>

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

    function changePic() {
      cup.src = "images/night.jpg";
    }
  </script>
</body>

 

이렇게 이미지를 한번 클릭하면 다른 이미지로 변신하게 됩니다.

 

17-3-3 querySelector( )  event.pageX, event.pageY 예시

    <script>
        let cup = document.querySelector("#cup");  // id = cup인 요소를 가져옴
        cup.onclick = function(event){//이 event는 클릭한 이벤트 이다.
            alert("이벤트 유형: "+event.type+", 이벤트 발생위치: "+ event.pageX+","+event.pageY);
        }
    </script>

pageX: 현재 문서 기준으로 이벤트가 발생한 가로 위치를 반환합니다.

pageY: 현재 문서 기준으로 이벤트가 발생한 세로 위치를 반환합니다.

 

 

17-3-4 DOM의 event 객체

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

 

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

 

17-3-6 addEventListener( ) 메서드 사용하기
지금까지는 하나의 요소의 한 이벤트 처리기만 연결할 수 있었습니다.

하지만 다음과 같이 addEventListener( ) 메서드와 이벤트 객체를 사용하면,

한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있습니다.

 

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

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

위 코드는 마우스를 위로 올릴 때 이미지가 변경되도록 자바스크립트 코드가 되어있는 것입니다.

 

 

17-3-7 CSS 속성에 접근하기

자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있습니다.

자바스크립트에서는 각 요소의 스타일을 자유롭게 수정할 수 있으므로, 웹문서에서 다양한 효과를

만들 수 있습니다.

 

기본형: document. 요소명. style. 속성명

 

    <script>
        let myRect = document.querySelector("#rect");
        myRect.addEventListener("mouseover", function() {  // mouseover 이벤트 처리
            myRect.style.backgroundColor = "pink";  // myRect 요소의 배경색
            myRect.style.borderRadius = "50%";  // myRect 요소의 테두리 둥글게 처리
        });
        myRect.addEventListener("mouseout", function() {  // mouseout 이벤트 처리
            myRect.style.backgroundColor = "";  // myRect 요소의 배경색 지우기
            myRect.style.borderRadius = "";  // myRect 요소의 테두리 둥글게 처리 안 함
        });
    </script>

자바스크립트에서 요소를 선택하여 style의 속성 값을 지정해 값을 변경할 수 있는 것을 볼 수 있습니다.

 

이렇게 자바스크립트를 이용하면 다양한 처리가 가능한 것을 볼 수 있습니다~!

 

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

17-4-1 노드 리스트란
querySelectorAll( ) 메서드를 사용해 가져온 여러 개의 노드를 저장한 것입니다.

 

예를 들면 3개의 리스트가 있고 얘 내들을 한 번에 값을 가져오고 싶을 때 사용합니다.

리스트 아이템으로 되어있는 노드를 전부 가져와 배열 형태로 저장합니다.

    <ul id="itemList">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
 

 

17-4-2 텍스트 노드를 사용하는 새로운 요소 추가하기
1. 요소 노드 만들기 – createElement( ) 메서드

DOM에 새로운 요소를 추가할 때 가장 먼저 할 일은 요소 노드를 만드는 것입니다.

하지만 createElement() 메서드는 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드를 추가한 것이 아닙니다.

이제 <p> 태그의 내용에 해당되는 텍스트 노드도 만들어야겠죠~?

 

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

새로운 노드 요소를 만들었다면, 그다음은 내용을 담는 텍스트 노드를 자식노드로 만들어 연결해야 합니다.

텍스트 노드를 만드는 메서드는  createTextNode( )입니다.

 

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

기본형: 부모노드. appendChild(자식노드) 

 

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

 

1. p태그를 createElement 하고

2. txtNode에 넣을 텍스트 작성해서 넣고

3. appendChild 해서 작성한 텍스트를 넣어줍니다.

 //<p>DOM은 Document Object Model의 줄임말입니다. </p>

 

 

그렇다면!!! 속성 값이 있는 새로운 요소 추가할 수 있겠죠?

더 보기 링크를 클릭하면 텍스트와 함께 이미지를 표시할 수 있습니다.

 

첫 페이지, 더보기 누르기 전

더보기 클릭 후 변화-->

doit 자바스크립트 책

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

 

.

17-4-3 노드 삭제하기!!!

노드를 삭제할 때는 부모 노드에서 자식 노드를 삭제해야 한다
-> 노드를 삭제하려면 부모 노드부터 찾아야 함

 

parentNode 프로퍼티
현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환

기본형: 노드.parentNode

 

removeChild( ) 메서드
자식 노드 삭제

기본형: 부모노드.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() {
      let newItem = document.createElement("li");  // 요소 노드 추가
      let subject = document.querySelector("#subject");  // 폼의 텍스트 필드
      let newText = document.createTextNode(subject.value);  // 텍스트 필드의 값을 텍스트 노드로 만들기
      newItem.appendChild(newText);  // 텍스트 노드를 요소 노드의 자식 노드로 추가

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

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

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

      subject.value="";
    }
  </script>

이뜻은 쉽게 말하면,

    <ul id="itemList">
      <li>javascrip</li>
      <li>db</li>
    </ul>  

이렇게 처음에 db를 넣고 두번째에 javascript를 넣었다고 치면,

저렇게 위로 올라가는 형태가 되도록 넣는다는 뜻 입니다.

그럼 이런 형태가 됩니다.

 

이제 추가한 요소를 클릭하면 삭제되는 코드를 짜볼까요?

 

이제 짱구를 클릭해서 지워보겠습니다.

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

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

      subject.value="";

      let items = document.querySelectorAll("li")
      //리스트를 다 찾고 그걸 items에 넣는다.
      for(i=0;i<items.length;i++){
        items[i].addEventListener("click",function(){
          //각각을 클릭했을때 이벤트 발생하기!
          if(this.parentNode)
          //this는 리스트 아이템을 뜻합니다.
          this.parentNode.removeChild(this);
        });
      }
    }
</script>

     <removeChild 핵심 코드>

let items = document.querySelectorAll("li")
//리스트를 다 찾고 그걸 items에 넣는다.
 
for(i=0;i<items.length;i++){
items[i].addEventListener("click",function(){
//각각을 클릭했을때 이벤트 발생하기!
 
if(this.parentNode)
//this는 리스트 아이템을 뜻합니다.
 
this.parentNode.removeChild(this);
//지금 누른 this를 지워라!!
  });
}

 

 

 

그럼 지금까지 자바스크립트에서의 문서 객체 모델(DOM) 개념 및 DOM의 이벤트 처리 및 삭제 방법에 대한

설명이었습니다.

 

참고 서적: DoIt 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석

 

오늘도 수고 많으셨습니다~!

728x90