📝 DOM(Document Object Model)
HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것
-> HTML 문서에 작성된 내용을 트리 구조(계층형으로 표현)로 나타냈을 때
각각의 태그, TEXT, COMMENT 등을 Node라고 한다.
- HTML의 트리 구조를 Javascript의 트리 구조로 치환
document : {
DOCTYPE : html,
HTML : {
HEAD : {
TITLE : { TEXT : "문서 제목" },
STYLE : {...},
META : {...}
} ,
BODY : {
H1 : { TEXT : "제목", ATTRIBUTE : "속성" },
COMMENT : {TEXT : "주석 내용"},
DIV : {...}
}
}
}📌 Node와 Element의 차이점
💡 Node
태그(요소 노드), 속성, 주석, 내용(텍스트 노드) 등을 모두 표현
💡 Element
Node의 하위 개념으로 요소 노드만을 표현
📌 Node 탐색하기
💡 요소.childNodes
요소의 자식 노드를 모두 반환
💡 parentNode
부모 노드 탐색
💡 firstChild
첫 번째 자식 노드 탐색
💡 lastChild
마지막 자식 노드 탐색
💡 부모요소.childNodes[인덱스]
중간에 존재하는 자식 노드 탐색
💡 previousSibling
이전 형제 노드 탐색
💡 nextSibling
다음 형제 노드 탐색
📌 Node 추가하기
💡 append("추가할 Node")
(append : (마지막에)덧붙이다)
부모 노드에 자식 노드를 추가하는 메소드
-> return 값을 반환하지 않음
🔎 코드로 살펴보기
- html
<ul id="test">
<!-- Node 확인 테스트 주석입니다. -->
<li id="li1">1번</li>
<li class="cls">2번</li>
<!-- 중간 주석 -->
<li style="background-color: yellow;">3번</li>
<li>
<a href="#">4번</a>
</li>
</ul>
<button id="btn1">확인하기</button>- js
// Node 확인하기
Node 확인하기
document.getElementById("btn1").addEventListener("click", function(){
// #test의 자식 노드를 모두 얻어오기
// - 요소.childNodes : 요소의 자식 노드를 모두 반환
const nodeList = document.getElementById("test").childNodes;
console.log(nodeList);
// 노드 탐색
// 1) 부모 노드 탐색 : parentNode
const li1 = document.getElementById("li1");
console.log(li1.parentNode);
// 부모 노드의 배경색 변경
li1.parentNode.style.backgroundColor = "skyblue";
// 부모 노드 마지막에 새로운 노드 추가(append : (마지막에)덧붙이다)
li1.parentNode.append("ABCD");
// 2) 첫 번재 자식 노드 탐색 : firstChild
console.log(document.getElementById("test").firstChild);
// 3) 마지막 자식 노드 탐색 : lastChild
console.log(document.getElementById("test").lastChild);
// 4) 중간에 존재하는 자식 노드 탐색 : 부모요소.childNodes[인덱스]
console.log(nodeList[11]);
nodeList[11].append("1234");
// 5) 이전 형제 노드 탐색 : previousSibling
// 다음 형제 노드 탐색 : nextSibling
console.log(nodeList[8].previousSibling);
console.log(nodeList[8].nextSibling);
// 노드 탐색을 위한 구문은 연달아서 사용 가능
console.log(nodeList[8].previousSibling.previousSibling.previousSibling);
})🔎 출력 화면
-
라이브 서버
-
콘솔창
📌 Element만 탐색하기
💡 children
자식 요소만 모두 선택
💡 parentElement
부모 요소 선택
💡 firstElementChild
첫 번째 자식 요소 선택
💡 lastElementChild
마지막 자식 요소 선택
💡 previousElementSibling
이전 형제 요소 선택
💡 nextElementSibling
다음 형제 요소 선택
🔎 코드로 살펴보기
- html
<button id="btn2">Element 확인하기</button>- js
// Element 탐색 확인하기
document.getElementById("btn2").addEventListener("click", function(){
// #test의 모든 자식 요소를 반환
const list = document.getElementById("test").children;
console.log(list);
// #test의 첫 번째 자식 요소
document.getElementById("test").firstElementChild.style.backgroundColor = "red";
// #test의 마지막 자식 요소
document.getElementById("test").lastElementChild.style.backgroundColor = "yellowgreen";
// #test의 자식 중(list) 2번 인덱스의 이전/다음 형제 요소
list[2].previousElementSibling.addEventListener("click", function(){
alert("2번 인덱스의 이전 형제 요소 클릭됨");
});
list[2].nextElementSibling.addEventListener("click", function(){
alert("2번 인덱스의 다음 형제 요소 클릭됨");
})
console.log( prevEl(list[2]) );
console.log( prevEl(prevEl(list[2])) );
console.log( nextEl(list[2]) );
})
// 이전 형제 요소 선택 함수
function prevEl(el){
return el.previousElementSibling;
}
// 다음 형제 요소 선택 함수
function nextEl(el){
return el.nextElementSibling;
}🔎 출력 화면
📌 innerHTML / DOM 요소 생성(createElement) 차이점
🔎 innerHTML을 이용한 요소 생성 원리
1) 특정요소 내부의 내용을 모두 삭제
2) 특정요소.innerHTML = "태그가 포함된 문자열";
특정 요소 내부에 일단은 문자열 형태 내용 추가
3) HTMLParser를 이용해서 태그를 해석
(내부 내용을 다 지우고 새로운 내용을 추가해서 처음부터 다시 해석)
🔎 문제점
1) 해석 속도가 느림
2) 기존 요소에 존재하던 효과/이벤트가 모두 사라져 버리는 문제가 있음
💡 document.createElement("태그명")
해당 태그 요소를 생성하여 반환
-> 생성된 element는 실제 DOM 구조에 연결된 것이 아니라, 개별적으로 존재하고 있다.
(생성은 되었으나, 실제 DOM 구조 속에 포함되지 않음)
element를 만든 후 DOM 구조 속에 포함시키기 위해서는 append()를 써야 한다.
🔎 코드로 살펴보기
- html
<button id="btn3-1">innerHTML</button>
<div class="area" id="div3-1">
<!-- <div id="temp">temp</div> -->
</div>
<hr>
<button id="btn3-2">createElement</button>
<div class="area" id="div3-2">
<div id="temp">temp</div>
</div>- js
let count1 = 1;
// innerHTML 버튼 클릭 시
document.getElementById("btn3-1").addEventListener("click", function(e){
const div = document.getElementById("div3-1"); // #div3-1 선택
if(count1 <= 10){
// 누적
div.innerHTML += "<div>" + count1 + "</div>";
count1++;
}
})
let count2 = 1;
// createElement 버튼 클릭 시
document.getElementById("btn3-2").addEventListener("click", function(){
const div = document.getElementById("div3-2"); // #div3-2 선택
// createElement를 이용해서 div 요소 생성
// document.createElement("태그명") : 해당 태그 요소를 생성하여 반환
const child = document.createElement("div");
if(count2 <= 10){
// 만들어진 div(child)에 내용 추가
child.innerHTML = count2;
count2++;
// #div3-2의 마지막 자식 요소로 추가하기(append)
div.append(child);
}
})
document.getElementById("temp").addEventListener("click", function(){
alert("temp");
})
🔎 출력 화면
- 'innerHTML' 버튼을 눌렀을 때
- 'createElement' 버튼을 눌렀을 때
풀스택 개발자 기록집 📁