[JavaScript] DOM: Manipulation (조작)

🍁innerHTML을 사용하는 방법

---

div1.innerHTML = '<input type="text" size="10">';

동적으로 태그 생성하는 방법으로 innderHTML을 사용할 수 있다.

하지만 이 과정에서 속성에 오타가 있을 경우 속성은 적용되지 않으며, 태그명이 틀릴 경우 태그가 적용되지 않게 된다. 이는 문자열로 조작하기 때문에 생기는 문제이다.

innerHTML은 쉽고 작성 비용이 저렴한 반면에 문자열로 조작한다는 특징 때문에 문제가 발생할 가능성이 있다.

 

🍁정석적인 방법

---

이 방법은 정석적이고 체계적인 방법이지만, innerHTML보다 복잡하고 비용이 더 많이 든다.

 

1. 태그 생성

var input = document.createElement('input'); //<input>

 

2. 속성 생성

//input.type = 'text'; //BOM
//input.size = '50'; //BOM

var type = document.createAttribute('type'); //type=""
type.value = 'text'; //type="text"
input.setAttributeNode(type); //<input type="text">

생성한 <input> 태그의 속성을 변경하는 것은 적용은 되지만 BOM이므로 <type> 태그를 만들어서 적용하도록 한다.

//<input type="text" size="10">
input.setAttribute('size', '10');

setAttribute 메서드를 이용하면 위의 3줄을 1줄로 줄이는 게 가능하다.

 

3. 자식으로 추가

div1.appendChild(input);

자식으로 추가하는 appendChild 메서드를 이용하면 메모리에 있던 텍스트 박스를 div 자식으로 넣으면서 눈에 보이게 된다.

이번에는 <p> 태그를 만들어서 정렬을 하고 문단이라는 것을 나타내보자.

 

p 태그 생성

//<p align="center">문단입니다.</p>
// div1.innerHTML += <p align="center">문단입니다.</p>

var p = document.createElement('p'); //<p></p>

p.setAttribute('align', 'center'); //<p align="center"></p>

//var txt = document.createTextNode('문단입니다.');
//var txt = document.createTextNode();
//txt.nodeValue = '문단입니다.';

p.textContent = '문단입니다.'; //innerText

div1.appendChild(p);

p태그를 만들어서 내용을 추가하고 중앙 정렬하는 코드이다.

 

태그 삭제하기

<input> 태그만 삭제하기

div1.removeChild(div1.firstElementChild);

 

<p> 태그만 삭제하기

div1.removeChild(div1.lastElementChild);

removeChild 메서드를 이용해 firstElementChild 또는 lastElementChild를 찾아서 원하는 태그만 삭제할 수 있다.

이러한 관리 기능은 innerHTML로는 사용할 수 없는 기능이다.

 

function m3() {
    for (var i=1; i<=5; i++) {
        var img = document.createElement('img');

        img.setAttribute('src', '../asset/images/dog0' + i + '.jpg');
        img.addEventListener('click', m4);
        div1.appendChild(img);
    }
}

function m4() {
    div1.removeChild(event.target);
}

버튼을 누르면 사진 5개를 출력하며, 사진을 클릭하면 해당 사진이 사라진다.

각각의 개체는 이미 조작 가능하기 때문에 결과적으로 들어가는 비용은 비슷해지게 된다.

 

🍁Manipulation 활용

---

3 x 3 테이블을 생성하고 이벤트 적용

<style>
    .table {
        border: 1px solid gray;
        border-collapse: collapse;
    }
    .table td {
        border: 1px solid gray;
        padding: 10px 20px;
    }
</style>

<h1>DOM 조작</h1>

<input type="button" value="버튼1" id="btn1">
<input type="button" value="버튼2" id="btn2">
<input type="button" value="버튼3" id="btn3">
<input type="button" value="버튼4" id="btn4">
<hr>
<div id="div1"></div>

<script>
    document.getElementById('btn1').addEventListener('click', m1);
    document.getElementById('btn2').addEventListener('click', m2);
    document.getElementById('btn3').addEventListener('click', m3);
    document.getElementById('btn4').addEventListener('click', m4);

    var div1 = document.getElementById('div1');

    function m4() {
        //3 x 3 테이블을 만들고 이벤트 적용
        var table = document.createElement('table');

        for (var i=0; i<3; i++) {
            var tr = document.createElement('tr');

            for (var j=0; j<3; j++) {
                var td = document.createElement('td');
                td.textContent = 'item';
                td.addEventListener('click', m5);
                tr.appendChild(td);
            }

            table.appendChild(tr);
        }
        table.className = 'table';

        div1.appendChild(table);
    }

    function m5() {
        event.target.bgColor = 'tomato';
    }
</script>