JS - 객체와 객체모델

전역 객체(global object)

전역 객체란 자바스크립트에 미리 정의된 객체로 전역 프로퍼티나 전역 함수를 담는 공간의 역할을 합니다.

전역 객체 그 자체는 전역 범위(global scope)에서 this 연산자를 통해 접근할 수 있습니다.

자바스크립트에서 모든 객체는 전역 객체의 프로퍼티가 됩니다.

 

래퍼 객체(wrapper object)

이렇게 숫자, 문자열, 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체를 래퍼 객체(wrapper object)라고 합니다. 프로그램이 문자열 리터럴 str의 프로퍼티를 참조하려고 하면, 자바스크립트는 new String(str)을 호출한 것처럼 문자열 리터럴을 객체로 자동 변환해주기 때문입니다.

var str = "문자열";   // 문자열 생성
var len = str.length; // 문자열 프로퍼티인 length 사용

표준 객체(Standard Object)

자바스크립트에서 표준 객체(standard object)는 다른 객체의 기초가 되는 핵심적인 객체입니다.

자주 사용되는 대표적인 자바스크립트 표준 객체는 다음과 같습니다.

1. Number 객체

2. Math 객체

3. Date 객체

4. String 객체

5. Array 객체

 

문서 객체 모델(DOM)이란?

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택함.
document.getElementById(아이디)	해당 아이디의 요소를 선택함.
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택함.
document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택함.

 

DOM 요소의 선택

1) getElementById() 메소드는 아이디를 이용하여 HTML 요소를 선택합니다.

var selectedItem = document.getElementById("even"); // 아이디가 "even"인 요소를 선택함.
selectedItem.style.color = "red"; // 선택된 요소의 텍스트 색상을 변경함.

클래스(class)를 이용한 선택

2) getElementsByClassName() 메소드는 클래스 이름을 이용하여 HTML 요소를 선택합니다.

var selectedItem = document.getElementsByClassName("odd"); // 클래스가 "odd"인 모든 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.
}

name 속성을 이용한 선택

3) getElementByName() 메소드는 HTML 요소의 name 속성을 이용하여 HTML 요소를 선택합니다.

var selectedItem = document.getElementsByName("first"); // name 속성값이 "first"인 모든 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.
}