[JavaScript] DOM (Document Object Model)

DOM (Document Object Model)

Node 객체
    <h3>텍스트 노드가 있는 요소 노드 생성</h3>

    <button id="btn1">실행확인</button>
    <div id="area1" class="area"></div>
    
    // Node 객체
// 텍스트 노드가 있는 요소 노드 생성
let btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
    // 요소 노드 생성
    let elementNode = document.createElement('h3');

    // 텍스트 노드 생성
    let textNode = document.createTextNode('안녕하세요.');

    elementNode.appendChild(textNode);
    document.getElementById('area1').appendChild(elementNode);

    // document.getElementById('area1').innerHTML = `<h3>안녕하세요~!</h3>`;
});

텍스트 노드가 없는 요소 노드 생성

    <button id="btn2">실행확인</button>
    <div id="area2" class="area"></div>
    
    // 텍스트 노드가 없는 요소 노드 생성
    let btn2 = document.getElementById('btn2');

    btn2.addEventListener('click', () => {
        // 요소 노드 생성
        let elementNode = document.createElement('img');

        elementNode.src = '../resources/image/flower1.PNG';
        elementNode.setAttribute('width', '150px');
        elementNode.setAttribute('height', '100px');
        elementNode.setAttribute('myAttr', 'P123');

        document.getElementById('area2').appendChild(elementNode);
        document.getElementById('area2').innerHTML += '<img src="../resources/image/flower2.PNG" width="150px" height="100px" myattr="P123">';

    });

Node 객체 삭제
    <button id="btn3">실행확인</button>
    <div id="area3" class="area"></div>
    
    // Node 객체 삭제
    let btn3 = document.getElementById('btn3');

    btn3.addEventListener('click', (event) => {
        // 요소를 직접가져와서 지움
        document.getElementById('area1').remove();

        // 
        document.body.removeChild(document.getElementById('area2'));

        console.log(event.type);
        console.log(event.target);
        console.log(event.target.parentNode);

        event.target.parentNode.removeChild(document.getElementById('area3'));

    });