Front/JavaScript
[JavaScript] NodeList(노드 리스트) 관련 / 노드의 부모, 자식 / 노드 생성, 수정, 삭제 / 불특정 노드 접근하기
시월해
2021. 4. 27. 17:28
getElementsByTagName(), getElementsByClassName() : 의 결과 값은 검색된 모든 노드를 NodeList 라는 객체에 담아서 반환이 됨. NodeList 는 자주 사용하는 배열과 비슷한 일종의 ArrayList 컬렉션 객체로 DOM 객체 중 하나임.
createElement() : 노드 생성 및 추가
createTextNode() : 텍스트 노드 생성 및 추가
appendChild() : 특정 태그의 자식 노드로 추가
insertBefore() : 특정 노드 이전에 노드 추가
NodeList 객체에서 제공하는 프로퍼티와 메서드
- length : 결과 값의 전체 갯수 정보가 담겨져 있음.
- item() : 결과 값을 항목별로 접근할 때 사용함.
- childNodes : 모든 자식 노드의 정보가 담겨져 있음.
- parentNode : 부모 노드의 정보가 담겨져 있음.
- previousSibling.previousSibling : 현 위치에서 이전 형제 노드
- nextSibling.nextSibling : 현 위치에서 이후 형제 노드
기본 뼈대
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="sample_page" class="page">
샘플 페이지(div, id=sample_page class=page)
<div id="header">
헤더 영역(div, id=header)
</div> <!-- id="header" end -->
<div id="content" class="sample_content">
콘텐트 영역(div, id=content class=sample_content)
<div>
JavaScript란?(div)
<p id="data_1">자바스크립트 Core(p, id=data_1)</p>
<p id="data_2">자바스크립트 BOM(p, id=data_2)</p>
<p id="data_3">자바스크립트 DOM(p, id=data_3)</p>
을 배운다는 것.
</div>
<div class="content_data">
JavaScript에서 배울 내용(div, class=content_data)
<p>1. JavaScript DOM(p)</p>
<p>2. JavaScript Ajax(p)</p>
</div> <!-- class="content_data" end -->
<div class="content_data">
JQuery에서 배울 내용(div, class=content_data)
<p>1. JQuery DOM(p)</p>
<p>2. JQuery Ajax(p)</p>
</div>
</div> <!-- id="content" class="sample_content" end -->
<div id="footer">
푸터 영역(div, id=footer)
</div> <!-- id="footer" end -->
</div> <!-- id="sample_page" class="page" end -->
</body>
</html>특정 태그의 n번째 노드에 접근하기
<script type="text/javascript">
// 문서에서 특정 태그 이름을 지닌 노드를 찾자.
onload = function() {
// 문서에서 태그 이름이 div인 노드를 찾아보자.
let divs = document.getElementsByTagName("div");
alert("문서 내의 div 태그 갯수 >>> " + divs.length);
for(let i=0; i<divs.length; i++) {
// item() : 찾은 노드에서 n번째 노드에 접근하는 메서드.
let div = divs.item(i);
div.style.border = "1px solid red";
}
}
</script>
자식 노드에서 특정 태그 이름을 반환받아 특정 위치의 노드 찾기
<script type="text/javascript">
// 특정 노드의 자식 노드에서 특정 태그 이름을 지닌 노드 찾기
onload = function() {
let divs = document.getElementsByTagName("div");
// 찾은 노드 가운데 3번째(2번째 인덱스) 노드를 찾아 보자.
let div2 = divs[2];
let div2Child = div2.getElementsByTagName("div");
for(let i=0; i<div2Child.length; i++) {
div2Child[i].style.border = "3px solid red";
}
}
</script>
특정 클래스가 적용된 노드 찾기
<script type="text/javascript">
// 문서에서 특정 클래스가 적용된 노드를 찾기
onload = function() {
let content =
document.getElementsByClassName("content_data");
alert("content_data 요소 갯수 >>> " + content.length);
for(let i=0; i<content.length; i++) {
content[i].style.border = "3px solid blue";
}
}
</script>
특정 ID를 가진 노드 찾기
<script type="text/javascript">
// 문서에서 특정 ID를 가진 노드를 찾기
onload = function() {
let header = document.getElementById("header");
let footer = document.getElementById("footer");
header.style.border = "3px solid red";
footer.style.border = "3px solid blue";
}
</script>
자식 노드 찾기
<script type="text/javascript">
// 문서에서 자식 노드를 찾기
onload = function() {
let page = document.getElementById("sample_page");
let nodes = page.childNodes;
alert("#sample_page의 자식 노드 갯수 >>> " + nodes.length);
// 자식 노드 중에서 첫번째 자식 노드 접근.
let firstChild = page.firstChild;
// 텍스트 노드는 스타일을 적용할 수 없음.
firstChild.style.border = "3px solid red";
// 자식 노드 중에서 첫번째 자식 노드 접근.
let lastChild = page.lastChild;
// 텍스트 노드는 스타일을 적용할 수 없음.
lastChild.style.border = "3px solid red";
}
</script>
텍스트 노드는 스타일을 적용할 수 없으므로 스타일이 변화하지 않는다.
부모 노드 찾기
<script type="text/javascript">
// 문서에서 부모 노드를 찾기
onload = function() {
// #header인 노드의 부모 노드 찾기
let header = document.getElementById("header");
// let parent = header.parentNode;
header.parentNode.style.border = "3px solid blue";
// [문제] id="data_1" 노드의 부모 노드를 찾아서 스타일을 적용해 보기.
// 스타일 : 3px solid red
let data1 = document.getElementById("data_1");
data1.parentNode.style.border = "3px solid red";
}
</script>
형제 노드 찾기
<script type="text/javascript">
// 문서에서 형제 노드를 찾기
onload = function() {
let content = document.getElementById("content");
// 내 위치에서 이전 형제 노드를 찾는 방법
let pre = content.previousSibling.previousSibling;
pre.style.border = "3px solid red";
// 내 위치에서 이후 형제 노드를 찾는 방법
let next = content.nextSibling.nextSibling;
next.style.border = "3px solid blue";
}
</script>
Document.createElement() 메서드를 이용하여 노드 생성 및 추가하기
<script type="text/javascript">
onload = function() {
// 1. 추가(p태그 추가)
let page = document.getElementById("sample_page");
// 기준 노드를 찾아 보자.
let firstChild = page.firstChild;
// <p> 태그를 동적으로 생성.
let pNode = document.createElement("p");
// 텍스트 노드도 동적으로 생성.
let textNode = document.createTextNode("추가내용1");
// p태그의 자식노드로 텍스트 노드를 추가.
pNode.appendChild(textNode);
pNode.style.border = "3px solid red";
page.insertBefore(pNode, firstChild);
// 2. 추가(div 태그 추가)
let content = document.getElementById("content");
let div1 = document.createElement("div");
let textNode1 =
document.createTextNode("생성할 노드가 많은 경우, ");
let span1 = document.createElement("span");
let textNode2 = document.createTextNode("어떤 방법을? ");
span1.appendChild(textNode2);
let textNode3 = document.createTextNode("사용해야 할까요?");
// div 태그에 자식노드로 텍스트 노드와 span태그를 추가해 주어야 한다.
div1.appendChild(textNode1);
div1.appendChild(span1);
div1.appendChild(textNode3);
div1.style.border = "3px solid blue";
// 생성된 div 태그를 content id의 윗쪽에 추가
page.insertBefore(div1, content);
// 3. 추가(p태그 추가)
let p2Node = document.createElement("p");
let textNode4 = document.createTextNode("추가내용2");
p2Node.appendChild(textNode4);
p2Node.style.border = "3px solid red";
page.appendChild(p2Node);
}
</script>
Node.cloneNode() 메서드를 이용하여 노드 생성
<script type="text/javascript">
onload = function() {
let page = document.getElementById("sample_page");
let first = page.firstChild;
let pNode = document.createElement("p");
let textNode = document.createTextNode("추가내용1");
pNode.appendChild(textNode);
pNode.style.border = "3px solid red";
page.insertBefore(pNode, first);
// pNode를 그대로 복사
let p2Node = pNode.cloneNode(true);
p2Node.firstChild.nodeValue = "추가내용2";
page.appendChild(p2Node);
}
</script>
노드 삭제
<script type="text/javascript">
// 문서에서 노드를 삭제하기
onload = function() {
// 지우려고 하는 노드가 포함된 부모 노드를 찾기.
let page = document.getElementById("sample_page");
// 지우려는 노드를 찾자.
let content = document.getElementById("content");
// 부모 노드의 removeChild() 메서드를 이용하면 됨.
page.removeChild(content);
}
</script>
노드 이동시키기
<script type="text/javascript">
// 노드 이동시키기
onload = function() {
// 이동시킬 노드를 찾아보자.
let header = document.getElementById("header");
// 이동 위치의 노드를 구해보자.
let content = document.getElementById("content");
// header를 content의 자식 노드로 이동
content.appendChild(header);
header.style.border = "3px solid blue";
}
</script>