포스트

12. DOM

게시
By Kim Jung Wook 4 분읽는 시간

1) DOM(Document Object Model)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것
- HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때 각각의 태그, TEXT, COMMENT 등을 Node라고 한다

document : {
  DOCTYPE : html,
  HTML : {
    HEAD : {
      TITLE : { TEXT : "문서제목" },
      STYLE : {...},
      META : {...},
    },
    BODY : {
      H1 : { TEXT : "제목" , ATTRIBUTE : "속성" },
      COMMENT : { TEXT : "주석내용" },
      DIV : {...}
    }
  }
}

2) Node와 Element의 차이

1
2

Node : 태그(요소 노드), 속성, 주석, 내용(텍스트 노드) 등 모두 포함
Element : Node의 하위 개념. 요소 노드만을 표현

3) Node 확인하기

1
2
3
4
5
6
7
8
9
10
11
12

1) 부모
요소.parentNode : 요소의 부모 노드를 탐색해서 반환

2) 자식
요소.childNodes : 요소의 자식 노드를 모두 반환(NodeList 형태)
요소.firstChild : 첫 번째 자식 노드를 탐색해서 반환
요소.lastChild :마지막 자식 노드를 탐색해서 반환
요소.childNodes[인덱스] : 인덱스 번째 자식 노드를 탐색해서 반환

3) 형제
요소.previousSibling : 요소의 이전 형제 노드를 반환
요소.nextSibling : 요소의 다음 형제 노드를 반환

4) Element 확인하기

1
2
3
4
5
6
7
8

children : 자식 요소만을 모두 선택
parentElement : 부모 요소 선택

firstElementChild : 첫 번째 자식 요소 선택
lastElementChild : 마지막 자식 요소 선택

previousElementSibling : 이전 형제 요소 선택
nextElementSibling : 다음 형제 요소 선택

5) 요소 생성 및 추가

1
2
3
4
5
6
7
8

innerHTML을 이용한 요소 생성 및 추가
= innerHTML의 원리

1) 특정 요소의 내부 내용을 새로운 내용으로 덮어씌움 
(기존 내용이 사라지는 문제 발생)

2) 덮어싀워지는 새로운 내용을 단순 문자열을 추가하는 것이 아닌 HTML 요소가 포함되어 있으면 이를 해석 할 수 있도록 HTMLParser를 이용한다
(추가적인 해석을 진행하기 때문에 속도가 느림)
  • innerHTML을 이용한 요소 생성 및 추가
1
2
3

[html]
<button id="btn3">innerHTML로 생성</button>
<div class="area" id="div3"></div>

1
2
3
4

[css]
.area { width:400px; height:400px; border:1px solid black; }
.area > div { height:10%; box-sizing:border-box; 
            border:2px solid red; background-color:yellow; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

[js]
// innerHTML
const btn3 = document.getElementById("btn3");
const div3 = document.getElementBYId("div3");

let count3 = 1;

btn3.addEventListener("click", function(){
  if(count3 <= 10){
    const input = "<input type='text'>";

    div3.innerHTML += "<div>" + count3 + input + "</div>";

    count3++;
  }
}
  • createElement() 이용
1
2
3
4

[html]
DOM 요소 생성(document.createElement()) 및 추가
<button id="btn4">createElement()로 생성</button>
<div class="area" id="div4"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

[js]
// document.createElement("태그명");
const btn4 = document.getElementById("btn4");
const div4 = document.getElementById("div4");

let count4 = 1;

btn4.addEventListener("click", function(){
  if(count4 <= 10){
    const div = document.createElement("div");
    const input = document.createElement("input");

    // #div > div > input

    // div의 내용으로 count4 추가 후 1증가
    div.innerText = count4;
    count4++;

    // input을 div의 마지막 자식으로 추가
    div.append(input);

    div4.append(div);
  }
})
KH 학원 공부, JS
JS