인터랙티브 자바스크립트

이찬영·2024년 11월 27일

자바스크립트로 태그 선택하기

메소드

document.getElementById('id-name') : HTML id속성으로 태그를 선택한다. 결과는 id에 해당하는 태그 한개가 나온다.

document.getElementsByClassName('class-name') : HTML class속성으로 태그를 선택한다. 결과는 class에 해당하는 태그 모음이 나온다.
결과가 한개여도 HTMLCollection이라는 유사배열로 나온다.

document.getElementsByTagName('tag') : HTML 태그 이름으로 태그를 선택한다. 결과는 tag에 해당하는 태그 모음이 나온다. HTMLCollection

document.querySelector('css선택자') : css선택자로 태그를 선택한다. 결과는 css선택자에 해당하는 태그 중 첫번째 하나만 나온다.

document.querySelectorAll('css선택자') : css선택자로 태그를 선택한다. 결과는 css선택자에 해당하는 태그 모음이 나온다. NodeList로 나오는데 이것도 HTMLCollection과 같이 유사배열이다.

유사배열

유사배열이란 배열과 유사한 객체이다.
특징으로는
1. 숫자 형태의 indexing이 가능하다.
2. length프로퍼티가 있다.
3. 배열의 기본 메소드를 사용할 수 없다
4. Array.isArray의 리턴값은 false이다.

이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러

이벤트 : 웹 페이지에서 발생하는 대부분의 일들
ex ) 버튼 클릭, 스크롤, 키보드 입력 등..
이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일
이벤트 핸들러 : 이벤트가 발생했을때 일어나야하는 구체적인 동작을 표현한 코드. 이벤트 리스너라고도 부른다.

이벤트 핸들러를 등록하는 2가지 방법

  1. 자바스크립트로 해당 DOM객체의 onclick프로퍼티에 등록하기
const btn = document.querySelector('#myBtn');

btn.onclick = function () {
	alert('버튼을 눌렀습니다.');
}
  1. HTML태그의 onclick속성에 바로 표시하기
    <button id = 'myBtn' onclick='alert('버튼을 눌렀습니다.')'>클릭!</button>

window 객체

window객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역객체, 영어로는 global object라고 부른다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체내부의 것이기 때문에 window.을 생략하는 것이다.

DOM

DOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델이다. 간단하게 표현하면 웹 페이지에 나타나는 HTML문서 전체를 객체로 표현한것으로 생각하면 된다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소노드, 문자는 텍스트노드로 구분된다.

DOM트리

HTML의 계층 구조는 DOM에서도 반영되는데, 이러한 계층구조를 나무에 비유해서 DOM트리라고 부른다. 각 노드간의 간계는 부모, 자식, 형제라는 용어로 표현한다.

DOM이동 시 활용 가능한 프로퍼티

element.children : 모든 자식 요소 (HTMLCollection)
element.firstElementChild : 자식 요소 한개 (첫번째 자식요소)
element.lastElementChild : 자식 요소 한개 (마지막 자식요소)
elemnet.parentElement : 요소 한개 (부모요소)
element.previousElementSibling : 요소 한개 (이전 형제 요소)
element.nextElementSibling : 요소 한개 (다음 형제 요소)

주요 요소 노드 프로퍼티

element.innerHTML : 요소 노드 내부의 HTML코드를 문자열로 리턴한다. 요소안의 정보를 확인할 수도 있지만, 내부의 HTML자체를 수정할 때 자주 활용한다.

element.outerHTML : 요소 노드 자체의 전체적인 HTML코드를 문자열로 리턴한다. outerHTML은 새로운 값을 할당하면 요소 자체가 교체되어 버리니 주의해야한다.

element.textContent : 요소 노드 내부의 내용들 중에서 HTML태그들을 제외하고 텍스트만 리턴한다. textContent는 말그대로 텍스트만 다루기 때문에 HTML태그를 쓰더라도 모두 텍스트로 처리된다.

요소노드 다루기

  1. document.createElement('태그이름') : 요소 노드 만들기
  2. element.textContet = element : 요소 노드 꾸미기
  3. element.prepent, element.append, element.after, element.before : 요소 노드 추가 혹은 이동하기
  4. element.remove() : 요소 노드 삭제하기

예를들어,

const toDoList = document.querySelector('#to-do-list');

const addTodo = document.createElement('li');
addTodo.textContent = '공부하기';
toDoList.append(addTodo);

HTML 속성 다루기

대부분의 HTML속성은 DOM객체의 프로퍼티로 변환된다.
하지만, 표준 속성이 아닌 경우에는 프로퍼티로 변환이 안되는데, 아래 메소들르 활용하면, 표준이 아닌 HTML속성들도 다룰 수 있게 된다.

  1. element.getAttribute('속성') : 속성에 접근하기
  2. element.setAttribute('속성', '값') : 속성 추가(수정)하기
  3. element.removeAttribute('속성') : 속성 제거하기
<div id='myDiv'></div>
<script>
	const div = document.getElementById('myDiv');
  	div.setAttribute('class', 'addClass');
  	console.log(div.getAttribute('class')); /*newClass*/
</script>

스타일 다루기

자바스크립트로 태그의 스타일을 다루는 방법에는 크게 두가지가 있다.
1. style프로퍼티 활용하기
element.style.textDecoration = 'underline';
2. class변경을 통해 간접적으로 스타일 적용하기
element.className = 'class의 이름'

element.classList

classList의 메소드
element.classList.add('class의 이름') : 클래스를 추가한다. 여러개의 값을 추가하면, 여러개의 클래스를 추가할 수 있다.
element.classList.remove('class의 이름') : 클래스를 삭제한다. 여러개의 값을 전달하면 여러 클래스를 삭제한다.
element.classList.toggle('class의 이름', true OR false) : 클래스가 없으면 추가. 있으면 삭제한다. 하나의 값만 적용 가능하고, 두번째 파라미터로 추가 또는 삭제 기능을 강제할 수 있다.
true면 add의 기능만 하고, false면 remove의 기능을 한다.

이벤트

이벤트 핸들러 등록하기

HTML의 속성이 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 이외에
element.addEventListener('type', 'handler') 를 통해서 이벤트 핸들러를 등록할 수 있다.

이벤트 핸들러 삭제하기

addEventListener메소드를 활용해서 이벤트 핸들러를 등록했다면,
removeEventListener('type', 'handler')를 통해 삭제도 가능하다.

이벤트 객체

이벤트가 발생하면 이벤트 핸들러의 첫번째 파라미터에는 자동으로 이벤트 객체가 전달된다.이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다르며, 이벤트에 대한 유용한 정보들을 프로퍼티로 가지고 있다.
자주 사용하는 이벤트 프로퍼티로는
type : 이벤트 이름 (click, keydown, mouseup등)
target : 이벤트가 발생한 요소
currentTarget : 이벤트 핸들러가 등록된 요소
timeStamp : 이벤트 발생 시각

이벤트 버블링

이벤트는 전파가 된다.
어떤 요소에서 이벤트가 발생하면 해당 요소에 등록된 이벤트 핸들러가 동작하는것 뿐만 아니라 부모 요소로 이벤트가 계속해서 전파되면서 각 요소에도 등록된 이벤트 핸들러가 있다면 차례로 이벤트 핸들러가 동작하는데, 자식 요소에서 부모요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 부른다. 참고로 이벤트 버블링은 이벤트 객체의 stopPropagation메소드로 전파를 막을 수 있다.

이벤트 위임

버블링 개념을 활용하면 훨씬 효과적인 이벤트 관리를 할 수 있다.
예를 들어 자식 요소 각각에 이벤트 핸들러 하나씩 등록할 필요 없이 부모요소에서 한번에 자식 요소들에 발생한 이벤트를 관리할 수도 있는데, 이렇게 이벤트를 다루는 방식을 자식요소의 이벤트를 부모요소에 위임한다고 해서 이벤트 위임이라고 부른다.

브라우저의 기본 동작

브라우저에는 각 태그별 혹은 상황별로 기본적으로 약속된 동작이 있다.
예를들어 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴창이 뜬다거나, input태그에 커서를 두고 키보드키를 누르면 해당 값이 입력된다거나..
그런데 만약 이러한 동작들을 막고싶다면 이벤트 객체의 preventDefault메소드를 통해 막을 수 있다. 하지만 각 HTML태그들이 가지고 있는 고유한 역할과 의미를 훼손할 수 있기때문에 꼭 필요한 경우에만 사용하는것이 좋다.

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
	event.preventDefault();
  	alert('현재 폼 제출이 불가능합니다.');
})
profile
이찬영
이전 포스트

CSS 레이아웃

다음 포스트

웹 브라우저에 데이터 저장하기

0개의 댓글