[JAVA SCRIPT] 03_dom

DOM

• Document Object Model (문서 객체 모델)
• HTML 문서(Document)의 구성요소(Object)를 알아내고 사용할 수 있음

문서 객체 : HTML문서의 구성요소를 의미함

• document.getElementById('아이디') : 변수
• document.getElementsByClassName('클래스') : 배열
• document.getElementsByTagName('태그') : 배열
• document.querySelector('선택자') : 변수
• document.querySelectorAll('선택자') : 배열

문서 객체 속성 : HTML구성요소의 속성(Attribute)을 의미함

• 객체.속성 방식으로 호출
• 주요 속성
  • textContent : 태그 내부 텍스트
  • innerHTML : 태그 자체
  • style : CSS
• 조작 방법
  • 속성을 직접 조작
  • getAttribute(), setAttribute() 메소드 활용
    • 속성 알아내기 : getAttribute('속성')
    • 속성 변경하기 : setAttribute('속성')

<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를 이용한 조작 
    </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>

---

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

<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>
  /* 글자만 수정하고 싶으면 textContent 태그까지 수정하고 싶으면 innerHTML */
</script>

---

🔍 연습 : 구글로 이동하는 구글 로고 이미지 넣기

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

🔍 연습 : 목록(JS) 추가하기

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

🔍 연습 : 봄,여름,가을,겨울 목록 만들기

<ul id="season'>
</ul>
<script>
        document.getElmentById('season').innerHTML = '<li>봄</li><li>여름</li><li>가을</li><li>겨울</li>';
</script>

---

<div class="primary" id="area">텍스트영역</div>
    <script>
        // 모든 속성 확인하기
        // 속성
        //    1. HTML 태그 관점 : attribute
        //    2. DOM 관점       : property 
        // 개발자 도구 - Elements - Properties
        document.getElementById('area').className = 'hahaha';
        document.getElementById('area').setAttribute('class', 'hi');
    </script>