JavaScript DOM

Let's Just Go·2022년 6월 16일
JavaScript
0

JavaScript

목록 보기
3/10

JavaScript

DOM

  • DOM
    • 브라우저의 랜더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성
    • HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API를 제공하는 트리 형태의 자료 구조
  • HTML 요소와 노드 객체

    • HTML 요소는 브라우저 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환

    • 요소의 속성은 Attribute라고 함

  • 주요 노드 객체
    • Document node
      • DOM 트리의 최상위에 존재하는 루트 노드로 document객체로 표현
      • document 객체는 다른 노드들에게 접근하기 위한 진입점 역할
    • Element node
      • 각 html요소들을 가르키는 객체
      • 중첩된 태그에 의해 부모 자식 상속 관계를 형성
    • Attribute node
      • 속성에 해당하는 요소 노드와 형제 관계를 형성
    • Text node
      • 요소 노드의 자식 노드로 형성

ID 속성으로 요소 가져오기

  • getElementById()

    • 요소에 지정한 id를 통해 요소의 값을 가져옴

    • getElementById(’id이름’);

    • Code

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li id="apple">APPLE</li>
        <li id="banana">BANANA</li>
        <li id="grape">GRAPE</li>
        <li id="pine">PINEAPPLE</li>
    </ul>

    <script>
        const $apple = document.getElementById('apple');
        // 관례적으로 노드변수는 이름 앞에 $기호를 붙임
        // $apple이라는 변수에 id를 활용하여 요소를 가져올 수 있음 
        // console.log($apple);
        console.log($apple.attributes[0]);

        // 자바 스크립트를 이용해서 태그에 접근해서 요소를 가져올 수 있네 

        // JS를 이용해서 태그에 접근해서 style을 바꿀 수 있음
        $apple.style.fontSize = '40px';
        document.body.style.background = 'tomato';

        const $item = document.getElementById('banana');
        console.log($item);
        // 없는 id를 지목하면 null이 옴
        if ($item !== null) {
            $item.style.color = 'yellow';
        }

        // 요소에 id를 부여할 시 아이디 값으로 자동 전역변수가 생성 
        grape.style.color = 'violet';
        // getelement안했는데도 요소에 id값을 부여했을 때에는 id값이 자동으로 전역변수가 되네 
        
    </script>
</body>

</html>

태그이름 속성으로 요소 가져오기

  • getElementsByTagName()
    • 요소의 tag 이름으로 요소의 값을 가져와서 변수로 저장 가능
    • getElementsByTagName(’tag이름’);
    • Code
      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id='fruits'>
        <li id="apple">APPLE</li>
        <li id="banana">BANANA</li>
        <li id="grape">GRAPE</li>
        <li id="pine">PINEAPPLE</li>
    </ul>

    <ol>
        <li>야야야</li>
        <li>뭐뭐뭐</li>
        <li>왜왜왜</li>
    </ol>

    <script>
        const $ul = document.getElementById('fruits');
        // ul의 id의 태그 요소를 가지고 옴 

        // 유사 배열 
        // key가 인덱스처럼 구성되어 있고 length property가 있음
        const $test = document.getElementsByTagName('li');
        // tag는 요소가 여러개가 있을 수 있음
        // $test에는 문서내의 li를 모두 가져오기 때문에 다른 값이 들어올 수 있음
        console.log($test);

        const $liArray = $ul.getElementsByTagName('li');
        //대부분의 경우 문서 노드부터 접근하지만 이미 취득한 요소가 있는 경우에도 함수를 이용해서 
        // 요소 내의 요소를 취득할 수 있음
        // $ul에 저장되어 있는 요소에 접근해서 다시 tag이름이 li에 접근 가능 
        // ul의 li들만 가져옴

        console.log($liArray);
        console.log($liArray[0]);
        console.log($liArray.length);
        console.log($liArray['banana']);

        for(let $ele of $liArray ){
            $ele.style.fontStyle = 'italic';
            $ele.style.fontWeight = 'bold';
        }
        
        for (let i = 0; i < $liArray.length; i++){
            $liArray[i].style.color = 'red';
        }
        // 저장된 변수를 통해서 반복문을 통해 스타일을 변경하거나 요소에 접근 가능

    </script>
</body>

</html>

클래스 이름 속성으로 요소 가져오기

  • getElementsByClassName()

    • 클래스이름으로 접근하여 요소의 값을 가져옴

    • getElementsByClassName(’클래스 이름’);

    • Code

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="fruits">
        <li class="fruit apple">APPLE</li>
        <li class="fruit banana">BANANA</li>
        <li class="fruit grape">GRAPE</li>
    </ul>

    <script>
        const $elements = document.getElementsByClassName('fruit');
        // 클래스 이름은 겹칠 수 있으므로 
        console.log($elements);

        const $banana = document.getElementsByClassName('banana');
        console.log($banana);
        $banana[0].style.color = 'yellow';
        // $banana는 유사객체로 반환되었기 때문에 객체 요소 지정하는 [인덱스]을 통해서 접근
    </script>
</body>

</html>

다양한 선택자로 요소 가져오기

  • querySelector

    • CSS의 다양한 선택자(id, tag, class 등)를 통해 쉽게 요소에 접근 가능

    • querySelectorAll은 특정 요소들을 가지고 와서 유사 배열 객체(nodelist)를 반환

    • 유사 배열 객체는 진짜 배열이 아니므로 많은 배열 함수를 사용할 수 없음

    • Code

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="fruits">
        <li class="fruit apple">APPLE</li>
        <li class="fruit banana">BANANA</li>
        <li class="fruit grape">GRAPE</li>
    </ul>

    <script>
        // css의 선택자의 개념이 잡혀있어야 사용 가능 
        const $elem = document.querySelector('.banana');
        // css의 선택자 지정
        // class는 .으로 시작 id는 #으로 시작
        console.log($elem);

        const $ele = document.querySelector('#fruits > li:nth-child(2)');
        // fruits 안에 직속 자식인 li의 2번째 선택 
        console.log($ele);

        const $elee = document.querySelector('li[class="fruit banana"]')
        console.log($elee);

        const $elew = document.querySelector('li.apple + li');
        // li에 이름이 apple인 것에 옆에 있는 li를 선택 : banana 
        console.log($elew);

        $elem.style.color = 'yellow';

        const $elements = document.querySelectorAll('#fruits > li');
        // queryselsectorall은 모두 가져옴
        // fruits안에 있는 li 모두 가져와라라는 뜻
        // 유사배열 객체 형태 
        console.log($elements);

        for (let $ele of $elements) {
            $ele.style.background = 'red';
        }
        // 유사 배열 객체이므로 반복문을 활용하여 style 지정 가능 

        const $test = document.querySelectorAll('.peach');
        console.log($test);
        // 없는 선택자 지목 시 null이 오지 않고 빈 노드 리스트 객체가 옴
    </script>

</body>

</html>

유사배열

  • 유사배열 객체

    • 유사 배열 객체는 진짜 객체가 아니므로 많은 객체 함수를 사용할 수 없음

    • 유사 배열 객체를 객체로 사용하기 위해서는 Array.from(유사배열객체); 하거나 […유사배열객체]; 를 통해 객체로 변환해야함

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li {
            font-size: 30px;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <!-- ul#fruits>li.red*4 -->
    <ul id="fruits">
        <li class="red">APPLE</li>
        <li class="red">BANANA</li>
        <li class="red">GRAPE</li>
        <li class="red">PEACH</li>
    </ul>

    <script>
        // 유사 배열 NodeList 리턴 
        const $elements = document.querySelectorAll('.red');

        // 유사 배열 HTMLCollection 리턴 
        const $elements1 = document.getElementsByClassName('red');

        // let $ele = $elements.pop();
        // 배열의 함수인 pop() 사용할 수 없음 

        // 유사배열 객체를 배열처럼 제어할 때는 순수 배열로 변경해서 작성 
        // const realArray = Array.from($elements1);
        const realArray = [...$elements];
        // Array.from();으로 유사 배열 객체를 진짜 배열로 변경할 수 있고 [...유사배열객체]를 통해서도 변경 가능

        console.log(realArray);

        let $ele = realArray.pop();
        console.log($ele);
        // 배열로 변환되어 있는 것을 확인

        for (let i = 0; i < realArray.length; i++) {
            realArray[i].className = 'blue';
            // 반복문을 이용해서 classname을 바꿔줌
        }
    </script>

</body>

</html>
profile
Let's Just Go
안녕하세요! 공부한 내용을 기록하는 공간입니다.
이전 포스트

JavaScript Function & Variable

다음 포스트

JavaScript DOM Control

0개의 댓글