728x90
반응형
1. Document 객체
JavaScript에서 document는 웹 페이지의 내용을 나타내는 DOM(문서 객체 모델) 트리의 최상위 객체이다. 브라우저가 HTML 문서를 로드하기 전에 먼저 document 객체를 생성하고, 이를 바탕으로 DOM 트리를 구성한다. 이 과정에서 document는 HTML 요소에 접근하고 조작할 수 있는 강력한 도구로 기능한다.
- 역할
- HTML 문서의 전반적인 속성: document의 객체의 프로퍼티를 통해 문서의 메타 정보(제목, 본문, 헤더 등)를 쉽게 접근할 수 있다.
- DOM 객체 검색:다양한 메서드를 사용하여 DOM 트리 내의 특정 요소를 찾고, 이를 통해 웹 페이지의 내용을 동적으로 변경할 수 있다.
- 새로운 DOM 객체 생성: document 메서드를 활용하여 HTML 요소를 동적으로 생성하고 페이지에 추가함으로써, 사용자 인터페이스를 보다 유연하게 조정할 수 있다.
- HTML 문서의 제어: 메서드를 사용하여 문서의 내용, 스타일, 구조를 수정함으로써, 사용자 경험을 향상시킬 수 있다.
2. 이벤트 리스너
JavaScript에서는 다양한 이벤트 리스너를 제공하여 사용자와의 상호작용을 처리할 수 있다. 그 중 가장 많이 사용하는 이벤트 리스너는 다음과 같다.
- onclick: 클릭 이벤트 발생 시
- onerror: 오류 발생 시
- onmouseover: 마우스 오버 시
- onscroll: 스크롤 시
- onkeypress: 키 입력 시
- onload: 문서가 로드될 때
모든 이벤트 리스너는 on으로 시작하여, 해당 이벤트의 발생 시점을 명시한다.
3. Document 객체의 주요 프로퍼티, 컬렉션, 메서드
1) 주요 프로퍼티
- title: 문서의 제목을 나타낸다. 이는 브라우저 탭에 표시되는 텍스트이다.
- body: <body> 태그에 해당하는 DOM 요소로, 실제 콘텐츠가 위치하는 부분이다.
- head: <head> 태그에 해당하는 DOM 요소로, 문서의 메타데이터를 포함한다.
- URL: 현재 문서의 URL을 반환한다.
- location: 현재 문서의 URL 정보를 가진 Location 객체에 대한 레퍼런스이다.
- referrer: 현재 문서를 로드한 원래 문서의 URL. 처음 로드한 경우에는 빈 문자열이다.
2) 주요 컬렉션
- images: 문서 내의 모든 <img> 요소들의 컬렉션으로, 이미지에 대한 동적 조작이 가능하다.
- links: 문서 내의 href 속성을 가진 모든 링크 객체들의 컬렉션이다. 이를 통해 문서 내 모든 링크를 쉽게 탐색할 수 있다.
- forms: 문서 내의 모든 폼 객체들의 컬렉션으로, 사용자 입력을 처리하는 데 필수적이다.
3) 주요 메서드
- getElementById(): 특정 ID를 가진 첫 번째 DOM 객체를 반환한다. ID는 문서 내에서 유일해야 하므로, 이를 통해 쉽게 요소를 찾을 수 있다.
- getElementsByTagName(): 특정 태그명을 가진 모든 태그의 컬렉션을 반환한다. 여러 개의 요소를 한 번에 처리할 수 있어 유용하다.
- getElementsByClassName(): 특정 클래스명을 가진 모든 태그의 컬렉션을 반환한다. CSS 클래스를 통해 스타일을 적용하는 데 유리하다.
- open(): 현재 문서의 콘텐츠를 모두 지우고 새로운 HTML 콘텐츠를 쓸 수 있도록 준비한다.
- write(), writeIn(): document에 HTML 콘텐츠를 삽입한다. writeIn()은 write() 호출 후 줄바꿈을 추가하여 가독성을 높인다.
- close(): document 객체에 있는 HTML 콘텐츠를 브라우저에 출력하고, 더 이상 쓰기를 받지 않게 한다.
3. 객체 생성
자바스크립트 객체는 기능(method)과 속성(property)을 가지고 있다.
1) 기본 객체의 생성자 함수 사용
let objSample = new Object();
objSample.property1 = 'value1';
objSample.property2 = 'value2';
objSample.property3 = 'value3';이 방식은 객체를 생성하는 가장 기본적인 방법으로, 동적으로 프로퍼티를 추가할 수 있다.
2) 객체 리터럴 사용
let objTest = {};
let sampleObj = {
property1: 'value1',
property2: 'value2',
property3: 'value3'
};객체 리터럴은 가장 간단하고 직관적인 방법으로, 여러 프로퍼티를 한 번에 정의할 수 있어 편리하다.
✔️중괄호({})와 대괄호([]) 차이(자바와 헷갈리지 말기)
JavaScript에서 변수 선언 시 [](대괄호)와 {}(중괄호)는 각각 배열과 객체를 정의하는 데 사용된다. 두 데이터 구조는 모두 여러 값을 저장할 수 있지만, 그 방식과 용도가 다르다.
1. 배열 ([])
정의: 배열은 순서가 있는 데이터 집합으로 대괄호 []로 정의한다.
- 특징:인덱스: 배열의 각 요소는 0부터 시작하는 인덱스를 가지며, 인덱스를 통해 접근한다.
- 순서: 요소의 순서가 중요하다. 배열은 인덱스 순서대로 요소를 저장하고, 이를 기반으로 작업할 수 있다.
- 유형: 배열은 다양한 데이터 유형(숫자, 문자열, 객체 등)을 혼합하여 저장할 수 있다.
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // 'apple'2. 객체 ({})
정의: 객체는 키-값 쌍으로 구성된 데이터 집합으로 중괄호 {}로 정의한다.
- 특징:
1) 키: 각 값은 고유한 키에 의해 식별된다. 이 키는 문자열이며, 이를 통해 값에 접근한다.
2) 비순서: 객체는 내부적으로 순서가 없는 데이터 구조이다. 따라서 키의 순서가 중요하지 않다.
3) 유형: 객체는 다양한 데이터 유형을 포함할 수 있으며, 복잡한 데이터 구조를 만들 수 있다.
let person = {
name: 'John',
age: 30,
city: 'New York'
};
console.log(person.name); // 'John'
3) 생성자 함수 사용
정의된 함수를 new 키워드로 호출하면 생성자로 사용된다. 일반 함수와 생성자 함수의 형식은 동일하나, 생성자 함수는 첫 글자를 대문자로 표기하는 것이 권장된다.
function TestFunc(value1, value2, value3) {
this.property1 = value1;
this.property2 = value2;
this.property3 = value3;
}
let test = new TestFunc(valueA, valueB, valueC);이 방법은 객체를 생성할 때 인자를 전달하여 초기화할 수 있는 유용한 방식이다.
728x90
반응형
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript/개념] JavaScript 객체 (7) | 2024.10.23 |
|---|---|
| [JavaScript/개념] 자바스크립트 자주 사용하는 배열 메서드 (1) | 2024.10.23 |
