1. DOM tree 구조의 이해

• DOM은 노드들의 집합이라고 할 수 있으며, DOM의 노드에는 요소노드, 속성노드, 텍스트노드로 구성되어 있음

• 노드는 DOM의 구조를 이루는 최소단위이며, 이 노드들의 집합체가 DOM이라 할 수 있음

• html의 태그를 자바스크립트에서는 노드라고 부름

• img 태그는 img src = 'txt' img가 요소노드, src = 속성노드, src값을 텍스트노드라고 함

2. DOM을 구성하는 기본원칙

• 모든 html태그 = 요소(element)노드

• html 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드이다.

• html 태그에 있는 속성은 자식 노드인 속성 노드이다.

• 주석은 주석(comment)노드임

3. document 객체의 메소드

• open(); : 데이터를 보낼 준비

• close(); : 문서에 데이터 출력을 마무리함

• clear(); : 브라우저에서 문서를 지움

• write(); : 문서에 데이터를 출력함

• writeIn(); : 문서에 줄(line) 바꾸기를 포함하여 데이터를 출력함

4. document 객체의 속성

• domain : 현재 문서가 있는 서버의 도메인 이름

• title : 현재 문서의 제목

• bgColor : 문서의 배경색

• fgColor : 문서의 글자색

• linkColor : 문서의 링크 글자색

• alinkColor : 링크를 클릭하였을 때 글자색

• vlinkColor : 방문했던 링크의 글자색

• anchors : 문서의 anchor들의 배열

• cookie : 쿠키에 대한 정보

• URL : 문서의 url 주소

실습1. 현재 작성 중인 문서의 정보 알아보기

• 문서의 title 정보와 url 정보 출력하기

      //문서의 title정보와, url정보 출력하기 
      document.write(`현재 문서의 title 제목은 ${document.write}이고, 문서의 url 주소는 ${document.URL}이다`);

2. 실습2. 버튼 클릭시 문서안의 글자색, 배경색 변경하기(토글버튼 0, 1) _ 다크모드

• 버튼 클릭시 문서안의 글자색 변경해 다크모드 설정하기 _ 글자색 : 흰색 / 배경색 : #333

      //1. 버튼 변수 선언
      const Dbtn = document.getElementById('dark_btn');
      let on = 0;

      //2. 버튼 클릭 이벤트 _ on=0 / on=1 버튼을 만든다고 생각하기
      Dbtn.addEventListener('click',function(){
        if(on==0){  //사용자가 버튼을 클릭하면 변수값과 비교하여 on값이 0과 같다면 아래 내용 실행
          document.bgColor='#333';
          document.fgColor='#fff';
          on=1; 
        }else{  //on값이 0이 아니라면 아래 내용 실행
          document.bgColor='#fff';
          document.fgColor='#333';
          on=0;
        }
      });
    

실습3. 버튼 클릭시 h3 태그만 선택하여 글자색 '빨강'으로 변경하기

      //1. 버튼 변수선언
      const h3_btn = document.getElementById('h3_btn');
      let n = 0;

      //2. 버튼 클릭시 해당 내용 실행
      h3_btn.addEventListener('click',function(){
        const title03 = document.getElementsByTagName('h3');
        //console.log(title03.length) //테스트_버튼 클릭시 h3 태그가 몇개인지 출력

        if(n==0){ //사용자가 버튼을 클릭하면 변수값과 비교하여 on값이 0과 같다면 아래 내용 실행
          //반복문을 사용해 h3의 개수만큼 반복하여 서식을 적용함
          for(let a=0; a<=title03.length; a++){ 
          title03[a].style.color='#dd4a48';
          n=1; 
        }

        }else{ //on값이 0이 아니라면 아래 내용 실행
          for(let a=0; a<=title03.length; a++){
          title03[a].style.color='#333';
          n=0;
        }
        }
      });
      //fgColor는 document객체의 속성으로 사용
      // 일반 문서안의 글자색상을 변경하고자 할 때는 style,color를 사용함
    

실습4. 버튼 클릭시 li태그만 선택하여 서식 적용하기

p태그 입니다

• li태그 입니다.
• li태그 입니다.

      //1. 버튼 변수 선언
      const li_btn = document.getElementById('li_btn');
      let b = 0;

      //2. 버튼 클릭시 해당 내용 실행
      li_btn.addEventListener('click',function(){
        const list = document.getElementsByTagName('li');

        if(b==0){
          for(let c=0; c<=list.length; c++){
            list[c].style.color = '#3a84cb';
            list[c].style.backgroundColor = '#fefaa8';
            b=1;
          }
        }else{
          for(let c=0; c<=list.length; c++){
            list[c].style.color = '#333';
            list[c].style.backgroundColor = '#efefef';
            b=0;
          }
        }
      });