DOM이란 무엇인가?
Document Object Model = 문서 객체 모델로 HTML 요소에 접근하고자 할 때 사용하며 HTML 요소를 JS 객체처럼 조작할 수 있게 해준다. HTML 요소의 속성, 스타일(CSS) 등을 조작할 수 있게 해주기도 한다.
=> 근데 사실 뭔 소린지 잘 모르겠으면 버튼, p 태그, h1 태그 등 뭐든 하나하나가 다 DOM이다 이 소리..
DOM을 다루기 위해서는 무엇을 가장 먼저 해야할까?
내가 원하는 HTML 요소를 선택해야 내가 원하는 조작을 할 수 있을 것이다.
그래서 HTML 요소를 선택하는 방법에는
- getElementByTagName() : 태그 이름으로
- getElementById() : 태그 id값으로
- getElementsByClassName() : 태그 클래스 이름으로
- querySelector() : 태그의 종류, id값, 클래스 이름으로 하나만
- querySelectorAll() : 태그의 종류, id값 클래스 이름으로 여러 개
가 있다.
=> 위의 괄호에는 형식 지정자를 넣으면 된다.
=> 참고로, querySelector에서는 괄호 안 들어갈 값이 CSS의 selector와 같다.
=> 잘 선택됐는지나 선택한 정보를 보고 싶다면, console.log를 통해서 확인할 수 있다.
그런데, 브라우저 자체나 문서 전체를 선택하고 싶을 때가 있지 않을까?
브라우저 자체나 문서 전체를 선택할 땐?
Window 객체(브라우저 창)이나 Document 객체(브라우저 창의 HTML 문서 객체)를 선택하면 된다.
모든 객체는 사실 window 객체에 소속되어 있고, Document 객체는 브라우저 창의 HTML 문서 객체이기 때문에 웹 브라우저에서는 HTMLDocument 객체를 선택하면 크게 다른 것은 없다.
그럼 이제 선택은 완료되었고, 선택한 객체를 핸들링 하는 방법은 무엇이 있고 어떻게 하면 될까?
Element 핸들링으로 할 수 있는 것
- 기존의 존재하는 Element 핸들링
1) 속성 변경하기
2) 텍스트 변경하기
3) 스타일 변경하기_- 새로운 Element 만들기
이번에는 각각의 핸들링을 하는 방법에 대해 알아보고자 한다.
1. 기존에 존재하는 Element 핸들링
1) 속성 변경 (많이 쓰진 않음)
-> HTML 요소의 속성값을 추가, 확인, 제거
(1) 속성값 추가 : 타깃요소.setAttribute(attribute, value)
(2) 속성값 확인 : 타깃요소.getAttribute(attribute)
(3) 속성값 제거 : 타깃요소.removeAttribute(attribute)
사용 예시 : 이미지 태그에 들어간 사진을 바꾸고 싶다!
const el = document.getElementById("title-img") -> 객체 선택
el.setAttribute('src', b.jpg');
2) 텍스트 변경
-> 텍스트를 추가하거나 변경
(1) textContent : 선택한 요소에서 순수한 텍스트 데이터의 값
(2) innerText : textContent와 비슷 (CSS에 종속적이라서 hidden 시에 읽지 못함)
(3) innerHTML : 선택한 요소의 HTML 태그를 그대로 제공 (보안에 취약)
사용 예시 : 멋쟁이 사자처럼 11기를 멋쟁이 사자처럼 10기로 바꾸고 싶다!
document.querySelector('바꾸고자 하는 태그 id값').textContent = "멋쟁이 사자처럼 10기";
id값이 아니라 class 명이라면!
document.querySelector('바꾸고자 하는 태그 class명').textContent = "멋쟁이 사자처럼 10기";
3) 스타일 변경
(1) style 속성 변경 : document.getElementById('box1').setAttribute('style','background-color:yellow');
=> 다음과 같이 setAttribute()를 활용하여 변경할 수 있음! (그러나 잘 쓰지 않는 것 같음....)
(2) style 객체 변경 :
style 속성 대신 요소의 style 객체의 속성값들을 변경하는 형식
document.getElementById('box1').style.backgroundColor = 'yellow';
(3) 클래스 지정 :
별도의 디자인 클래스를 지정해 놓고 해당 요소의 class 속성을 지정하는 형식
사용 예시
[HTML] :
[CSS] : .green { color : green; }
의 코드에서 .green의 스타일을 box1에 적용하는 방법
document.getElementById('box1').classList.add = 'green';
을 적용해주면 안녕이 초록색이 되는 것을 볼 수 있음!
그렇다면 클래스 지정은 어떻게 할 수 있을까?
- 이름 : 요소.className
- 이름들 : 요소.classList
- 추가 : 요소.classList.add(클래스 이름)
- 삭제 : 요소.classList.remove(클래스 이름)
- 변경 : 요소.classList.replace(클래스 이름)
- 토글 : 요소.classList.toggle(클래스 이름)
2. 새로운 Element 만들기
새로운 Element를 만드는 방법은 많이 쓰는 방법은 아니지만 알아두면 쓸 곳은 있을 것 같다.
1) 새로운 Element 생성
document.createElement(생성요소)
2) 추가
부모요소.appendChild(자식요소)
예시
// element 생성
const p1 = document.createElement('p')
// 생성한 element에 컨텐츠 넣기
p1.textContent = "안녕"
// element에 추가할 부모 요소
const parent = document.getElementById("parent");
// element를 부모 요소의 자식 요소로 추가
// 이미 다른 element가 존재할 경우 마지막 자식 요소를 추가
parent.appendChild(p1)지금까지 배운 것은 페이지 로딩 시에 일어나기 때문에 내가 원하는 조건에서 실행되기 어렵다.
그래서 특정 Event가 발생할 때 변경될 수 있도록 하는 방법은 무엇일지 뒤에 설명할 것이다.
addEventListener()
이벤트를 핸들링하는 도구
이벤트: 프로그래밍 하는 시스템에서 일어나는 사건 혹은 발생
응답은 addEventListener로 수행하는 것
객체.addEventListener(이벤트 타입, 이벤트 발생 시에 수행 함수)
-> 객체 : 화면에 있는 객체(querySelector로 지정하는 것, 지정 객체 말고도 window, document도 가능)
-> 이벤트 타입 : 지정된 객체에서 어떤 이벤트 발생에 관심을 둘 것인지 설정 (click, scroll, change 등 다양한 이벤트 종류 있음)
-> 이벤트 발생 시에 수행 함수 : 이벤트가 발생했을 때 작동시킬 함수 형태
이벤트 타입의 종류
- click : 마우스 버튼을 클릭하고 버튼에서 손가락을 떼면 발생
- mouseover : 마우스를 HTML 요소 위에 올리면 발생
- mouseout : 마우스가 HTML 요소 밖으로 벗어날 때 발생
- mousedown : 클릭을 하기 위해 마우스 버튼을 누르고 아직 떼기 전인 그 순간, HTML 요소를 드래그 할 때 사용
- mouseseup : 마우스 버튼을 떼는 그 순간, 드래그한 HTML 요소를 어딘가에 놓을 때 사용
- mousemove : 마우스가 움직일 때마다 발생 (마우스 커서의 현재 위치를 계속 기록하는 것에 사용)
- focus : HTML 요소에 포커스가 갔을 때 발생
- blur : HTML 요소가 포커스에서 벗어났을 때 발생
- keypress : 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생
- keydown / keyup : 키를 누를 때 발생 / 키를 눌렀다가 떼는 순간에 발생
- load : 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을 때 발생
- resize : 브라우저 창의 크기를 조절할 때 발생
- scroll : 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤 할 때 발생
- unload : 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 브라우저 창을 닫을 때 이벤트가 발생
- change : 폼 필드의 상태가 변경되었을 때 발생 (input 태그에 내용이 바뀌면 발생)
드디어 JS DOM 정리가 끝났다 ...!
열심히 계산기 과제 해야지... ㅎㅎㅎ
