728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<style>
.area{
width:400px;
height: 400px;
border: 1px solid black;
}
.area >div{
width:100%;
height:10%;
box-sizing:border-box;
border:2px solid green;
background-color: yellow;
}
</style>
</head>
<body>
<h1>DOM(Document Object Model)</h1>
<pre>
HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것
-> HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때
각각의 태그, TEXT, COMMENT 등을 Node라고 한다.
document : {
DOCTYPE : html,
HTML : {
HEAD : {
TITLE : { TEXT : "문서 제목" },
STYLE : {...},
META : {...}
} ,
BODY : {
H1 : { TEXT : "제목", ATTRIBUTE : "속성" },
COMMNET : {TEXT : "주석 내용"},
DIV : {...}
}
}
}
</pre>
<hr>
<h1>Node 확인하기</h1>
<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>
<hr>
<h1>Node와 Element 차이</h1>
<pre>
Node : 태그(요소 노드), 속성, 주석, 내용(텍스트 노드) 등을 모두 표현
Element : Node의 하위 개념으로 요소 노드만을 표현
[Element만 탐색하는 방법]
children : 자식 요소만 모두 선택
parentElement : 부모 요소 선택
firstElementChild : 첫 번째 자식 요소 선택
lastElementChild : 마지막 자식 요소 선택
previousElementSibling : 이전 형제 요소 선택
nextElementSibling : 다음 형제 요소 선택
</pre>
<button id="btn2">Element 확인하기</button>
<hr>
<h2>innerHTML / DOM 요소 생성(createElement) 차이점</h2>
<pre>
- innerHTML을 이용한 요소 생성 원리
1) 특정요소 내부의 내용을 모두 삭제
2) 특정요소.innerHTML = "태그가 포함된 문자열"; <br>
특정 요소 내부에 일단은 문자열 형태 내용 추가
3) HTMLParser를 이용해서 태그를 해석
(내부 내용을 다 지우고 새로운 내용을 추가해서 처음부터 다시 해석)
-> 문제점
1) 해석 속도가 느림
2) 기존 요소에 존재하던 효과 / 이벤트가 모두 사라져 버리는 문제가 있음
</pre>
<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>
<script src="js/12_DOM.js"></script>
</body>
</html>
//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="orange";
// 부모노드 마지막에 새로운 노드 추가(append : (마지막에)덧붙이다)
li1.parentNode.append("ABCD");
// 2) 첫 번째 자식 노드 탐색 : firstChild
console.log(document.getElementById("test").firstChild);
// 3) 마지막 자식 노드 탐색 : lasstChild
console.log(document.getElementById("test").lastChild); //추가한 ABCD
// 4) 중간에 존재하는 자식 노드 탐색 : 부모요소.childeNodes[인덱스]
console.log(nodeList[9]);
console.log(nodeList[11]);
nodeList[11].append("1234");
// 5) 이전 형제 노드 탐색 : previouSibling
// 다음 형제 노드 탐색 : nextSibling
console.log(nodeList[9].previousSibling);
console.log(nodeList[8].nextSibling);
//노드 탐색을 위한 구문은 연달아서 사용 가능
console.log(nodeList[8].previousSibling.previousSibling.previousSibling);
})
//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="green";
//#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[1]));
})
// 이전 형제 요소 선택 함수
function prevEl(el){
return el.previousElementSibling;
}
// 다음 형제 요소 선택 함수
function nextEl(el){
return el.nextElementSibling;
}
//innerHTML 버튼 클릭 시
let count = 1;
document.getElementById("btn3-1").addEventListener("click", function(){
const div3 = document.getElementById("div3-1");
if(count<=10){
div3.innerHTML+="<div>" + count + "</div>";
count++;
}
})
let count2 =1;
// createElement 버튼 클릭 시
document.getElementById("btn3-2").addEventListener("click",function(){
const div = document.getElementById("div3-2");
//createElement를 이용해 div 요소 생성
//document.createElement("태그명") : 해당 태그 요소를 생성하여 반환
const child = document.createElement("div"); //div 생성 o, 화면 배치 x
if(count2 <=10){
//만들어진 div(child)에 내용 추가
child.innerText =count2;
count2++;
// #div3-2의 마지막 자식 요소로 추가(append)
div.append(child);
}
})
document.getElementById("temp").addEventListener("click",function(){
alert("temp");
})
728x90
반응형