DOM (Document Object Model)

04 Oct 2021 - Less than 1 minute read

DOM

• DOM : Document Object Model, 문서 객체 모델

• XML이나 HTML문서에 접근하기 위한 일종의 인터페이스

Document 메소드

• document.getElementsByTagName(태그이름)[인덱스번호] : 해당 인덱스 번호를 가진 태그 이름의 요소를 선택

• document.getElementById(아이디) : 해당 아이디의 요소를 선택

• document.getElementsByClassName(클래스이름) : 해당 인덱스 번호를 가진 클래스 이름의 요소를 선택

• document.querySelector(선택자) : 해당 선택자로 선택된 요소 중 첫 번째 요소를 선택

• document.querySelectorAll(선택자) : 해당 선택자로 선택되는 요소를 모두 선택

• document.write(텍스트) : HTML 출력 스트림을 통해 텍스트를 출력

DOM 요소의 내용 변경

• .value : input 과 같은 form 요소의 값을 가져옴

• .innerHTML : 텍스트 뿐 아니라 HTML 태그 요소까지 변경 가능

• .innerText : 마크업 언어가 적용(render)된 상태로 읽어옴 > HTML의 요소가 제거된 텍스트만 가져옴

• .textContent : 마크업 태그를 제외한 모든 문자열 읽고 변경 가능