728x90
★ BOM, DOM 태그조작
- 1. 태그 검색(BOM, DOM)
- 2. 속성 조작(BOM, DOM)
- 3. PCDATA 조작(DOM) > innerText, textContent
★ 콘텐츠 조작
- 시작 태그와 끝 태그 사이의 내용물 조작
- 1. innerText
- 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티
- 비표준(MS)
- 태그를 인식 X
// div1.innerText ='홍길동';
alert(div1.innerText);
div1.innerText = '<i>홍길동</i>'; //결과는 똑같이 escape 되서 나옴- 2. innerHTML
- 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티
- 태그 인식 O
div1.innerHTML = '<i>홍길동</i>';
//동적으로 태그 생성하기
div1.innerHTML = '<input type="text">'
//for문으로 여러개의 태그 생성하기
for(let i=0; i<10; i++) {
div1.innerHTML += '<input type="text"><br>';
};
//버튼을 누를때마다 이미지가 삽입
div1.innerHTML += '<img src="images/catty0' + n + '.png">';
n++;
if(n>9) n =1;
let n = 1;
//모든 태그를 지우기
document.getElementById('btn2').onclick = function() {
div1.innerHTML = '';
};- 3. outerText(사용 안함)
- 4. outerHTML(사용 안함)
- 5. textContent
- 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티
- 표준
■ 테이블 생성하기
- HTML 코드
<h1>테이블 생성하기</h1>
<fieldset>
<legend>행 x 열</legend>
<label>행 : <select id="selrow"></select></label>
<label>열 : <select id="selcolum"></select></label>
<input type="button" value="만들기" id="btncreate">
</fieldset>
<table id="tbl1"></table>- CSS 코드
<style>
fieldset {
border : 1px solid #777;
width : 200px;
}
fieldset > * {
display: block;
margin-bottom : 10px;
}
#tbl1 {
border : 1px solid gray;
border-collapse: collapse;
margin-top: 20px;
}
#tbl1 td {
border : 1px solid gray;
width : 50px;
height: 50px;
}
</style>- JavaScript 코드
<script>
const selrow = document.getElementById('selrow');
const selcolum = document.getElementById('selcolum');
const btncreate = document.getElementById('btncreate');
const tbl1 = document.getElementById('tbl1');
//셀렉트 박스 초기화
for (let i=1; i<=10; i++) {
//BOM 표기 방식
const op = new Option();
op.value = '';
op.text = '';
//DOM 표기 방식
// selrow.innerHTML += '<option></option>';
selrow.options.add(new Option(i, i));
selcolum.options.add(new Option(i, i));
}
btncreate.onclick = function() {
let temp = ''; //누적 변수
for (let i=0; i<selrow.value; i++) { //행 생성 <tr>
temp += '<tr>';
for(let j=0; j<selcolum.value; j++) { //열 생성 <td>
temp += '<td>';
temp += i + ',' + j;
temp += '<td>';
}
temp += '</tr>';
}
tbl1.innerHTML =temp;
}
</script>- 실행 결과
■ 테이블 생성하기 2
- HTML 코드
<!-- table#tbl1>tr*5>td*5 -->
<table id="tbl1">
<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>- CSS 코드
<style>
#tbl1 {
border : 1px solid gray;
border-collapse: collapse;
}
#tbl1 td {
border : 1px solid gray;
width : 126px;
height: 126px;
/* font-size : 0; */
}
#tbl1 img {
display: block;
}
</style>- 마우스 오른쪽 버튼 메뉴 안뜨게 하려면
<body oncontextmenu="return false;"> <!-- 마우스 오른쪽 메뉴가 뜨지 않게 하는 것-->- JavaScript
<script>
//<td> * 25 > 이벤트 추가 > 이미지 동적 추가
const list = document.getElementsByTagName('td');
for (let i=0; i<list.length; i++) {
list[i].onmousedown = function() {
//클릭한 <td>?
// event.target.bgColor = 'gold';
if(event.buttons == 1){
event.target.innerHTML = '<img src="images/rect_icon01.png">';
} else if(event.buttons == 2) {
event.target.innerHTML = '<img src="images/rect_icon02.png">';
}
}
}
</script>- 실행 결과
■ 이벤트 조작
- HTML 코드
<table id="tbl1">
<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>- CSS 코드
<style>
#tbl1 {
border : 1px solid gray;
border-collapse: collapse;
}
#tbl1 td {
border : 1px solid gray;
width : 126px;
height: 126px;
/* font-size : 0; */
}
</style>- JavaScript
<script>
let index = 0;
const list = document.getElementsByTagName('td');
list[index].bgColor = 'gold';
window.onkeydown = function() {
// list[index].bgColor = 'transparent';
for (let i=0; i<list.length; i++) {
list[i].bgColor = 'transparent';
}
if(event.keyCode == 39) {
//우측 방향키
index++;
//끝
if(index >= list.length) {
index=0;
}
} else if (event.keyCode == 37) {
//좌측 방향키
index--;
//끝
if(index < 0) {
index=list.length-1;
}
}
list[index].bgColor = 'gold';
};
</script>- 실행 결과
728x90
'웹페이지' 카테고리의 다른 글
| JAVASCRIPT STEP 37 - EVENT(Dom ver) (0) | 2023.04.26 |
|---|---|
| JAVASCRIPT STEP 36 - AXIS (0) | 2023.04.26 |
| JAVASCRIPT STEP 34 - DOM (0) | 2023.04.26 |
| JAVASCRIPT STEP 33 - Constructor (0) | 2023.04.26 |
| JAVASCRIPT STEP 32 - Function (0) | 2023.04.26 |
