DOM 트리 순회
더보기
새로운 요소 생성
활용 예시
firstChild
createElement(태그이름)
appendChild(node)
메서드를 활용하기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function proc1() {
vu1 = document.querySelector('#u1');
list = vu1.querySelectorAll('li'); // 속해있는 li만 가져옴
// 누적변수 선언
let str ="";
/*
for(i=0;i<list.length; i++){
str +=list[i].firstChild.data + "<br>";
}
*/
list.forEach(function(ele, idx){
str += ele.firstChild.data+"<br>";
})
document.querySelector('#result1').innerHTML = str;
}
function proc2() {
vu2 = document.querySelector('#u2');
list = vu2.querySelectorAll('li'); // 속해있는 li만 가져옴
let disp = "";
// li 갯수 만큼 반복 - 반복시 대상 li는 ele변수로 받는다
list.forEach(function(ele, idx){
// img 태그 생성
vimg = document.createElement('img');
// img 태그의 속성을 설정
vimg.src="../images/"+ele.firstChild.data;
vimg.alt=ele.firstChild.data;
vimg.width = 50;
vimg.height = 50;
// 부모.appendChild(자식img)
ele.appendChild(vimg);
// disp += `<img src="../images/${ele.firstChild.data}" width=300 height=300>`;
})
}
function proc3(target){
// target: proc3(this)호출 시 this개체를 받은 변수
// this : 클릭한 li객체
// data값 가져오기 - 이미지 이름
vdata = target.firstChild.data;
//태그 생성
vimg = document.createElement('img');
// 속성
vimg.src="../images/"+vdata;
vimg.alt=vdata;
vimg.width = 50;
vimg.height = 50;
vimg.style.borderRadius = "50%";
target.appendChild(vimg);
}
</script>
</head>
<body>
<div class="box">
<h3></h3>
<ul id='u1'>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
<div class="box">
<h3></h3>
<ul id='u2'>
<li>Tulips.jpg</li>
<li>셔틀콕.jpg</li>
<li>crismasth.jpeg</li>
<li>Koala.jpg</li>
<li>studycom.jpg</li>
</ul>
<input type="button" value="확인" onclick="proc2()"> <br> <br>
</div>
<div class="box">
<h3> <li onclick="proc3(this)"><br> 각 li항목에 onclick=""이벤트 핸들러 설정</h3>
<ul id='u3'>
<li onclick="proc3(this)">Tulips.jpg</li>
<li onclick="proc3(this)">셔틀콕.jpg</li>
<li onclick="proc3(this)">crismasth.jpeg</li>
<li onclick="proc3(this)">Koala.jpg</li>
<li onclick="proc3(this)">studycom.jpg</li>
</ul>
</div>
</body>
</html>TextNode추가/ 삭제
document.createTextNode(문자열)
document.createElement(태그)
부모.appendChild(자식);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const arr = ["수업", "1시", "6시", "POI", "JAVA", "HELLO", "JAVASCRIPT"]
function add() {
// 랜덤 발생
let ran = parseInt(Math.random()*arr.length);
// 문자열 선택
// 선택된 문자열로 textNode생성
let text = document.createTextNode(arr[ran]);
// p태그 생성
let ptag = document.createElement('p');
// p태그에 text추가
ptag.appendChild(text);
let re = document.getElementById('result1');
re.appendChild(ptag);
}
function remove() {
let re = document.getElementById('result1').lastChild;
document.getElementById('result1').removeChild(re);
}
</script>
</head>
<body>
<div class="box">
<h3>랜덤으로 문자열을 발생<br>p태그 생성 - 부모 - createElement('p')<br>문자열textNode생성 - 자식 - createTextNode(문자열)<br>
부모.appendChild(자식)- p태그에 문자열을 추가<br>p태그를 id=result1(부모)<br> result1에 p태그를 추가 </h3>
<input type="button" value="추가" onclick="add()">
<input type="button" value="삭제" onclick="remove()"> <br> <br>
<div id="result1"></div>
</div>
</body>
</html>Input태그 추가(createElement('input')), onclick속성 / parentNode
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const arr = ["수업", "1시", "6시", "POI", "JAVA", "HELLO", "JAVASCRIPT"]
const proc1 = () => {
console.log(this);
let ran = parseInt(Math.random()*arr.length);
let text = document.createTextNode(arr[ran]+" ");
// 삭제 버튼 생성 - input tag
vinput = document.createElement('input');
vinput.type = "button";
vinput.value = "삭제";
vinput.onclick = deleteProc; // 함수를 불러오고 싶다면 함수의 참조값만 사용
/*
vinput.onclick = function() {
// 클릭한 삭제버튼을 this로 받아서 그 부모를 찾는다 -> ptag
console.log(this);
let target = this.parentNode;
target.remove();
}
// 화살표 함수를 쓴다면 스크립트 안에서 쓰는 this는 window
// 그러므로 function를 사용하도록함
*/
let ptag = document.createElement('p');
ptag.appendChild(text);
ptag.appendChild(vinput);
let vres = document.getElementById('result1');
vres.appendChild(ptag);
}
function deleteProc() {
let target = this.parentNode;
target.remove();
}
</script>
</head>
<body>
<div class="box">
<h3></h3>
<input type="button" value="추가" onclick="proc1()">
<div id="result1"></div>
</div>
</body>
</html>연습) 이미지 회전
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
img{
width : 100px;
height : 100px;
}
</style>
<script>
const proc1 = (target) =>{
// 시작버튼 클릭시 this파라미터를 받은 지역변수
btn = target;
target.style.display = "none";
st = setInterval(function(){
let vres = document.getElementById('result1');
let img = vres.firstChild;
// appendChild로 이동하므로 remove하지 않아도됨
// vres.removeChild(img);
vres.appendChild(img);
},1000);
}
const stop = () => {
btn.style.display = "inline";
clearInterval(st);
}
</script>
</head>
<body>
<div class="box">
<h3>appendChild()의 기능<br>1. 새로운 요소를 생성하여 추가 기능<br>2. 이미 존재하는 요소를 이동기능</h3>
<div id="result1">
<img src="../images/수국1.jpg">
<img src="../images/수국2.jpg">
<img src="../images/수국3.jpg">
<img src="../images/수국4.jpg">
<img src="../images/수국5.jpg">
<img src="../images/수국6.jpg">
<img src="../images/수국7.jpg">
<img src="../images/수국8.jpg">
<img src="../images/수국9.jpg">
</div>
<input type="button" value="시작" onclick="proc1(this)">
<input type="button" value="종료" onclick="stop()"> <br> <br>
</div>
</body>
</html>nextElementSibling / addEventListener 사용 예제
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.result{
display: flex;
flex-direction: row;
padding: 3px;
}
.result div{
flex: 25%;
margin: 2px;
padding: 2px;
background: lightgray;
border : none;
}
.result div img{
width: 100%;
height: 150px;
}
p{
text-align: center;
font-size: 20px;
}
</style>
<script>
let ptag = null;
let vnext = null;
const sale = (target) => {
// if(ptag!=null){
// ptag.remove()
// }
// 클릭된 이미지에 있는 이미 생성된 p태그를 지운다 nextSibling /nextElementSiblling가 있으면 지운다
vnext = target.nextElementSibling;
if(vnext != null){
vnext.remove();
}
let ran = parseInt(Math.random()*6+5);
let text = document.createTextNode("할인율 : "+ran+"%");
ptag = document.createElement('p');
ptag.appendChild(text);
let vres = target.parentNode;
// // 이미 생성되어 있는 ptag를 지운다 방법 2
// let s = vres.childNodes;
// if(s.length>=2){
// vres.removeChild(s[1]);
// }
vres.appendChild(ptag);
}
window.onload = function() {
var img = document.querySelectorAll('#result2 img');
console.log(img);
for(var i=0; i<img.length;i++){
img[i].addEventListener('click', function() {
// 만약 함수값을 가지고오고싶다면 ()빼고가져올것 > 함수의 참조값을 가져옴, target을 this로 변경
// 클릭된 이미지에 있는 이미 생성된 p태그를 지운다 nextSibling /nextElementSiblling가 있으면 지운다
vnext = this.nextElementSibling;
if(vnext != null){
vnext.remove();
}
let ran = parseInt(Math.random()*6+5);
let text = document.createTextNode("할인율 : "+ran+"%");
ptag = document.createElement('p');
ptag.appendChild(text);
let vres = this.parentNode;
vres.appendChild(ptag);
});
}
}
}
</script>
</head>
<body>
<div class="box">
<h3>이미지를 클릭하면 p태그 생성하여 할인율 : 5% 내용을 출력<br>
할인율은 랜덤으로 발생 5~10 사이이다.<br>p태그를 부모div에 추가한다<br>
이벤트 핸들러 작성 호출 <img onclick="sale(this)"></h3>
<div id="result1" class="result">
<div><img src="../images/국화1.jpg" onclick="sale(this)"></div>
<div><img src="../images/국화2.jpg" onclick="sale(this)"></div>
<div><img src="../images/국화3.jpg" onclick="sale(this)"></div>
<div><img src="../images/국화4.jpg" onclick="sale(this)"></div>
</div>
</div>
<div class="box">
<h3>이미지를 클릭하면 p태그 생성하여 할인율 : 5% 내용을 출력<br>
할인율은 랜덤으로 발생 5~10 사이이다.<br>p태그를 부모div에 추가한다<br>
이벤트 핸들러 작성 호출 : addEventListener('type', function)</h3>
<div id="result2" class="result">
<div><img src="../images/국화1.jpg"></div>
<div><img src="../images/국화2.jpg"></div>
<div><img src="../images/국화3.jpg"></div>
<div><img src="../images/국화4.jpg"></div>
</div>
</div>
</body>
</html>
'웹프로그래밍 > HTML CSS JavaScript' 카테고리의 다른 글
| [JavaScript] Location 객체 (0) | 2024.05.13 |
|---|---|
| [JavaScript] Window 객체 (0) | 2024.05.10 |
| [JavaScript] Math 객체 (0) | 2024.05.10 |
| [JavaScript] String 객체 (0) | 2024.05.09 |
| [JavaScript] Date 객체, setInterval (+window.onload) (0) | 2024.05.08 |
