Fairy ' s

[JavaScript] DOM 객체 본문

Study/JavaScript

[JavaScript] DOM 객체

berafairy 2023. 4. 2. 19:30

DOM

  • 자바스크립트 같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서를 체계적으로 정리하는 방법
  • 웹 문서를 하나의 객체로 정의하고, 웹 문서를 이루는 텍스트나 이미지, 표 등 모든 요소도 각각 객체로 정의한다.
  • ex. 웹 문서 전체 : document 객체, 웹 문서에 삽입된 이미지 : image 객체 등
  • 웹 문서 객체들도 프로퍼티와 메서드를 가지고 있다.

 

DOM 트리

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>DOM Tree 알아보기</title>
</head>
<body>
    <h1>Do it!</h1>
    <img src="images/doit.jpg" alt="공부하는 이미지">
</body>
</html>

위의 html 소스를 아래와 같은 트리 계층 구조로 나타낼 수 있다.

 

DOM 활용

 

DOM 트리와 노드

  • 모든 HTML 태그는 요소(element) 노드가 된다.
  • HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드가 된다.
  • HTML 태그에 있는 속성은 모두 자식 노드인 속성(attribute) 노드가 된다.
  • 주석은 주석(comment) 노드가 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>DOM TREE 알아보기</title>
</head>
<body>
    <h1>Do it!</h1>
    <img src="images/doit.jpg" alt="공부하는 이미지>
</body>
</html>

노드별로 구성한 DOM 트리

노드 리스트

<h1>노드 리스트</h1>
<p>HTML</p>
<p>CSS</p>
<p>Javascript</p>

<script>
    /* #1 */ document.querySelectorAll("p")
    // 문서에 있는 p요소를 모두 가져온다.
    /* #2 */ document.querySelectorAll("p")[1]
    // 특정 요소 가져오기 (인덱스 1)
</script>

결과 #1

▼ NodeList(3) [p, p, p]
    ▶ 0: p
    ▶ 1: p
    ▶ 2: p
         length: 3
    ▶ [[Prototype]]: NodeList

결과 #2

▼ NodeList(3) [p, p, p]
document.querySelectorAll("p")[1]
    <p>CSS</p>

내용이 있는 텍스트 노드 추가

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

  • let newP - document.createElement("p")
  • <p> ... </p> 추가
  • 새로 추가한 p 요소 노드 ↓
element
p

 

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

  • let textNode = document.createTextNode("TypeScript")
  • "TypeScript" 추가
  • 새로 추가한 텍스트 노드 ↓
text
TypeScript

 

3. 자식 노드 연결하기 : appentChild()

  • netP.appentChile(textNode)
  • 텍스트 노드를 p 요소에 연결한다.
  • 텍스트 노드와 p 요소를 연결한 뒤에는 body와도 연결 해준다.
    - document.body.appendChile(newP)
element text
p TypeScript

 

기존의 노드 앞에 새 요소 추가 : insertBefore()

let tsNode = document.createElement("p")
let tsTextNode = document.createTextNode("TypeScript")
tsNode.appendChile(tsTextNode)
// p 요소 노드와 text 노드를 생성해서 두 노드를 연결한 상태

let basisNode = document.querySelectAll("p")[0]
// 첫 번째 p 요소를 기준 노드로 정한다.
document.body.insertBefore(tsNode, basisNode)
// 기준 노드의 앞에 tsNode를 추가한다.

노드 삭제하기

remove()

heading = document.querySelector("h1")
// querySelector로 h1 태그를 선택한다.

heading.remove()
// heading에서 선택한 요소가 삭제된다.

노드.parentNode

document.querySelector("h1").parentNode
// 다음 명령어를 통해 부모 노드를 찾을 수 있다.

부모노드.removeChild()

const items = document.querySelectoyAll("li");
// 모든 li 항목 선택

for(item of items) { // item은 items 노드 리스트의 li를 가리킨다.
    item.addEventListener("click", function() { // 항목을 클릭했을 때 실행할 함수
        this.parentNode.removeChild(this); // 부모 노드에서 삭제
    });
}
  • this를 사용할 때에는 이벤트 리스너에서 function() { ... } 에 this를 사용하면,
    this는 이벤트가 발생한 노드를 가리킨다. 즉, 목록의 항목중 첫 번째 항목을 클릭하면 this는 첫 번째 항목이 된다.
  • 하지만 아래 소스 처럼 화살표 함수를 사용하게 되면 this는 window 객체를 가리킨다.
    window 객체는 DOM의 최상위 객체이므로 클릭한 대상을 this라는 예약어로 사용하려면,
    화살표 함수가 아닌 익명 함수 형식으로 지정해야한다.
for(item of items) {
    item.addEventListener("click", () => {
        this.parentNode.removeChild(this);
    });
}

DOM 구조 활용

p 요소에 삭제 버튼이 들어있는 span 요소를 작성해 span 요소를 클릭할 시 p요소를 삭제하는 소스를 작성해보자.

const buttons = document.querySelectAll("p > span")
// 모든 삭제 버튼을 가져온다.

for(let button of buttons) {
    button.addEventListener("click", function () {
    // 항목을 클릭했을 때 실행할 함수
        this.parentNode.remove(this);
        // 부모 노드(<p>)에서 삭제한다. 
    });
}

 

저작자표시 비영리 변경금지

'Study > JavaScript' 카테고리의 다른 글

[JavaScript] 객체 만들기  (0) 2023.04.03
[JavaScript] 내장 객체  (0) 2023.04.02
[JavaScript] Event 객체  (0) 2023.03.26
[JavaScript] 함수  (0) 2023.03.24
[JavaScript] 기초  (0) 2023.03.22
'Study/JavaScript' Related Articles more
Comments