Programming/JavaScript
[JavaScript] DOM: 콘텐츠 조작
Isaac S. Lee
2023. 10. 10. 12:12
🍁콘텐츠 조작
- 1. 태그 검색 (BOM, DOM)
- 2.1 속성 조작 (BOM, DOM)
- 2.2 이벤트 조작 (BOM, DOM)
- 3. 콘텐츠 조작 (DOM)
BOM와 DOM 모두 태그를 조작할 수 있는 기능을 가지고 있다.
하지만 콘텐츠 조작은 BOM에서는 못 하며, DOM에서만 할 수 있다.
대부분의 프로퍼티는 읽기, 쓰기 작업을 모두 지원한다.
읽기 작업
alert(div1.innerText);alert(div1.innerHTML);alert(div1.textContent);
쓰기 작업
div1.innerText = 'Isaac';div1.innerHTML = 'Sopia';div1.textContent = 'Happy Day';
Content Property
Content의 시작 태그와 끝 태그 사이의 내용물(PCDATA, Element)을 조작한다.
innerText
시작 태그와 끝 태그 사이의 문자열을 읽기/쓰기 작업을 하는 프로퍼티이다.
문자열만 인식하며, 비표준(MS) 방식이다.
div1.innerText = 'I<b>s</b>aac';
innerHTML
시작 태그와 끝 태그 사이의 문자열을 읽기/쓰기 작업을 하는 프로퍼티이다.
문자열과 태그를 모두 인식한다.
div1.innerHTML = 'I<b>s</b>aac';
textContent
시작 태그와 끝 태그 사이의 문자열을 읽기/쓰기 작업을 하는 프로퍼티이다.
문자열만 인식하며, 표준 방식이다.
div1.textContent = 'I<b>s</b>aac';
outerText
JavaScript에서는 거의 사용하지 않는다.
outerHTML
JavaScript에서는 거의 사용하지 않는다.
🍁동적으로 태그 생성하기
텍스트 박스 생성
div1.innerHTML = '<input type="text">';
동적으로 태그를 추가하여 텍스트 박스를 생성할 수 있다.
for (var i=0; i<10; i++) {
div1.innerHTML += '<input type="text">';
}
이미지 추가
div1.innerHTML += '<img src="../asset/images/dog01.jpg">';
콘텐츠 삭제
document.getElementById('btn2').onclick = m2;
function m2() {
document.getElementById('div1').innerHTML = '';
}
빈 문자열로 채워 콘텐츠를 삭제할 수 있다.
테이블 생성하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
fieldset {
border: 1px solid #777;
width: 200px;
}
fieldset > label {
display: block;
margin-bottom: 5px;
padding: 5px;
}
#tbl1 {
border: 1px solid gray;
border-collapse: collapse;
margin-top: 20px;
}
#tbl1 td {
border: 1px solid gray;
width: 50px;
height: 50px;
}
#btn1 {
margin-top: 5px;
}
</style>
</head>
<body>
<h1>테이블 생성하기</h1>
<fieldset>
<legend>행x열</legend>
<label>행: <select id="selrow"></select></label>
<label>열: <select id="selcolumn"></select></label>
<input type="button" value="생성하기" id="btn1">
</fieldset>
<table id="tbl1"></table>
</body>
</html>
<script>
var selrow = document.getElementById('selrow');
var selcolumn = document.getElementById('selcolumn');
var btn1 = document.getElementById('btn1');
var tbl1 = document.getElementById('tbl1');
//select box 초기화
for (var i=1; i<=10; i++) {
//var op = new Option();
//op.value = i;
//op.text = i;
//var op = new Option(i, i);
selrow.options.add(new Option(i, i));
selcolumn.options.add(new Option(i, i));
}
selrow.selectedIndex = 4; //행을 5로 시작
selcolumn.selectedIndex = 4; //열을 5로 시작
btn1.onclick = m1;
function m1() {
//<tr>, <td> 동적 생성하기
var temp = ''; //누적 변수
for (var i=0; i<selrow.value; i++) { //행
temp += '<tr>';
for (var j=0; j<selcolumn.value; j++) { //열
temp += '<td>';
temp += i + ',' + j;
temp += '</td>';
}//for j
temp += '</tr>';
}//for i
tbl1.innerHTML = temp;
}
</script>
🍂테이블 조작하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tbl1 {
border: 1px solid gray;
border-collapse: collapse;
}
#tbl1 td {
border: 1px solid gray;
width: 126px;
height: 126px;
}
</style>
</head>
<body>
<table id="tbl1">
<!-- tr*5>td*5 -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
event.target.bgColor = 'tomato';
#tbl1 td img {
display: block;
}
스타일을 변경하여 인라인 태그를 블럭 태그로 만들어 사진 아래에 생기는 공백을 없애 주었다.
마우스 오른쪽 contextmenu 제거
<body oncontextmenu="return false;">메뉴가 뜨기 바로 직전에 실행되는 contextmenu 속성을 false로 지정해 주었다.
이제 마우스 오른쪽 클릭을 해도 contextmenu가 동작하지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tbl1 {
border: 1px solid gray;
border-collapse: collapse;
}
#tbl1 td {
border: 1px solid gray;
width: 126px;
height: 126px;
}
#tbl1 td img {
display: block;
}
</style>
</head>
<body oncontextmenu="return false;">
<table id="tbl1">
<!-- tr*5>td*5 -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
//<td> x 25 이벤트 추가
var list = document.getElementsByTagName('td');
for (var i=0; i<list.length; i++){
// list[i].onclick = m1;
list[i].onmousedown = m1;
}
function m1() {
//어떤 td를 클릭했는지 확인
//event.target.innerText = 'click';
//event.target.bgColor = 'tomato';
//event.target.innerHTML = '<img src="../asset/images/rect_icon01.png">';
var n = 0;
if (event.buttons == 1) {
n = 1;
} else if (event.buttons == 2) {
n = 2;
} else if (event.buttons == 4) {
n = 4;
}
event.target.innerHTML = '<img src="../asset/images/rect_icon0' + n + '.png">';
}
</script>
</body>
</html>
클릭한 이미지 복제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#sample {
border: 1px solid black;
background-color: #EEE;
padding: 20px;
width: 800px;
text-align: center;
}
#sample .pic {
width: 150px;
border-radius: 10px;
opacity: .3;
cursor: pointer;
}
#sample .pic:hover {
opacity: 1;
}
</style>
</head>
<body>
<div id="sample">
<img src="../asset/images/cat01.jpg" class="pic">
<img src="../asset/images/cat02.jpg" class="pic">
<img src="../asset/images/cat03.jpg" class="pic">
<img src="../asset/images/cat04.jpg" class="pic">
<img src="../asset/images/cat05.jpg" class="pic">
<img src="../asset/images/dog01.jpg" class="pic">
<img src="../asset/images/dog02.jpg" class="pic">
<img src="../asset/images/dog03.jpg" class="pic">
<img src="../asset/images/dog04.jpg" class="pic">
<img src="../asset/images/dog05.jpg" class="pic">
</div>
<hr>
<input type="button" value="삭제하기" id="btn1">
<hr>
<div id="output"></div>
<script>
var pic = document.getElementsByClassName('pic');
for (var i=0; i<pic.length; i++) {
pic[i].onclick = m1;
}
function m1() {
//클릭한 <img> 태그 확인
//alert(event.target.src);
//클릭한 썸네일을 하단 output에 동적으로 출력
var url = event.target.src;
var filename = url.substring(url.lastIndexOf('/') + 1);
// alert(filename);
document.getElementById('output').innerHTML = '<img src="../asset/images/' + filename + '">';
}
document.getElementById('btn1').onclick = m2;
function m2() {
if ( document.getElementById('output').innerHTML != '') {
if (confirm('정말 삭제하시겠습니까?')) {
document.getElementById('output').innerHTML = '';
}
}
}
</script>
</body>
</html>
사진을 클릭하면 클릭한 썸네일을 하단 output에 동적으로 출력하고, 삭제 버튼을 클릭하면 확인 메시지를 선택하여 사진을 삭제한다.
