DOM Method   DOM 메소드

(2019-05-21)
1. DOM 노드 조작 메소드 노드 접근                                                         ☞ DOM 노드 접근 참조
     - 요소 찾기/접근 : getElementById(id), getElementByTagName(tag)

  ㅇ 노드 생성
     - 요소 노드 생성 :  createElement(tag)
     - 텍스트 노드 생성 :  createTextNode(text)
     - 속성 노드 생성 :  createAttribute(attr)
     - 주석 노드 생성 :  createComment(text)

     * 생성 例) var element = document.createElemet('tag명');
     * [참고] 노드 생성은 단지 생성 만 된 것이고, 실제 DOM 트리에 적용 전임

  ㅇ 노드 추가    
     - 마지막 자식 노드 추가 :  appendChild(new)
     - 지정 자식 노드 바로 앞에 추가 :  insertBefore(new,old)

     * 실험적인 메소드들
        . ParentNode.prepend() : 부모 노드 ParentNode의 처음 자식 노드로 추가
        . ParentNode.append() : 부모 노드 ParentNode의 마지막 자식 노드로 추가
     
  ㅇ 노드 제거
     - 자식 노드 제거 :  removeChild(child)

  ㅇ 노드 교체 :  replaceChild(new,old)

  ㅇ 노드 복사 :  cloneNode()

  ㅇ 자식 노드 유무 :  hasChildNodes()

  ㅇ 속성(attribute) 접근,변경
     - 속성 읽기/접근 : getAttribute(속성이름)
     - 속성 추가/변경 : setAttribute(속성이름,속성값)

  ㅇ 노드 워킹(walking) 또는 돌아다님(traverse)
     - 이 용도로는, 실험적인 메소드인 Element.closest() 정도 만 가능
     - 주로, DOM 프로퍼티를 이용함
        . 노드 관계 (1개 만 가리킴)
           .. parentNode (직계 부모)
           .. firstChild (첫번째 자식), lastChild (마지막 자식)
           .. previousSibling (직전 형제), nextSibling (직후 형제)
        . 노드 리스트 (컬렉션/유사배열객체/집합을 가리킴)
           .. childNodes (직계 자식들)
           .. children (모든 자손들)


2. DOM 기타 메소드DOM 모델에 의한 노드의 조작/처리 이외, document 객체에 소속된 유용한 메소드로는,
     - write() : 문자열을 전달 받아 웹문서에 쓰기
     - writeln() : write() 뒤에 줄바꿈 문자를 추가

  ㅇ form 요소 관련 메소드
     - submit(), reset()
     - focus(), blur()
     - select()


[JS DOM 제어] 1. DOM 트리 2. DOM 메소드 3. DOM 프로퍼티 4. DOM 노드 접근

 
        최근수정     요약목록     참고문헌