[정리] 3 | DOM 트리, 접근하기 & 새로운 요소 추가, 노드 삭제 정리

[정리] 3 | DOM 트리, 접근하기 & 새로운 요소 추가, 노드 삭제 정리

DOM 트리의 노드

요소 노드 : 모든 HTML 태그 의미
텍스트 노드 : 태그의 텍스트 내용
속성 노드 : 태그의 속성
주석 노드 : 주석

DOM 에 접근하기

getElementById(id) : id 명으로 접근
getElementsByClassName(class) : class 명으로 접근, 배열 형태로 저장
getElementsByTagName(tag) : 태그명으로 접근, 배열 형태로 저장
querySelector() : id 명이나 선택자를 사용하여 접근
querySelectorAll() : 클래스명이나 태그명의 선택자를 사용해 접근, 노드 리스트 형태로 저장

- 속성 가져오기 및 수정하기
getAttribute(속성)      // 태그에서 사용한 속성값 가져옴
setAttribute(속성, 값)  // 태그의 속성을 특정한 값으로 지정

- 이벤트 처리하기
요소.addEventListener(이벤트, 함수, 캡처 여부)

- CSS 속성에 접근하기
document.요소명.style.속성명

텍스트 노드를 사용하는 새로운 요소 추가하기

순서	메서드	설명
1	createElement( )	새로운 요소 노드를 만듦
2	createTextNode( )	새로운 텍스트 노드를 만듦
3	appendChild( )	텍스트 노드를 요소 노드의 자식으로 연결
4	appendChild( )	요소 노드를 DOM 에 연결

속성값이 있는 새로운 요소 추가하기

순서	메서드	설명
1	createElement( )	새로운 요소 노드를 추가
2	createAttribute( )	새로운 속성 노드를 추가
3	속성값 지정하기	속성값을 프로퍼티로 지정
4	setAttibuteNode( )	속성 노드를 요소 노드의 자식으로 연결
5	appendChild( )	요소 노드를 DOM 에 연결

노드 삭제

parentNode 프로퍼티로 부모 노드를 찾아서 부모 노드에서 삭제
부모노드.removeChild(자식 노드)

 

 

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)