[JavaScript] DOM 노드 읽기, 탐색, 추가, 삭제

1. DOM 노드

- DOM : Document Object Model

- 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법

- 웹 문서의 모든 요소들을 객체로 만들고 이를 트리 구조로 구성한 모델

- 브라우저의 문서에 객체(태그)를 의미

2. DOM 노드 읽기

- 노드 읽기 : 문서에 DOM 노드(객체)를 가져와 자바스크립트에서 읽거나 사용

getElementById()	요소에 지정된 id를 통해 객체를 가져옴
getElementsByTagName()	요소에 태그명을 통해 객체를 배열로 가져옴
getElementByName()	요소에 이름을 통해 객체를 배열로 가져옴
getElementByClassName()	요소에 지정된 클래스명을 통해 객체 배열을 가져옴
querySelector()	쿼리 지시어(. # >)을 이용해 가장 먼저 찾은 객체를 가져옴 맞는 객체가 여러개라도 맨 처음에 찾은 객체만 가져옴
querySelectorAll()	쿼리 지시어(. # >)을 이용해 조건에 맞는 모든 객체를 가져옴 여러 객체라면 배열로 가져옴

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h2 id="title">문서 객체 모델 읽기</h2>
        <div id="fruits">
            <ul class="ul-list">
                <li id="apple" name="list">사과</li>
                <li id="banana" name="list">바나나</li>
                <li id="orange" name="list">오렌지</li>
            </ul>
        </div>
        <div id="animals">
            <ul class="ul-list">
                <li>강아지</li>
                <li>고양이</li>
                <li>토끼</li>
            </ul>
        </div>
    </body>
</html>

<script>
    // 문서가 모두 로딩된 후에 실행
    window.onload = function() {
        // getElementById
        console.log("=============> getElementById");
        const fruits = document.getElementById("fruits");
        console.log(fruits);

        // getElementsByTagName
        console.log("==============> getElementsByTagName");
        const ul = document.getElementsByTagName("ul");
        console.log(ul[0]);
        console.log(ul[1]);

        // getElementsByName
        console.log("==============> getElementsByName");
        const list = document.getElementsByName("list");
        console.log(list);

        // getElementsByClassName
        console.log("==============> getElementsByClassName");
        const clslist = document.getElementsByClassName("ul-list");
        console.log(list);

        // querySelector는 여러개를 가져오는 것이 아니라 제일 처음에 있는 것만 가져온다.
        // querySelectorAll을 하면 다 가져와서 배열로 반환한다.
        // querySelector -> id
        console.log("===============> querySelector -> id")
        const id = document.querySelector("#animals");
        console.log(id);

        // querySelector -> class
        console.log("===============> querySelector -> class")
        const cls = document.querySelector(".ul-list");
        console.log(cls);

        console.log("===============> querySelectorAll -> class")
        const clsarr = document.querySelectorAll(".ul-list");
        console.log(clsarr);

        // querySelector -> tag
        console.log("===============> querySelector -> tag")
        const tag = document.querySelector("ul");
        console.log(tag);
    }
</script>

3. DOM 노드 탐색

document.body	<body> 요소에 대한 DOM 노드를 읽어옴
document.head	<head> 요소에 대한 DOM 노드를 읽어옴
childNodes	자식 노드들을 배열로 읽어옴
firstChild	첫번째 자식 노드를 읽어옴
lastChild	마지막 자식 노드를 읽어옴
parentNode	부모 노드를 읽어옴
nextSibling	형제 노드에서 다음 노드를 읽어옴
previousSilbling	형제 노드에서 이전 노드를 읽어옴

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h2 id="title">문서 객체 모델 탐색</h2>
        <div id="fruits">
            <ul class="ul-list">
                <li id="apple" name="list">사과</li>
                <li id="banana" name="list">바나나</li>
                <li id="orange" name="list">오렌지</li>
            </ul>
        </div>
        <div id="animals">
            <ul class="ul-list">
                <li>강아지</li>
                <li>고양이</li>
                <li>토끼</li>
            </ul>
        </div>
    </body>
</html>

<script>
    window.onload = function() {
        // <head> 노드를 가져오기
        console.log("================> head");
        const head = document.head;
        console.log(head);

        // <body> 노드를 가져오기
        console.log("================> body");
        const body = document.body;
        console.log(body);

        // <body> 노드의 자식 노드들 가져오기
        console.log("================> childNodes");
        const childs = body.childNodes;
        console.log(childs);

        // <body> 노드의 자식 노드중 가장 첫번째 가져오기
        console.log("================> firstChild");
        const first = body.firstChild;
        console.log(first);

        // <body> 노드의 자식 노드중 가장 마지막 가져오기
        console.log("================> lastChild");
        const last = body.lastChild;
        console.log(last);

        // 첫번째 노드 -> 다음 노드 가져오기
        // 즉 자식노드 중 2번째 노드 선택
        console.log("================> nextSibling");
        const next = first.nextSibling;
        console.log(next);

        // 마지막 노드 -> 이전 노드 가져오기
        // 즉 자식 노드 중 마지막에서 2번째 노드 선택
        console.log("================> previousSibling");
        const prev = last.previousSibling;
        console.log(prev);

        // next 노드의 부모 노드 가져오기
        // 즉, <body> 노드 선택됨
        console.log("===============> parentNode")
        const parent = next.parentNode;
        console.log(parent);
    }
</script>

4. DOM 노드 추가 / 삭제

노드 추가
createElement()	엘리먼트를 생성하여 노드 객체를 반환
createTextNode()	텍스트 노드를 생성하여 텍스트 노드를 반환
appendChild()	선택한 엘리먼트의 자식 엘리먼트의 마지막에 추가
before()	선택한 노드의 앞에 추가
after()	선택한 노드의 뒤에 추가
prepend()	현재 엘리먼트의 자식 엘리먼트 첫번째 앞에 추가
append()	현재 엘리먼트의 자식 엘리먼트 마지막 뒤에 추가
setAttribute()	현재 엘리먼트의 속성을 설정
innerHTML	엘리먼트를 텍스트로 직접 입력하여 추가/변경
노드 삭제
remove()	선택한 엘리먼트 삭제
removeChild()	부모 노드에서 선택한 자식 엘리먼트 1개를 삭제

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h2 id="title">문서 객체 모델 추가/삭제</h2>
        <div id="box"></div>
    </body>
</html>

<script>
    window.onload = function() {
        // 문서에 객체(태그)를 삽입하기
        // <h3> 태그를 생성
        const header = document.createElement("h3");
        const text = document.createTextNode("동적으로 태그를 만들자");

        // <h3>에 text를 연결(삽입)한다.
        header.appendChild(text);

        // <body> 문서 하위로 <h3>를 문서 객체로 삽입한다.
        document.body.appendChild(header);

        const section = document.createElement("section");
        document.body.appendChild(section);

        // before : 선택한 노드의 앞에 추가한다.
        // <section> 앞에 텍스트 노드를 추가해보자
        const t2 = document.createTextNode("<section> 태그 앞에 텍스트");
        section.before(t2);

        // after : 선택한 노드의 뒤에 추가한다.
        // <section> 뒤에 텍스트 노드를 추가해보자
        const t3 = document.createTextNode("<section> 태그 뒤에 텍스트");
        section.after(t3);

        // 테스트를 위해서 몇개를 추가해보자
        section.appendChild(document.createTextNode("텍스트 1"));
        section.appendChild(document.createTextNode("텍스트 2"));
        section.appendChild(document.createTextNode("텍스트 3"));

        // prepend : 현재 엘리먼트의 자식 엘리먼트 첫번째에 추가한다.
        const t4 = document.createTextNode("[[ <section> 자식 태그 맨 앞에 ]]");
        section.prepend(t4);

        // append : 현재 엘리먼트의 자식 엘리먼트 마지막에 추가한다.
        section.append(document.createTextNode("[[ <section> 자식 태그 맨 뒤에 ]]"));

        // setAttribute() : 현재 엘리먼트의 속성을 설정한다.
        // <section title="메인 섹션" class="main-section">
        section.setAttribute('title', "메인 섹션");
        section.setAttribute("class", "main-section");

        // innerHTML : 엘리먼트를 텍스트로 직접 입력하여 추가/변경 한다.
        const div = document.createElement("div");
        const list = "<ul>"
                + "<li id='html'>HTML</li>"
                + "<li id='css'>CSS</li>"
                + "<li id='js'>JavaScript</li>"
                + "</ul>";
        
        // 위의 <h3> 태그에 추가해서 <ul>을 아래에 넣어야 하므로 + 을 해준다.
        div.innerHTML = list;

        // <body> 문서 하위로 객체 삽입
        document.body.appendChild(div);

        // remove() 선택한 엘리먼트를 삭제
        const html = document.getElementById("html");
        html.remove();
    }
</script>

저작자표시

'FrontEnd > JavaScript' 카테고리의 다른 글

[JavaScript] JavaScript HTML template (0)	2022.10.07
[JavaScript] JavaScript 함수형 프로그래밍 (0)	2022.10.06
[JavaScript] 문서 객체 모델(DOM) (0)	2022.10.05
[JavaScript] JavaScript Array 객체 (0)	2022.10.04
[JavaScript] typeof / instanceof, String 객체 (1)	2022.09.30

1. DOM 노드

2. DOM 노드 읽기

3. DOM 노드 탐색

4. DOM 노드 추가 / 삭제

'FrontEnd > JavaScript' 카테고리의 다른 글

티스토리툴바