[JavaScript] 문서 객체 모델 DOM

YEN·2022년 2월 27일
JavaScript자바스크립트
0

JavaScript

목록 보기
4/7
post-thumbnail

1. 문서 객체 모델 DOM

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

  • 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분을 동적으로 반응하게 하는 것이다.

    -> 문서의 모든 요소를 따로 제어할 수 있어야 하며 자바스크립트는 모든 정보 요소를 가져와 프로그래밍할 때 사용한다.

  • DOM은 웹 문서를 하나의 객체로 정의한다.

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

ex) 웹 문서의 전체: document, 삽입한 이미지: image 객체 -> DOM은 웹 문서와 그 안의 모든 요소를 객체로 인식하고 처리한다.

  • HTML로 작성한 웹 문서의 DOM을 HTML DOM이라고하며 XML 문서로 작성한 DOM을 XML DOM 이라고 한다.

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

2) DOM 트리

① HTML 요소의 계층 관게

  • HTML의 요소는 head, body 요소가 부모 요소이고, body 요소는 h1, img 자식 요소를 갖는다.

② DOM 트리

  • DOM은 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타내므로 h1의 요소의 내용인 'hello'는 h1의 자식이고, src와 alt 속성은 img 요소의 자식이 된다.

  • DOM 트리에서 사지가 갈라져 나간 항목을 노드 node 라고 한다.

  • DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다고 하여 루트 노드 root node 라고 한다.

  • 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다.

    -> 각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있으며 부모 노드에는 자식노드 또는 부모 노드가 같은 형제 노드도있다.

< DOM을 구성하는 기본 원칙 >

  • 모든 HTML 태그는 요소 노드이다.
  • HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드이다.
  • HTML 태그에 있는 속성은 자식 노드인 속성 노드이다.
  • 주석은 주석 노드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>DOM tree</title>
</head>
<body>
    <h1> hello!</h1>
    <img src="images/hello.jpg" alt="인사하는 이미지">
</body>
</html>
  • 웹 문서를 해석한 DOM 트리의 구조이며 DOM 트리를 그릴 수 있어야 자바스크립트를 사용하여 객체에 접근해서 원하는 부분을 수정할 수 있다.

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

1) DOM에 접근하기

종류설명
getElementById(id)id 명으로 접근한다.
getElementByClassName(class)class 명으로 접근하며 여러 요소가 배열 형태로 저장된다.
getElementByTagName(tag)tag 명으로 접근하며 여러 요소가 배열 형태로 저장된다.
querySelector()id 명이나 선택자를 사용하여 접근한다.
querySelectorAll()class 명이나 tag 명의 선택자를 사용하여 접근한다.
여러 노드가 노드 리스트 형태로 저장된다.

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

  • innerText 프로퍼티: 텍스트 내용을 표시한다.

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

<head>
    <button onclick="inntext()"> innertext로 표시하기 </button>
    <button onclick="innhtml()"> innerHTML로 표시하기 </button>
</head>
<body>
    <h1> 현재 시각: </h1>
    <div id="current"></div>
</body>
    <script>
        var now = new Date();

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

        function innhtml() {
            document.getElementById("current").innerHTML = "<em>" + now + "</em>";
        }
    </script>
  • innerHTML를 사용하여 em 태그의 기울여서 문구를 강조하여 현재 시각을 표시하는 것에 차이가 있다.

3) 속성 가져오기

  • getAttribute("속성명"): 속성에 접근할 때 사용한다.

  • setAttribute("속성명"): 속성의 값을 바꿀 때 사용한다.

    -> 속성값이 이미 있다면 새로운 속성값을 수정하고, 해당 속성이 없다면 속성과 속성값을 새로 추가한다.

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

1) addEventListener( ): 한 요소에 여러 이벤트 처리기를 연결하여 실행할 수 있다.

요소.addEventListener(이벤트, 함수, 캡처 여부);
  • 이벤트: 이벤트 유형을 지정한다.

-> 단, click과 keypress 처럼 on을 붙히지 않는다.

  • 함수: 이벤트가 발생하면 실행할 명령이나 함수를 지정하며 함수를 정의할 때는 event 객체를 인수로 받는다.

  • 캡처 여부: 이벤트를 캡처하는지 여부를 지정하며 기본값은 false이고 true와 false 중에서 선택한다.

    • true: 캡처링, false: 버블링

      -> 이벤트 캡처링: DOM의 부모 노드에서 자식 노드로 전달되는 것이다.

      -> 이벤트 버블링: DOM의 자식 노드에서 부모 노드로 전달되는 것이다.

  • 단순히 이벤트를 처리하는 함수라면 addEventListener( ) 메서드 안에서 함수 표현식으로 사용하는 경우가 좋다.

    -> 따로 다른 곳에서 다시 사용하는 함수가 아니라면 메서드 안에서 함수 표현식으로 사용한다.

ex) 마우스 포인터를 올려 이미지 바꾸기

<script>
   var cover = document.getElementById("cover");
   cover.addEventListener("mouseover", changePic);
   cover.addEventListener("mouseout", originPic);

   function changePic() {
     cover.src = "...";
   }

   function originPic() {
     cover.src = "...";
   }
</script>

-> 메서드 안에서 함수 선언하기

  • addEventListener( ) 메서드에서 changePic( )과 origunPic( ) 함수가 있던 자리에 함수 선언 부분을 그대로 옮기는데 함수명은 제외한다.
<script>
   var cover = document.getElementById("cover");
   cover.addEventListener("mouseover", function() {
   	 cover.src = "...";
   });
   
   cover.addEventListener("mouseout", function() {
     cover.src = "...";
   });
</script>

2) CSS 속성에 접근하기

document.요소명.style.속성명

ex) id가 hello인 요소의 글자색 파란색으로 바꾸기

document.getElementID("hello").style.color = "blue";

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

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

  • DOM에서 새로운 노드를 만들어 추가하거나 삭제할 때 사용한다.

  • querySelectorAll( ) 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있다.

<body>
    <h1> 노드 리스트 살펴보기 </h1>
    <ul id="itemList">
        <li> HTML </li>
        <li> CSS </li>
        <li> JavaScript </li>
    </ul>
</body>
  • 노드 리스트는 배열은 아니지만 매우 비슷하여 인덱스 번호로 특정 위치의 노드에 접근할 수 있다.

ex) li 노드 리스트 중에서 두 번째 노드 가져오기: document.querySelectorAll("li")[1] -> 결과 값: CSS

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

종류설명
createElement( )새로운 요소 노드를 만든다.
createTextNode( )새로운 텍스트 노드를 만든다.
appendChild( )텍스트 노드를 요소 노드의 자식으로 연결한다.
요소 노드를 DOM에 연결한다.

  • createElement( )

    -> 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드를 추가한 것은 아니다.

  • createTextNode( )

    -> 새로운 요소 노드를 만들었다면 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결하여야 하는데 텍스트 노드를 만드는 메서드이다.

  • appendChild( )

    -> 만든 새로운 노드와 텍스트 노드를 부모 노드와 자식 노드로 연결할 때 사용한다.

    -> 연결하는 노드는 자식 노드 중 맨 끝에 추가된다.

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

종류설명
createElement( )새로운 요소 노드를 추가한다.
createAttribute( )새로운 속성 노드를 추가한다.
속성값 지정하기속성값을 프로퍼티로 지정한다.
setAttributeNode( )속성 노드를 요소 노드의 자식으로 연결한다.
appendChild( )요소 노드를 DOM에 연결한다.

ex) 링크를 클릭하면 텍스트와 이미지 표시하기

<body>
    <div id="container">
        <h1> Studying DOM </h1>
        <a href="#" onclick="addContents(); this.onclick-'';"> more </a>
        <div id="info"></div>
    </div>
    <script>
        function addContents() {
            var newP = document.createElement("p");
            var txtNode = document.createTextNode("What is DOM");
            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 = "DOM tree example image"
            newImg.setAttributeNode(srcNode);
            newImg.setAttributeNode(altNode);

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

① createElement( ) 메서드: 새로운 p 요소와 img 노드를 만든다.

-> 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드가 추가된 것은 아니다.

② creatrTextNode( ) 메서드: 새로운 p 요소에 텍스트 노드를 자식 노드로 만든다.

-> 새롭게 만든 p 요소에 들어갈 텍스트 노드를 txtNode 변수에 저장하였다.

③ creatrAttribute( ) 메서드: img 요소는 src 속성을 사용하여 이미지 파일의 경로를 지정해야 되기 때문에 src와 alt 속성 노드를 만든다.

-> 속성 노드를 만든 후 속성값은 value 프로퍼티를 사용하여 지정한다.

④ creatrAttributeNode( ) 메서드: 새롭게 만든 속성 노드를 요소 노드에 자식으로 연결해준다.

-> 만약 추가할 속성이 요소 노드에 이미 들어 있다면 기존 속성 노드를 새 속성 노드로 대체한다.

-> newImg라는 새 이미지 요소를 만들고 srcNode와 altNode 속성 노드를 추가하여 img 요소에 자식으로 연결해주었다.

⑤ appendChild( ) 메서드: 자식 노드를 연결해준다.

-> 새로운 p 노드, 텍스트 노드, img 노드는 만들어지기만 한 상태이며 부모 노드와 자식 노드로 연결되지 않았으므로 이 메서드를 사용하여 연결해준다.

-> txtNode를 요소 노드 newP의 자식 노드로 연결하였고, newP 노드를 다시 < div id="info" > < /div >의 자식 노드에 연결하였다.

-> img 요소를 #info 자식 노드에 연결하였다.

4) 노드 삭제하기

  • 노드를 삭제할 때는 부모 노드에서 자식 노드를 삭제하여야 한다.

    -> 삭제해야할 노드가 있다면 반드시 부모 노드를 먼저 찾아야 하므로 노드를 삭제하는 메서드 외에 부모 노드를 찾는 프로퍼티가 필요하다.

종류설명
parentNode 프로퍼티DOM 트리의 노드는 바로 삭제할 수 없으므로 먼저 부모 노드에 접근하여야 한다.
이 프로퍼티는 현재 노드의 부모 노드에 접근해서 부모노드의 요소 노드를 반환한다.
노드.parentNode
removeChild( ) 메서드자식 노드를 삭제하는 역할을 한다.
부모노드.removeChild(자식노드)
profile
YEN
이전 포스트

[JavaScript] 자바스크립트와 객체

다음 포스트

[JavaScript] 자바스크립트 데이터 타입

0개의 댓글