자바스크립트 DOM

Dom 이란?

Document Object Model의 약자로 HTML을 제어 할 수 있는 API의 역할을 한다.

DOM의 처리 순서

  • 제어 대상 탐색
  • 제어 대상 메소드 실행 및 이벤트 핸들러 등록

Dom Method

  • createElement : HTML 요소를 생성
  • appendChild : 자식에 요소를 추가
  • getAttribute : 속성을 가져옴
  • setAttribute : 속성을 넣음
  • getElementById : ID속성으로 요소를 가져옴
  • getElementsByName : NAME속성으로 요소를 가져옴(배열)
  • getElementsByTagName : 엘리먼트명으로 요소를 가져옴(배열)

이러한 Dom 메소드를 어떻게 사용하는지 알아볼 것이다.

HTML

Javascript

jQuery 에서는?

Manipulation – 조작

  • append : 자식요소를 가장 뒤에 추가한다.
  • prepend : 자식요소를 가장 앞에 추가한다.
  • after : 형제요소를 뒤에 추가한다.
  • before : 형제 요소를 앞에 추가한다.
  • attr : 속성을 가져오거나 지정할 수 있다.(get/set)
  • html : 선택된 요소 안에 HTML을 가져오거나 지정할 수 있다.(get/set)
  • text : 선택된 요소 안에 텍스트만 가져오거나 지정할 수 있다.(get/set)
  • val : 선택된 요소의 value 값을 가져오거나 지정할 수 있다.(get/set)
  • css: 선택된 요소의 css 값을 가져오거나 지정할 수 있다.(get/set)
  • remove : 선택된 요소를 삭제한다.

Traversing – 탐색

  • find : 선택된 요소 아래에 있는 요소를 검색해서 선택한다.
  • next : 선택된 요소 다음 요소를 선택한다.
  • prev : 선택된 요소 이전 요소를 선택한다.
  • parent : 선택된 요소의 부모 요소를 선택한다.
  • children : 선택된 요소의 자식 요소를 선택한다.

 

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다