[ JavaScript ] 내장 객체의 주요 속성 및 메서드 정리

· FRONT-END/└ JS

[ JavaScript ] 내장 객체의 주요 속성 및 메서드 정리

감자도리22 2024. 5. 14. 23:13

자바스크립트의 내장 객체 중 `window`, `history`, `location`, `document` 객체에 대한 내용입니다

[1] window 객체:

전역 객체: 브라우저 창을 나타내는 객체로, 전역 변수와 함수를 포함합니다.
주요 속성

window.document	현재 문서에 대한 참조를 제공
window.location	현재 URL 정보를 다루는 객체
window.history	브라우저 이력을 다루는 객체
window.alert()	경고창을 띄우는 메서드 등 다양한 속성과 메서드를 포함

[2] history 객체:

브라우저 이력 관리: 사용자의 방문 이력을 추적하고, 페이지 이동을 다루는 객체입니다.
주요 메서드

history.back()	이전 페이지로 이동
history.forward()	다음 페이지로 이동
history.go(n)	n 페이지 앞이나 뒤로 이동

[3] location 객체:

현재 URL 관리: 현재 페이지의 URL 정보를 다루는 객체입니다.
주요 속성

location.href	전체 URL을 나타냄
location.hostname	호스트 이름을 나타냄
location.pathname	경로를 나타냄
location.protocol	프로토콜을 나타냄 (일반적으로 "http:" 또는 "https:")

주요 메서드

location.assign(url)	새로운 URL로 이동
location.reload()	현재 페이지를 새로 고침

[4] document 객체:

웹 페이지 내용 조작 및 변경 : `document` 객체는 브라우저에서 현재 웹 페이지를 나타내며, 웹 페이지의 내용을 조작하고 변경하는 데 사용된다
문서 구조 조작

document.getElementById(id)	주어진 ID를 가진 엘리먼트를 찾는다
document.getElementsByClassName(className)	주어진 클래스 이름을 가진 모든 엘리먼트를 찾는다
document.getElementsByTagName(tagName)	주어진 태그명을 가진 모든 엘리먼트를 찾는다
document.querySelector(selector)	주어진 CSS 선택자에 맞는 첫 번째 엘리먼트를 찾는다
document.querySelectorAll(selector)	주어진 CSS 선택자에 맞는 모든 엘리먼트를 찾는다

요소 조작

element.innerHTML	엘리먼트의 HTML 내용을 가져오거나 설정
element.textContent	엘리먼트의 텍스트 내용을 가져오거나 설정
element.setAttribute(name, value)	엘리먼트의 속성을 설정
element.getAttribute(name)	엘리먼트의 속성 값을 가져옴
element.style.property	엘리먼트의 스타일 속성을 가져오거나 설정

이벤트 처리

element.addEventListener(type, listener)	특정 이벤트에 대한 리스너를 추가
element.removeEventListener(type, listener)	이벤트 리스너를 제거
element.onclick	클릭 이벤트에 대한 핸들러를 설정하거나 가져옴

문서 정보

document.title	문서의 제목을 가져오거나 설정
document.URL	현재 문서의 URL을 가져옴
document.body	문서의 <body> 엘리먼트를 가져옴
document.head	문서의 <head> 엘리먼트를 가져옴

문서 조작

document.createElement(tagName)	주어진 태그명으로 새로운 엘리먼트를 생성
document.createTextNode(text)	주어진 텍스트를 가진 새로운 텍스트 노드를 생성
document.appendChild(node)	주어진 노드를 문서에 추가
document.removeChild(node)	주어진 노드를 문서에서 제거

개인 공부 기록용입니다:)

728x90