DOM 정리

DOM에 접근하기

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

 

속성 가져오기 및 수정하기

• getAttribute(속성) : 태그에서 사용한 속성값을 가져옴
• setAttribute(속성, 값) : 태그의 속성을 특정한 값으로 지정함

 

이벤트 처리하기

• 요소.addEventListener(이벤트, 함수, 캡처 여부) 

 

CSS 속성에 접근하기

• document.요소명.style.속성명

 

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

• createElement() -> createTextNode() -> appenChild() -> appendChild()

 

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

• createElement() -> createAttribute() -> 속성값 지정하기 -> setAttributeNode() -> appendChild()

 

노드 삭제

• 부모노드.removeChild(자식 노드)

 

 

 

 

 

자세한 내용은 아래 게시글 참고

https://lee-ding.tistory.com/57

문서 객체 모델 (DOM)