[JavaScript] 문서 수정

노드 생성

document.createElement(tag) : 태그 이름을 사용해 새로운 요소를 만든다
document.createTextNode(value) : 텍스트 노드를 만든다. (잘 쓰이지 않음)

element.cloneNode(deep) : 요소를 복제함. deep == true 일 경우 모든 자손 요소도 복제한다.

 

노드 삽입, 삭제

node.append(노드나 문자열) : node 끝에 노드나 문자열을 삽입
node.prepend(노드나 문자열) : node 맨 앞에 노드나 문자열을 삽입
node.before(노드나 문자열) : node 이전에 노드나 문자열을 삽입
node.after(노드나 문자열) : node 이후에 노드나 문자열을 삽입
node.replaceWith(노드나 문자열) : node를 노드나 문자열로 대체
node.remove() : node를 제거

 

li(텍스트 노드가 있는) 노드 생성

    <button onclick="test1();">실행확인</button>
    <ul id="list">
        <li>기존 목록1</li>
        <li>기존 목록2</li>
        <li>기존 목록3</li>
    </ul>

- list의 앞 뒤에 문자열 삽입

        function test1() {
            let list = document.getElementById("list");

            //list의 앞 뒤에 문자열 삽입
            list.before("before");
            list.after("after");

- li 노드 생성

            let newList1 = document.createElement("li");
            let newList2 = document.createElement("li");

 

- 각 노드의 내부 텍스트 설정

            let text = document.createTextNode("새로운 목록1");
            newList1.append(text); //<li>새로운 목록1</li>
            newList2.innerHTML = "새로운 목록2";

 

- list의 마지막 항목/첫 항목으로 삽입

            list.append(newList1);
            list.prepend(newList2);

---

이미지(텍스트 노드가 없는) 노드 생성

        function test2(){
            //img 노드 생성
            let imgTest = document.createElement('img');

            //속성 지정
            imgTest.src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
            imgTest.width = "200";
            imgTest.height = "100";
            document.getElementById('area2').append(imgTest);
        }

 

노드 삭제

    <button onclick="test3();">맨 앞 이미지 삭제</button>

    <script>
        function test3() {
            //삭제할 img 노드 찾기(img 노드 중 첫 번째 리턴)
            let img = document.querySelector('img');

            //존재할 경우 (null이 아닌 경우) 삭제
            if(img != null)
                img.remove();
        }

이미지 2개에서 1개 삭제된 상황

 

노드 복제

    <button onclick="test4();">실행 확인</button>
    <ul class="copy">
        ul 영역
        <li>li 영역</li>
    </ul>

    <script>
        function test4(){
            let ul = document.querySelector(".copy");

            let cloneFalse = ul.cloneNode(false);
            let cloneTrue = ul.cloneNode(true);

            ul.before(cloneFalse);
            ul.after(cloneTrue);
        }

 

노드 대체

    <button onclick="test5();">실행확인</button>

    <script>
        function test5(){
            //대체할 노드 찾기(img 태그 중 첫 번째 리턴)
            let img = document.querySelector("img");

            //존재할 경우 (null이 아닌 경우) 대체
            if(img != null)
                img.replaceWith("<b>이미지가 있던 곳</b>");
            
        }

=> 태그가 아닌 문자열로 인식

---

insertAdjacentHTML

element.insertAdjacentHTML(where, html) : where은 element 기준 상대 위치, html은 문자열. 태그 포함한 문자열은 이스케이프 처리 없이 태그로 기능한다.
beforebegin : element의 바로 앞에 html 삽입
afterbegin : element의 첫 번째 자식 요소 바로 앞에 html 삽입
beforeend : element의 마지막 자식 요소 바로 다음에 html 삽입
afterend : element의 바로 다음에 html 삽입

 

노드 대체 수정

    <button onclick="test6();">실행확인</button>

    <script>
        function test6(){
            //대체할 노드 찾기
            let img = document.querySelector("img");

            //존재할 경우(null이 아닌 경우) 대체
            if(img != null){
                img.insertAdjacentHTML('afterend', '<b>이미지가 있던 곳</b>');
                img.remove();
            }
        }

텍스트가 아닌 태그로 기능함

 

요소 위치 바꾸기

모든 노드 삽입 메소드는 자동으로 기존에 있던 노드를 삭제하고 새로운 곳으로 노드를 옮기기 때문에 요소 노드를 다른 곳으로 옮길 때 기존에 있던 노드를 지울 필요가 없음

    <button onclick="test7();">실행확인</button>

    <script>
        function test7(){
            let first = document.querySelector(".first");
            let second = document.querySelector('.second');
            //second뒤에 first삽입
            second.after(first);
        }

실행확인 버튼을 클릭하면 first, second 위치가 바뀐다.

---

스타일 지정

- 프로퍼티 style은 속성 style에 쓰인 값에 대응되는 객체
- 여러 단어를 이어서 만든 프로퍼티는 카멜 표기법을 사용해서 이름 지어짐
(Ex. background-color => backgroundColor, border-radius => borderRadius)

- className : class 속성에 대응. 대입시 클래스 문자열 전체가 바뀜

- classList : 클래스 하나만 조작할 수 있는 add/remove/toggle 메소드가 있음

 

구분하기 위해 스타일 지정

    <button onclick="test8();">style 수정</button>
    <button onclick="test9();">class 수정</button>
    <div id="area4" class="area"></div>

    <script>
        function test8(){
            let area4 = document.querySelector('#area4');

            area4.style.width = '200px';
            area4.style.backgroundColor = 'yellow';
            area4.style.borderRadius = '50%';
        }

style수정 누른 후 변경됨

 

전체 클래스명이 circle로 변경되어 area클래스로 가지고 있던 속성도 제거됨(높이 값이 없어 보이지 않음)

=>class수정 버튼을 누르면 그냥 사라져버린다.

        function test9(){
            let area4 = document.querySelector('#area4');

            area4.className = 'circle';
        }

 

기존 area 클래스에 circle클래스 추가

            area4.classList.add('circle');