[J] JavaScript & jQuery 공부하기 #20

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

25. DOM 객체 다루기
  - 문서 객체 생성
    * 문서 객체의 구분
    : 기본적으로 텍스트 노드를 가지는 객체와 갖지 않는 개체로 구분함
    * 텍스트 노드를 가지는 문서 객체 생성
    - 생성 순서
    1. 요소 노드와 텍스트 노드를 생성함
    2. 텍스트 노드를 요소 노드에 연결함
    - 관련 메소드
    1. createElement(tagName) - 요소 노드 생성
    2. createTextNode(text) - 텍스트 노드 생성
    3. appendChild(node) - 객체에 노드 추가

    < script type="text/javascript">
      window.onload = function(){
        // 변수 선언
        var element = document.createElement('h1');
        var text = document.createTextNode('Hello');

        // 노드 연결
        element.appendChild(text);
        document.body.appendChild(element);
      };
    </ script>

    * 텍스트 노드를 갖지 않는 문서 객체 생성
      - 생성 순서
      1. 텍스트 노드를 갖지 않는 img 태그를 생성
      2. body 객체에 연결함
      - 관련 메소드(웹 브라우저가 지원하지 않는 속성일 경우)
      1. setAttribute(name, value) - 객체의 속성 지정
      2. getAttribute(name) - 객체의 속성값을 얻음

      < script type="text/javascript">
        window.onload = function(){
          // 변수 선언
          var img = document.createElement('img');
          img.setAttribute('src','Koala.jpg');
          img.setAttribute('width','500');
          img.setAttribute('height','300');

          document.body.appendChild(img);
        };
      </ script>

     * 객체의 innerHTML속성
      - 특정한 노드 영역에 HTML 태그 삽입
      < script type="text/javascript">
        document.body.innerHTML += '< h1>내용</ h1>';
      </ script>
      > body 태그에 내용 추가 시 복합대입연산자 이용

     * 문서 객체 가져오기
      - getElementById(id)메소드
      : 인자로 지정된 id값과 동일한 id값을 가진 문서 객체의 참조를 얻어옴

      - getElemntByName(name)메소드
      : 태그의 name 속성이 인자로 지정된 값과 동일한 문서 객체들의 참조를 얻어옴

      - getElementByTagName(tagname)
      : 인자로 지정한 tagname과 일치하는 태그 이름을 가진 문서 객체들의
        참조를 배열로 가져옴

      - removeChild(Child) 메소드
      : 문서 객체의 자식노드 제거
      : 문서 객체 바로 아래에 제거하려는 객체가 있어서 가능한 코드

      - willRemove.parentNode.removeChild(willRemove) 메소드
      : 일반적으로 문서 객체를 제거할 경우