반응형
HTML DOM은 객체(Object)들의 트리(tree)로 구성되어 있고, Document 객체를 포함하고 있습니다. Document 객체는 자식 노드로 HTML 객체를 포함하고 있습니다.
DOM(Document Object Model)은 Document에서 element를 만들거나, 변경하거나, 제거할 수 있다고 하였고, 그 과정에서 Document는 HTML elements를 선택하고, 제어할 수 있도록 메소드를 제공한다고 하였습니다. 그럼 이 메소드들은 어떤 방법으로 사용할 수 있을까요? 여기서 사용되는 것이 바로 JavaScript 입니다.
DOM은 HTML/CSS와 JavaScript를 이어주는 역할을 합니다. JavaScript를 사용하면 Document element에 접근하고 선택 및 변경할 수 있습니다.
JavaScript를 사용하여 DOM에서 작업할 수 있는 몇 가지 예를 살펴보겠습니다.
HTML elements 선택
HTML 요소를 선택하기 위해 제공되는 메소드는 다음과 같습니다.
메소드 | 설명 |
document.getElementsByTagName(태그이름) | 해당 태그 이름의 요소를 모두 선택함. |
document.getElementById(아이디) | 해당 아이디의 요소를 선택함. |
document.getElementsByClassName(클래스이름) | 해당 클래스에 속한 요소를 모두 선택함. |
document.getElementsByName(name 속성값) | 해당 name 속성값을 가지는 요소를 모두 선택함. |
document.querySelectorAll(선택자) | 해당 선택자로 선택되는 요소를 모두 선택함. |
HTML elements 생성
새로운 HTML 요소를 생성하기 위해 제공되는 메소드는 다음과 같습니다.
메소드 | 설명 |
document.createElement(HTML요소) | 지정된 HTML 요소를 생성함. |
document.write(텍스트) | HTML 출력 스트림을 통해 텍스트를 출력함. |
HTML 이벤트 핸들러 추가
HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 메소드는 다음과 같습니다.
메소드 | 설명 |
document.getElementById(아이디).onclick = function(){ 실행할 코드 } |
마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함. |
반응형
'IT 정보 > IT 용어' 카테고리의 다른 글
개발 기본 용어 (0) | 2022.10.13 |
---|---|
프로그래밍 기본 용어 (0) | 2022.10.13 |
DOM - HTML (2) | 2022.10.07 |
정적 페이지 vs 동적 페이지 (0) | 2022.10.06 |
WEB Server, WAS (1) | 2022.10.05 |
댓글