반응형
왜 나만 졸려하는걸까.. 나도 뭘 마셔야되나..
JavaScript (JS)
DOM (Document Object Model) 예제
예제 1 - 버튼 클릭으로 style 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
스타일 DOM으로 변경
</div>
<br>
<button onclick="changeStyle()">스타일 변경 하기</button>
<script>
const changeStyle = () => {
const div = document.querySelector('div');
const style = div.style;
const color = style.color;
if (color == 'red') {
style.color = 'blue';
} else {
style.color = 'red';
}
}
</script>
</body>
</html>const style에 div.style을 저장하고, const color에 style.color를 저장하였는데 이렇게 하지 않고 그냥 div.style.color로 하여도 되긴하다.
위 방법처럼 button에 바로 onclick을 주어도 되고, 이벤트 리스너를 추가해도 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
스타일 DOM으로 변경
</div>
<br>
<button >스타일 변경 하기</button>
<script>
const changeStyle = () => {
const div = document.querySelector('div');
if (div.style.color == 'red') {
div.style.color = 'blue';
} else {
div.style.color = 'red';
}
}
const button = document.querySelector('button');
button.addEventListener("click", (e) => {
console.log(e);
changeStyle();
})
</script>
</body>
</html>button 클릭 시 EventListener가 동작한다. 위 코드와는 다르게 button에 onclick을 주지 않았다.
예제 2 - className
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.on {
color: red;
background-color: yellow;
border: 1px solid gray;
}
.off {
background-color: white;
border: 1px solid gray;
}
</style>
</head>
<body>
<ul>
<li class="off">값 1</li>
<li class="off">값 2</li>
<li class="off">값 3</li>
<li class="off">값 4</li>
<li class="off">값 5</li>
<li class="off">값 6</li>
</ul>
<br>
<script>
var li = document.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
if ((i + 1) % 2 == 0) {
li[i].className = 'on';
}
}
li[0].style.color = 'blue';
li[0].style.fontSize = '32pt';
</script>
</body>
</html>li 태그를 배열 형태로 가져온 뒤 for문에서 홀수번째 태그인 경우 class를 on으로 바꾸어준다.
인덱스는 0부터 시작
제일 첫 번째 li 태그의 font color와 size를 변경해봄봄
예제 3 - class
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.on {
color: red;
background-color: yellow;
border: 1px solid gray;
}
.off {
background-color: white;
border: 1px solid gray;
}
</style>
</head>
<body>
<ul>
<li class="off">샘플 1</li>
<li class="off">샘플 2</li>
<li class="off">샘플 3</li>
<li class="off">샘플 4</li>
<li class="off">샘플 5</li>
<li class="off">샘플 6</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul');
var frag = document.createDocumentFragment();
var li = document.createElement('li');
var liText = document.createTextNode('헤헷');
li.appendChild(liText);
frag.appendChild(li);
ul[0].appendChild(frag);
var sevenLi = document.getElementsByTagName('li')[6];
// 방법 1.
if (!sevenLi.getAttribute('class') || sevenLi.getAttribute('class') == 'off') {
sevenLi.setAttribute('class', 'on');
}
// 방법 2. 클래스명 속성 값을 직접 가져와서 확인하는 경우
if (sevenLi.className == '' || sevenLi.className == 'off') {
sevenLi.setAttribute('class', 'on');
}
// 방법 3. classList를 이용한 경우
if (sevenLi.classList.contains('off') || !sevenLi.getAttribute('class')) {
sevenLi.setAttribute('class', 'on');
}
</script>
</body>
</html>class 속성 값을 주는 가져오는 방법 중 3가지를 작성해보았다.
첫 번째는 getAttribute를 사용해서 class 값을 가져왔다.
두 번째는 className 값을 가져왔다.
세 번째는 classList를 가져왔다. class 속성이 여러 개일때 사용하면 된다.
현재 sevenLi는 아무런 class 속성이 설정되어 있지 않은 상태이다.
따라서 코드 실행을 위해 !sevenLi.getAttribute('class') 조건과 sevenLi.className == '' 조건을 넣어주었다.
class 속성에 on을 주는 것은 모두 setAttribute를 사용했는데 이것 말고도 className으로 주어도 된다.
예제 4
자바스크립트로 데이터 값을 넣는 방법은 여러 방법이 있다. 그 중에서도 DOM으로 넣는 방법은 코드 가독성이 좋지 않아서 요즘에는 잘 사용하지 않는 추세인 것 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.products {
background-color: bisque;
}
.list {
list-style: none;
}
.item {
height: 30px;
}
.item input {
width: 40px;
}
</style>
</head>
<body>
<div class="products">
<ul class="list">
<!--
<li class="item">
<span>까스활명수</span>
<input type="hidden" name="prodNo" value="0001" />
<input type="number" name="qty" value="10" />
<button>삭제</button>
</li>
<li class="item">
<span>맥심 모카골드</span>
<input type="hidden" name="prodNo" value="0002" />
<input type="number" name="qty" value="30" />
<button>삭제</button>
</li>
<li class="item">
<span>맥심 화이트골드</span>
<input type="hidden" name="prodNo" value="0003" />
<input type="number" name="qty" value="10" />
<button>삭제</button>
</li>
-->
</ul>
</div>
<script>
const data = [
{
prodNo: "0001",
prodName: "까스활명수",
qty: 10,
},
{
prodNo: "0002",
prodName: "맥심 모카골드",
qty: 30,
},
{
prodNo: "0003",
prodName: "맥심 화이트골드",
qty: 10,
},
{
prodNo: "0004",
prodName: "카누",
qty: 10,
},
];
const removeProd = (e) => {
const currentTarget = e.currentTarget;
if (currentTarget) {
currentTarget.parentNode.remove();
}
}
const drawProdDom = function(data) {
if (!data) {
return;
}
const dataLength = data.length;
const list = document.querySelector(".list");
var fragment = document.createDocumentFragment();
for (let i = 0; i < dataLength; i++) {
const prodInfo = data[i];
const element = document.createElement("li");
element.className = "item";
const span = document.createElement("span");
span.innerText = prodInfo.prodName;
element.appendChild(span);
const inputProdNo = document.createElement("input");
inputProdNo.type = "hidden";
inputProdNo.value = prodInfo.prodNo;
element.appendChild(inputProdNo);
const inputQty = document.createElement("input");
inputQty.type = "number";
inputQty.value = prodInfo.qty;
element.appendChild(inputQty);
const button = document.createElement("button");
button.innerText = "삭제";
button.addEventListener('click', (e) => {
removeProd(e);
});
element.appendChild(button);
fragment.appendChild(element);
}
list.appendChild(fragment);
}
drawProdDom(data);
</script>
</body>
</html>body 태그 내에 주석처리된 부분을 자바스크립트만을 이용해서 작성하였다.
DOM을 사용하니 코드 길이가 불필요하게 길어지고, 태그 하나하나를 다 설정해주어야 하기 때문에 불편하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.products {
background-color: bisque;
}
.list {
list-style: none;
}
.item {
height: 30px;
}
.item input {
width: 40px;
}
</style>
</head>
<body>
<div class="products">
<ul class="list">
<!-- 내용 들어갈 부분 -->
</ul>
</div>
<script>
const data = [
{
prodNo: "0001",
prodName: "까스활명수",
qty: 10,
},
{
prodNo: "0002",
prodName: "맥심 모카골드",
qty: 30,
},
{
prodNo: "0003",
prodName: "맥심 화이트골드",
qty: 10,
},
];
const removeProd = (e) => {
const currentTarget = e.currentTarget;
if (currentTarget) {
currentTarget.parentNode.remove();
}
}
const drawProd = function (data) {
if (!data) {
return;
}
const list = document.querySelector(".list"); // getElementsByClassName('list');
let prodHtml = "";
const dataLength = data.length;
for (let i = 0; i < dataLength; i++) {
const prodInfo = data[i];
// prodHtml += '<li class="item">';
// prodHtml += '<span>' + prodInfo.prodName + '</span>';
// prodHtml += '<input type="hidden" name="prodNo" value="' + prodsInfo.prodNo + '" />';
// prodHtml += '<input type="number" name="qty" value="' + prodInfo.qty + '" />';
// prodHtml += '<button>삭제</button>';
// prodHtml += '</li>';
prodHtml += `<li class="item">
<span>${prodInfo.prodName}</span>
<input type="hidden" name="prodNo" value="${prodInfo.prodNo}" />
<input type="number" name="qty" value="${prodInfo.qty}" />
<button onclick="removeProd(event)">삭제</button>
</li>`;
}
list.innerHTML = prodHtml;
};
drawProd(data);
</script>
</body>
</html>간단하게 innerHTML을 사용하여 태그를 추가하였다.
주석 처리 한 부분과 아래 prodHtml += 부분은 같은 내용인데, 아래 방법처럼 작성하는 게 더 최신(?) 방법이고, 실제로도 편리하다.
옛날에는 `를 '로 써서 안됐었는데 이제 잘 한다 ㅎㅅㅎ
반응형
