HTML을 이용해서 화면에 UI를 표현하기
브라우저에서 UI를 볼 수 있는 것은 브라우저가 HTML 을 분석해서 그 결과로 보여주는 것이다.
이 HTML은 요소(Element)들로 구성되어 있다.
돔 이란? (Document Object Model)
- 돔은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해준다.
- 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.
window.document. //Document Object Model(DOM)
돔 조작
위에 보이는 DOM 트리를 DOM 에서 제공해주는 API를 이용해서 조작할 수 있다.
이 API를 이용해서 DOM 구조에 접근하거나 원하는 요소(Element)를 수정하거나 없애거나 할 수 있다.
자바스크립트 코드 안에 있지만 실제 document.querySelector 부분은 자바스크립트 자체 요소는 아니다.
document는 브라우저에서 제공하는 window 객체의 한 부분이다
웹 페이지 빌드 과정 (CRP)
브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다.
웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정이다.
Document 객체 프로퍼티 사용
document 객체를 이용해서 웹페이지의 상태와 모든 HTML 태그들에 접근할 수 있다.
// document 객체 속성
let val;
// 웹 페이지의 절대 URI 반환
val = document.baseURI;
// <head> 태그 반환
val = document.head;
// <body> 태그 반환
val = document.body;
// 웹 페이지의 문서 형식 반환
val = document.doctype;
// 웹 페이지의 쿠키 반환
val = document.cookie;
// <form> 태그 반환
val = document.forms;
// 첫 번째 <form> 태그 반환
val = document.forms[0];
// 첫 번째 <form> 태그의 ID 반환
val = document.forms[0].id;
// 첫 번째 <form> 태그의 action 속성 반환
val = document.forms[0].action;
// 첫 번째 <form> 태그의 method 속성 반환
val = document.forms[0].method;
// href 속성이 있는 <a> 태그 반환
val = document.links;
// 첫 번째 <a> 태그 반환
val = document.links[0];
// 첫 번째 <a> 태그의 ID 반환
val = document.links[0].id;
// 첫 번째 <a> 태그의 첫 번째 class 속성 반환
val = document.links[0].classList[0];
// 첫 번째 <a> 태그의 className 속성 반환
val = document.links[0].className;
// <img> 태그 반환
val = document.images;
// <script> 태그 반환
val = document.scripts;
// 첫 번째 <script> 태그의 src 속성 반환
val = document.scripts[0].getAttribute('src');
// 콘솔에 값 출력
console.log(val);
Document 객체 메서드 사용
document 객체의 메서드들을 사용하면 다양한 방법으로 웹 페이지 내의 태그들에 접근할 수 있다.
1) document.getElementById()
// element 가져오기
console.log(document.getElementById('header-container')); // element 출력
console.log(document.getElementById('header-heading').className); // class name 출력
// element 스타일 변경
const headerContainer = document.getElementById('header-container');
headerContainer.style.fontSize = '10px'; // font size 변경
headerContainer.style.display = 'none'; // element 숨기기
// element 내용 변경
headerContainer.textContent = 'Text Content'; // text content 변경
headerContainer.innerText = 'Inner Text'; // inner text 변경
headerContainer.innerHTML = '<span style="color:blue">Inner HTML</span>'; // inner HTML 변경
2) document.querySelector()
// element 가져오기
console.log(document.querySelector('#form-first-div')); // element 출력
console.log(document.querySelector('.form-container')); // element 출력
console.log(document.querySelector('h5')); // element 출력
// 스타일 변경
document.querySelector('li').style.color = 'blue'; // 모든 li element 색상 변경
document.querySelector('ul li').style.color = 'red'; // ul 안의 모든 li element 색상 변경
// 특정 element 스타일 변경
document.querySelector('li:last-child').style.color = 'red'; // 마지막 li element 색상 변경
document.querySelector('li:nth-child(3)').style.color = 'orange'; // 3번째 li element 색상 변경
// 특정 element 내용 변경
document.querySelector('li:nth-child(4)').textContent = 'Hello World'; // 4번째 li element 내용 변경
// 배경색 변경
document.querySelector('li:nth-child(odd)').style.background = 'gray'; // 홀수 번째 li element 배경색 변경
document.querySelector('li:nth-child(even)').style.background = 'lightgray'; // 짝수 번째 li element 배경색 변경
Dom 이벤트와 이벤트 종류
어떠한 버튼을 클릭 했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야할까?
Event Listener
위와 같이 마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생한다.
이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데 그 함수가 바로 이벤트 리스너이다.
addEventListener()
어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다.
1. 자바스크립트 코드에서 프로퍼티로 등록
window.onload = function() {
// 문서가 load 될 때 이 함수 실행
document.getElementById("text").innerHTML = "HTML 문서 Loaded";
};
2. HTML 태그에 속성으로 등록
<button onclick="alert('버튼이 클릭됬습니당.')"> 버튼입니다.</button>
3. addEventListener 메소드 사용
const aElement = document.querySelector('a');
aElement.addEventListener('click', () => {
alert('a element clicked');
});
Event 객체
이벤트가 발생할 때 이벤트 객체를 가져올 수 있다.
const buttonElement = document.querySelector('.btn2');
buttonElement.addEventListener('click', (event) => {
let val;
val = event.target;
val = event.target.id;
val = event.target.className;
val = event.target.classList;
val = event.type;
// 윈도우로부터의 거리 좌표
val = event.clientY;
// 요소로부터의 거리 좌표
val = event.offsetY;
console.log(val);
})
이벤트 종류
이벤트에는 매우 많은 종류가 있어 상황에 맞게 검색을 해서 속성과 메서드를 찾아 사용하면 된다.
1) UI 이벤트
load 문서나 객체가 로드 완료 되었을 때 발생
change 객체의 내용이 변동되거나 focus를 잃었을 때 발생
resize 객체의 크기가 바뀌었을 때 발생
scroll 스크롤바를 조작할 때 발생
error 에러가 발생했을 때 발생
2) 키보드 이벤트
keydown 키를 눌렀을 때 발생
keyup 키를 눌렀다가 뗐을 때 발생
keypress 사용자가 눌렀던 키의 문자가 입력되었을 때 발생
3) 마우스 이벤트
click 객체를 클릭했을 때 발생
dblclick 객체를 더블클릭했을 때 발생
mousedown 마우스를 클릭했을 때 발생
mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생
mouseover 마우스가 특정 객체 위로 올려졌을 때 발생
mousemove 마우스가 움직였을 때 발생
mouseup 마우스에서 손을 뗏을 때 발생
4) 포커스 이벤트
focus 객체에 focus가 되었을 때 발생
blur 객체가 focus를 잃었을 때 발생
5) 폼 이벤트
input input, textarea 요소 값이 변경되었을 때 발생
change 선택 상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때 발생
select 텍스트를 선택을 했을 때 발생
reset 리셋 버튼을 눌렀을 때 발생
submit 사용자가 버튼키 등을 활용하여 폼을 전송할 때 발생
cut/copy/paste 사용자가 폼필드의 콘텐츠를 잘라내기/복사/붙여 넣기 했을 때 발생
'모카스터디 > JavaScript' 카테고리의 다른 글
| Closure (0) | 2024.03.01 |
|---|---|
| 프로토타입[Prototype] 과 클래스(Class) (0) | 2024.03.01 |
| window Object [Browser Object Model(BOM)] (0) | 2024.03.01 |
| 동기와 비동기 [싱글스레드, 논블로킹, Promise, async&await] (0) | 2024.02.29 |
| 비구조화할당, 스프레드 연산자 (0) | 2024.02.29 |