JAVASCRIPT STEP 35 - Content — Developer Story House

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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

JAVASCRIPT STEP 35 - Content

'웹페이지' 카테고리의 다른 글

'웹페이지' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역