웹페이지

JAVASCRIPT STEP 35 - Content

2023. 4. 26. 12:17
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
'웹페이지' 카테고리의 다른 글
  • JAVASCRIPT STEP 37 - EVENT(Dom ver)
  • JAVASCRIPT STEP 36 - AXIS
  • JAVASCRIPT STEP 34 - DOM
  • JAVASCRIPT STEP 33 - Constructor
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
Developer Story HouseIT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • 데이터베이스
  • 웹개발자
  • 코딩테스트
  • 개발블로그
  • React
  • jquery
  • 정보처리기사필기
  • it
  • JavaScript
  • 개발자
  • DBA
  • 알고리즘
  • 정보보안전문가
  • 웹페이지
  • ajax
  • 정보처리기사
  • 백준
  • 앱개발자
  • 웹개발
  • IT자격증공부
  • jsp
  • 백엔드
  • 프론트엔드
  • 자바
  • IT개발자
  • DB
  • IT자격증
  • html
  • java
  • css

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
JAVASCRIPT STEP 35 - Content
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.