1편 - [Web Programming] - JAVA Script 1편 + 자바스크립트 기본
HTML태그를 자바스크립트에서 이용할 수 있게 객체로 만든 것을 문서 객체라고 부른다.
따라서 자바스크립트에서 문서 객체를 사용하면 HTML 태그를 생성, 제거하거나 조작할 수 있다.
또한 마우스를 클릭하거나 키보드를 누르는 등의 이벤트에 반응할 수 있다.
웹 브라우저에 HTML 파일을 끌어다 놓으면 웹 브라우저는 HTML파일을 분석하고 화면에 표시한다.
이때 웹 브라우저가 HTML 파일을 분석하고 표시하는 방식을 문서 객체 모델 ( DOM document Object Model )이라 한다.
문서 객체 모델의 관련 용어로 태그, 문서 객체, 노드라는 친구들이 등장한다.
태그는 <p>, <h1>등의 친구들이다. 계속해서 만나온 아이들이라 따로 설명하지 않겠다.
이런 태그들을 자바스크립트에서 이용할 수 있는 객체로 만든 것을 문서 객체라고 한다. HTML의 요소와 같다.
우리는 자바스크립트에서 이 문서 객체라는 녀석을 어떻게 조작하는지 알아 볼 것이다. 😲
다음으로 노드를 알아보겠다. 아래의 사진과 같이 코드를 트리형태로 나타 냈을 때
존재하는 각각의 요소를 우리는 노드라고 한다.
title이나 h1처럼 요소를 생성하는 노드를 요소 노드,
화면에 출력되는 문자열인 context, hello같은 친구들을 텍스트 노드라 한다.
이제 본격적으로 문서 객체를 어떻게 사용하는지 알아보자 😳
이미 존재하는 HTML 채그를 자바스크립트에서 문서 객체로 변환하는 것을
' 문서 객체를 선택한다 ' 라고 한다.
우리는 문서 객체를 선택해서 실행 중에 스타일을 변경할 수 있다.
우리는 위의 메소드로 우리는 하나의 문서 객체를 선택할 수 있다.
( ⚠ 이때 아이디값이 중복이 되는게 있으면 안된다. )
내가 하나의 문서 객체를 강조한 이유는 h1태그가 3개 있고 자바스크립트에
document.querySelector(h1);을 사용했다면 하나만 선택 되기 때문에 가장 첫번째 친구만이 선택된다.
하나만 선택하는 것을 알아 봤으니 이어서 여러 개의 문서 객체를 선택하는 메소드를 알아보자.
다음과 같은 메소드로 여러 개의 문서 객체를 선택하면 배열의 형태로 문서 객체가 반환된다.
표에서 정리한 5가지 메소드 앞에 document라는 객체명이 모두 붙어 있는데
이친구가 가장 위에서 설명 했듯이 HTML 문서가 웹 브라우저에 로드 됐을 때의 문서 객체가 된 형태다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <title> DOM Basic </title> <script> window.onload = function () { //문서 객체를 선택 var headers = document.querySelectorAll('h1'); for( var i = 0; i < headers.length; i++ ) { var header = headers[i]; header.style.color = 'green'; } } </script> </head> <body> <h1> context </h1> <h1> context </h1> <h1> context </h1> </body> </html> | cs |
이어서 문서 객체에 대해 계속해서 공부해보자 !
'웹 프로그래밍' 카테고리의 다른 글
| [ JSP ] redirect + forward + include 파헤치기 (2) | 2018.05.22 |
|---|---|
| Java Script 3편 + 자바스크립트 문서 객체 조작 (0) | 2018.05.16 |
| JAVA Script 1편 + 자바스크립트 기본 (0) | 2018.05.15 |
| CSS 속성 정리편 + 추가 기타 속성과 키워드 (2) | 2018.05.11 |
| CSS 속성 4편 마지막 ( float + 그림자 + 그레이디언트 속성 ) (0) | 2018.05.10 |