DOM Method   DOM 메소드

(2022-07-30)

appendChild(), insertBefore() , prepend() , append()


1. DOM 노드 접근 메소드 노드 찾기/접근                                                       ☞ DOM 노드 접근 참조
     - getElementById(id), getElementsByTagName(tag), getElementsByClassName(class),
       getElementsByName(name)

  ㅇ 노드 워킹(walking) 또는 돌아다님(traverse)
     - 메소드 이용 방법
        . Element.closest(selector) : 가장 근접한 상위 요소 1개 만 반환
     - 프로퍼티 이용 방법  ☞ DOM 프로퍼티 (3.항) 참조

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

  ㅇ 노드 일치 여부
     - 노드 일치 : matches(selectors)
        . 인수로 전달된 선택자에 의해, 특정 노드를 탐색 가능한지 여부를 확인 함


2. DOM 노드 조작(생성/추가/제거/교체/복사) 메소드 노드 생성
     - 요소 노드 생성 :  createElement(tag)
     - 텍스트 노드 생성 :  createTextNode(text)
     - 속성 노드 생성 :  createAttribute(attr)
     - 주석 노드 생성 :  createComment(text)

     * 생성 例) var element = document.createElemet('tag명');

     * 한편, 노드 생성은, 단지 생성 만 된 것이고, 실제 DOM 트리에 적용하기 전임

  ㅇ 노드 추가    
     - 마지막 자식 노드 추가 :  var new = parentNode.appendChild(new)
     - 지정 자식 노드 바로 앞에 추가 :  var insertedNode = parentNode.insertBefore(new,reference)

     - ParentNode.prepend() : 부모 노드 ParentNode의 처음 자식 노드로 추가
     - ParentNode.append() : 부모 노드 ParentNode의 마지막 자식 노드로 추가
     
  ㅇ 노드 제거                                                 ☞ MDN removeChild 참조
     - 자식 노드 제거 :  parentNode.removeChild(child)
     - 노드 자신 제거 :  currentNode.remove()

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

  ㅇ 노드 복사 :  cloneNode()

  ㅇ 자식 노드 유무
     - element.hasChildNodes()

     * property로 확인하는 경우
     - if (element.firstChild)
     - if (element.firstElementChild)
     - if (element.childNodes.length > 0)
     - if (element.children.length > 0)


3. DOM 기타 메소드웹문서에 쓰기 (document 객체에 소속된 유용한 메소드)
     - document.write() : 문자열을 전달 받아 웹문서에 쓰기
     - document.writeln() : write() 뒤에 줄바꿈 문자를 추가

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

JS DOM 제어
   1. DOM 트리 모델   2. DOM 트리,노드   3. DOM 메소드   4. DOM 프로퍼티   5. DOM 노드 접근   6. DOM 요소 컬렉션   7. DOM 크기,위치  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"