[Javascript DOM] DOM Manipulation(DOM 조작하기)
2020. 10. 29. 01:12ㆍTech Article/Javascript
Proclaim
tistory에서는 hash link가 지원되지 않는 것 같습니다. 따라서 hash link로 편하게 이동하기 위해서 gist에 같은 내용을 올려두었습니다.
DOM Manipulation(DOM 조작하기) and Javascript
DOM의 element를 선택하고 조작하는 방법을 알아본다. document의 Node 및 Element의 method에 대해 알아보고, 간단한 예제로 실습해봅니다.
1. dom element를 선택하기
2. 선택한 element의 인접 element(혹은 node)를 선택하기
- parentNode
- parentElement
- childNodes
- firstChild
- firstElementChild
- lastChild
- lastElementChild
- nextSibling
- nextElementSibling
- previousSibling
- previousElementSibling
3. dom element(혹은 node)를 새로 생성 및 배치하기
4. codepen Example
index.html
[GO TO TOP]
DOM 조작 예제는 아래 html 파일을 base로 진행하였습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous"
/>
<title>Item Lister</title>
</head>
<body>
<header id="main-header" class="bg-success text-white p-4 mb-3">
<div class="container">
<h1 id="header-title">
Item Lister
</h1>
</div>
</header>
<div class="container">
<div id="main" class="card card-body">
<h2 class="title">Items</h2>
<ul id="items" class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
</ul>
</div>
</div>
<script src="dom.js"></script>
</body>
</html>Preview HTML
Item Lister
Items
- Item 1
- Item 2
- Item 3
- Item 4
[GO TO TOP] / [GO TO HTML]
dom element를 선택하는 방법
DOM에서 element를 선택하는 방법을 알아보겠습니다.
참고: getElementById의 경우 Element 단수이고, getElementsByClassName, getElementsByTagName는 여러개 존재가 가능하기 때문에 Elements이다.
getElementById
console.log(document.getElementById("header-title"));
var headerTitle = document.getElementById("header-title");
var header = document.getElementById("main-header");
console.log(headerTitle);
headerTitle.textContent = "Hello";
headerTitle.innerText = "Goodbye";
console.log(headerTitle.innerText);
headerTitle.innerHTML = "<h3>Hello</h3>";
header.style.borderBottom = "solid 3px #000";getElementsByClassName
var items = document.getElementsByClassName("list-group-item");
console.log(items);
console.log(items[1]);
items[1].textContent = "Hello 2";
items[1].style.fontWeight = "bold";
items[1].style.backgroundColor = "yellow";
// error: items는 array이다.
items.style.backgroundColor = "#f4f4f4";
//list에 모두 색깔을 넣어주려면 아래처럼 for문 사용
for (var i = 0; i < items.length; i++) {
items[i].style.backgroundColor = "#f4f4f4";
}getElementsByTagName
var li = document.getElementsByTagName("li");
console.log(li);
console.log(li[1]);
li[1].textContent = "Hello 2";
li[1].style.fontWeight = "bold";
li[1].style.backgroundColor = "yellow";
//error
//items.style.backgroundColor = '#f4f4f4';
for (var i = 0; i < li.length; i++) {
li[i].style.backgroundColor = "#f4f4f4";
}querySelector
var header = document.querySelector("#main-header");
header.style.borderBottom = "solid 4px #ccc";
var input = document.querySelector("input");
input.value = "Hello World";
var submit = document.querySelector('input[type="submit"]');
submit.value = "SEND";
var item = document.querySelector(".list-group-item");
item.style.color = "red";
var lastItem = document.querySelector(".list-group-item:last-child");
lastItem.style.color = "blue";
var secondItem = document.querySelector(".list-group-item:nth-child(2)");
secondItem.style.color = "coral";querySelectorAll
var titles = document.querySelectorAll(".title");
console.log(titles);
titles[0].textContent = "Hello";
var odd = document.querySelectorAll("li:nth-child(odd)");
var even = document.querySelectorAll("li:nth-child(even)");
for (var i = 0; i < odd.length; i++) {
odd[i].style.backgroundColor = "#f4f4f4";
even[i].style.backgroundColor = "#ccc";
}[GO TO TOP] / [GO TO HTML]
선택한 element의 인접 element(혹은 node)를 선택하는 방법
인접한 element(혹은 node) 선택 예제
우선 var itemList = document.querySelector('#items')으로 <ul> element를 선택하였다고 가정하겠습니다.
parentNode
console.log(itemList.parentNode);
itemList.parentNode.style.backgroundColor = "#f4f4f4";
console.log(itemList.parentNode.parentNode.parentNode);parentElement
console.log(itemList.parentElement);
itemList.parentElement.style.backgroundColor = "#f4f4f4";
console.log(itemList.parentElement.parentElement.parentElement);childNodes
console.log(itemList.childNodes);
console.log(itemList.children);
console.log(itemList.children[1]);
itemList.children[1].style.backgroundColor = "yellow";firstChild
console.log(itemList.firstChild);firstElementChild
console.log(itemList.firstElementChild);
itemList.firstElementChild.textContent = "Hello 1";lastChild
console.log(itemList.lastChild);lastElementChild
console.log(itemList.lastElementChild);
itemList.lastElementChild.textContent = "Hello 4";nextSibling
console.log(itemList.nextSibling);nextElementSibling
console.log(itemList.nextElementSibling);previousSibling
console.log(itemList.previousSibling);previousElementSibling
console.log(itemList.previousElementSibling);
itemList.previousElementSibling.style.color = "green";[GO TO TOP] / [GO TO HTML]
dom element(혹은 node)를 새로 생성하는 방법
기존 dom에 추가로 element를 생성하여 삽입하는 방법입니다.
element를 생성하고 attribute, class, id를 assign할 수 있습니다.
createElement
// Create a div
var newDiv = document.createElement("div");
// Add class
newDiv.className = "hello";
// Add id
newDiv.id = "hello1";
// Add attr
newDiv.setAttribute("title", "Hello Div");createTextNode/appendChild
// Create text node
var newDivText = document.createTextNode("Hello World");
// newDivText를 newDiv의 마지막에 추가한다.
// 참고: 맨앞에 추가하는 것은 newDiv.prepend(newDivText)
newDiv.appendChild(newDivText);insertBefore
//create div element and insert before
//div를 새로 만들고, container class내에 h1 앞에 넣는다.
var container = document.querySelector("header .container");
var newDiv = document.createElement("div");
var h1 = document.querySelector("header h1");
container.insertBefore(newDiv, h1);Examples
간단한 예제#1
https://codepen.io/stefan-cho/pen/Vwjyoao
- 아래 codepen에서 node의 인접 node를 선택하기
- 새로운 Element를 만들어 list의 처음과 끝에 추가하기
- node생성하고 insertBefore으로 특정node위치 앞에 배치시키기
Reference Link
- Youtube :Traversy Media DOM#1
- Youtube :Traversy Media DOM#2
'Tech Article > Javascript' 카테고리의 다른 글
| [Redux] Redux의 간단한 사용법 (codepen 예제 포함) (0) | 2021.04.18 |
|---|---|
| [Javascript] this에 대한 이해와 call(), apply(), bind() 메소드 사용방법 (0) | 2020.11.01 |
| [Javascript DOM] The DOM (Document Object Model)이란? (0) | 2020.10.25 |
| Execution context (0) | 2020.10.22 |
| Hoisting (0) | 2020.10.21 |