DOM

1. Document Object Model(문서 객체 모델)
2. HTML문서(Document)의 구성요소(Object)를 알아내고 사용할 수 있음
3. 문서 객체 : HTML문서의 구성요소를 의미함
   1) document.getElementById('아이디') : 변수
   2) document.getElementsByClassName('클래스') : 배열
   3) document.getElementsByTagName('태그') : 배열
   4) document.querySelector('선택자') : 변수
   5) document.querySelectorAll('선택자') : 배열

변수와 배열

    <h1 id="hello">Hello World</h1>
    <script>
        // 1. 아이디로 인식하면 변수로 가지고 옴
        var a = document.getElementById('hello');
        console.log(a);
        // 2. 태그로 인식하면 배열로 가지고 옴
        var b = document.getElementsByTagName('h1');
        console.log(b);
    </script>

아이디 호출과 변경

    <h1 id="hi">Hi World</h1>
    <script>
        // 문서 객체
        var a = document.getElementById('hi');
        // 문서 객체 속성 알아내기
        console.log(a.id); // 속성의 직접 호출
        console.log(a.getAttribute('id')); // getter를 이용한 호출
        // 문서 객체 속성 변경하기(조작)
        a.id = 'heeheehee'; // 속성의 직접 조작
        a.setAttribute('id', 'hihihi'); // setter를 이용한 조작 
        // 덮어쓰기로 최종적으로 아이디는 hihihi로 바뀜
    </script>

링크 변경하기

    <div>
        <a id="naver" href="https://www.google.com">네이버</a>
    </div>
    <script>
        var a = document.getElementById('naver'); // 문서 객체
        a.href = 'https://www.naver.com'; // 문서 객체 속성 변경하기(링크변경)
    </script>

문서 객체 속성

textContent: 태그 내부 텍스트 변경
innerHTML : 태그까지 수정

textContent

    <div id="box1">
        <h1>Hello World</h1>
    </div>
    <script>
        var a = document.getElementById('box1');
        console.log(a.textContent); // textContent : 글자만 수정
        a.textContent = '안녕 세계';
    </script>

innerHTML

    <div id="box2">
        <h1>Hello World</h1>
    </div>
    <script>
        var a = document.getElementById('box2');
        console.log(a.innerHTML);
        // 수정
        // a.innerHTML = '<h3>안녕 세계</h3>'; -> <div id=box2><h3>안녕 세계</h3></div>
        // 기존 + 수정
        a.innerHTML += '<h3>안녕 세계</h3>'; // <div id=box2><h1>Hello World</h1><h3>안녕 세계</h3></div>
    </script>

구글로 이동하는 구글 로고 이미지 삽입

    <div><a id="google"></a></div>
    <script>
        var a = document.getElementById('google');
        a.href='https://www.google.com'; // 주소 추가
        a.innerHTML='<img alt="구글로고" src="../../images/google.png">'; // 구글 로고 추가
    </script>

목록 추가

    <ul id="front">
        <li>HTML</li>
        <li>CSS</li>
    </ul>
    <script>
        var a = document.getElementById('front');
        a.innerHTML += '<li>JS</li>'; // 기존 innerHTML 태그 뒤에 추가
    </script>

봄, 여름, 가을, 겨울 목록 만들기

	// 봄, 여름, 가을, 겨울 목록 만들기
    <ul id="season"></ul>
    <script>
        document.getElementById("season").innerHTML = '<li>봄</li><li>여름</li><li>가을</li><li>겨울</li>';
        // var a = document.getElementById("season");
        // a.innerHTML += '<li>봄</li><li>여름</li><li>가을</li><li>겨울</li>';
    </script>

class 이름 변경

    <div class="primary" id="area">텍스트영역</div>
    <script>
        document.getElementById('area').className = 'hahaha';
        document.getElementById('area').setAttribute('class', 'hi');
        // 덮어쓰기로 class 이름은 hi
    </script>