오늘의 나는 무엇을 잘했을까?
정리를 하며 공부하는데 요령이 조금 생긴 것 같다. 조금 더 빨리 정리가 가능하니 강의를 듣고 시간이 좀 남아 다른 공부를 할 수 있었다.
오늘의 나는 무엇을 배웠을까?
JS
1. 자바스크립트로 HTML 태그 선택하기
1-1. id 로 태그 선택
document.getElementById('id');
document
객체의 getElementById
메소드
- JS로 딱 하나만의 요소를 선택하고 싶을 때 (id가 HTML에서 고유한 값)
- 존재하지 않는 id 선택시
null
값 반환
1-2. class 속성으로 태그 선택
document.getElementsByClassName('class');
document
객체의 getElementsByClassName
메소드
- HTML Collection 형태 -> 유사 배열 (array-like)
- HTML Collection 내 요소의 순서는 깊이와 상관 없이 위에서부터 차례로
- 존재하지 않는 class 선택시
undefined
값 반환
1-3. tag 이름으로 태그 선택
document.getElementsByTagName('tag');
- HTML 문서 내의 해당하는 모든 태그 선택
- 많은 요소를 한꺼번에 다뤄 실수가 생길 수 있기 때문에 잘 사용되지는 않음
1-4. css 선택자로 태그 선택
document.querySelector('css');
- 만약 동일한 css 선택자를 사용하는 (e.g. class name) 여러개의 요소가 있다면 그 중 가장 처음 요소만 선택
- 존재하지 않는 요소 선택 시 null
값 반환
document.querySelectorAll('css')
- NodeList 형태 -> 유사 배열
- 활용이 유연하여 대체로 많이 사용됨
- 존재하지 않는 요소 선택 시 빈 NodeList 반환
2. 유사 배열 (Array-Like Object)
2-1. 유사 배열이란?
- 배열과 모양은 같지만, 완벽히 배열은 아닌 형태
- e.g. HTML Collection
2-2. 유사 배열의 조건
- 숫자 형태의 indexing이 가능함
- 앞선 사진을 보았을 때 0부터 시작하는 숫자 형태의 index가 있음을 알 수 있음
- index를 통해 요소에 접근 가능함
- length 프로퍼티 존재
- length 프로퍼티가 없다면 단지 숫자 형태의 key를 가진 일반적인 객체
2-3. 배열과 유사 배열의 차이점
- 유사 배열은 배열의 기본 메소드를 사용할 수 없음
- 따라서 내부 요소는 배열처럼 다룰 수 있게 하며 배열의 기본적인 메소드 사용을 막고 싶을 때,
- 일반 배열에는 없는 특별한 메소드를 제공하고 싶을 때 유사 배열 활용
Array.isArray(유사배열) === false
3. DOM (Document Object Model)
3-1. DOM 이란?
- 웹 페이지에 나타난 HTML 문서 전체를 객체로 표현한 것
document
객체가 웹 문서의 최상단 객체
console.log(document);
- 태그 형태가 출력
console.dir(document);
- 객체 형태로 출력
- DOM을 활용하면 자바스크립트로 HTML을 자유롭게 다룰 수 있음
3-2. DOM 트리
- Document 객체를 최상단으로 하여 구조를 표현한 것
- 각 객체를 노드(Node) 라고 표현
- 부모 <-> 자식 노드, 형제 노드로 구성
- 노드 타입 (Node Type)
1. 요소 노드(Element Node) : 태그를 표현하는 노드
2. 텍스트 노드(Text Node) : 문자를 표현하는 노드
- 요소 노드의 자식 노드가 되며, 스스로는 자식 요소를 가질 수 없음
3. 코멘트 노드... 등 총 12가지의 노드 타입이 존재
3-3. DOM 트리 활용하여 태그 선택 (요소 노드)
-
자식 요소 노드
children
프로퍼티 : 자식 요소를 HTML Collection으로 반환
firstElementChild
프로퍼티 : 해당 요소의 첫번째 자식 요소 선택
lastElementChild
프로퍼티 : 헤당 요소의 마지막 자식 요소 선택
-
부모 요소 노드
parentElement
프로퍼티 : 부모 요소를 선택
-
형제 요소 노드
previousElementSibling
프로퍼티 : 해당 요소 전 혹은 좌측의 형제 요소 선택
nextElementSibling
프로퍼티 : 해당 요소의 다음 혹은 우측의 형제 요소 선택
3-4. DOM 트리 활용하여 태그 선택 (모든 노드)
프로퍼티 | 유형 | 결과 |
---|
node.childNodes | 자식 노드 | node의 자식 NodeList |
node.firstChild | 자식 노드 | node의 첫번재 자식 노드 하나 |
node.lastChild | 자식 노드 | node의 마지막 자식 노드 하나 |
node.parentNode | 부모 노드 | node의 부모 요소 하나 |
node.previousSibling | 형제 노드 | node의 이전 혹은 좌측에 있는 노드 하나 |
node.nextSibling | 형제 노드 | node의 다음 혹은 우측에 있는 노드 하나 |
- 다만, 잘 활용되지는 않음
- DOM 트리가 구성될 때 줄 바꿈과 들여쓰기도 텍스트 노드로 생성되는데,
- 해당 텍스트 노드를 파악하기 어려워 위 프로퍼티로 요소에 접근을 하면 예상치 못한 노드 선택할 수 있음
3-5. 요소 노드의 주요 프로퍼티
-
innerHTML
- 요소 안의 HTML 자체를 문자열로 반환
- 태그와 태그 사이의 줄바꿈이나 들여쓰기도 모두 포함
- 보통 요소 안의 HTML을 수정할 때 자주 사용
-
outerHTML
- 해당 요소를 포함한 HTML 자체를 문자열로 반환
- 태그와 태그 사이의 줄바꿈이나 들여쓰기도 모두 포함
- 값을 할당하면 처음 선택한 요소는 삭제 -> 해당 요소를 포함한 HTML이 변경 되기 떄문
-
textContent
- 요소 안의 내용 중 HTML 제외한 텍스트만 반환
- 내부의 줄바꿈이나 들여쓰기 모두 포함
- 특수문자(e.g. HTML 태그)도 텍스트로 처리
3-6. 요소 노드 추가하기
- 요소 노드 만들기 :
document.createElement
- 요소 노드 꾸미기 :
textContent
, innerHTML
등등...
- 요소 노드 추가하기
NODE.prepend(node);
: NODE의 제일 첫번째 자식요소로, 파라미터로 전달한 요소 추가
NODE.append(node);
: NODE의 가장 마지막 자식요소로, 파라미터로 전달한 요소 추가
NODE.before(node);
: NODE의 앞에 형제요소로, 파라미터로 전달한 요소 추가
NODE.after(node);
: NODE의 뒤에 형제요소로, 파라미터로 전달한 요소 추가
- 위 메소드들은 요소 노드를 추가할 때 뿐만 아니라 단순 문자열도 추가 가능
- 파라미터로 여러개 값을 주면 순서대로 추가
3-7. 요소 노드 삭제 / 이동하기
- 삭제
NODE.remove();
메소드 활용
- 이동
요소 노드를 추가할 때 사용했던 메소드 (prepend
, append
, before
, after
) 활용
e.g. NODE.append(이동시키고 싶은 요소 노드);
3-8. HTML 속성 다루기
- DOM이 생성될 때 HTML 태그의 속성은 요소 노드의 프로퍼티가 됨
- 단, HTML 표준이 아닌 속성을 태그에 추가하고 그 값에 접근하면
undefined
반환
- 또한 클래스 속성은 className 이라는 이름으로 프로퍼티 생성, 나머지는 이름 그대로
- 속성에 접근하기
- 비표준 속성에 접근하기 위해서는
element.getAttribute('attr')
활용 가능
- 표준 속성은 그냥
element.속성이름
으로 접근 가능
- 속성 추가 또는 수정하기
element.setAttribute('attr', 'value')
- 없었던 속성이면 추가, 있던 속성이면 수정
- 속성 제거하기
element.removeAttribute('attr')
- 현재까지 살펴본 3가지 메소드 모두 속성 이름은 대소문자 구분 X => 자동으로 소문자 변환하여 동작
3-9. 스타일 다루기
- style 프로퍼티 사용
element.style.property = 'style';
- 이 때 스타일 속성이 한 단어 이상으로 이어졌다면 (e.g. text-decoration) 이어서 camelCase로
- HTML 태그에 직접 style 속성을 추가하므로 권장되지 않음
- className 프로퍼티 사용
element.className = 'class';
- 기존 있던 클래스를 유지하고 싶을 때는 적합하지 않을 수 있음, 아예 새로운 클래스를 할당하므로
- classList 프로퍼티 사용
- 클래스의 속성값을 유사배열로 다룸
- element.classList
- classList의 메소드인
add('class', 'class', ...)
: classList에 추가, 여러개 파라미터 주면 동시에 추가
remove('class', 'class', ...)
: classList에서 제거, 여러개 파라미터 주면 동시에 제거
toggle('class', true/false)
: classList에 있으면 제거 없으면 추가, 두번째 파라미터 true - add 기능만, false - remove 기능만, 사실 자주 사용 X
마지막 console.log vs console.dir
3. 이벤트 (Event)
- 웹 페이지에서 일어날 수 있는 거의 대부분의 일, HTML 요소에 일어날 수 있는 일
- e.g. 클릭, 스크롤 등등
- 다양한 이벤트 종류
3-1. 이벤트 핸들링 (Event Handling)
- 이러한 이벤트를 처리하는 것
- 이벤트 핸들러를 등록함으로써 처리함
element.addEventListner('event_type', handler);
어떤 이벤트를 다룰지, 이벤트가 발생하면 어떤 동작을 할지를 파라미터로
handler 부분에 함수를 작성할 때 ()를 사용하면 제대로 등록이 되지 않음
=> 함수가 바로 호출이 되어 동작하고 반환한 return 값이 파라미터로 들어가기 때문
element.removeEventListner('event_type', handler);
반드시 등록할 때 사용했던 핸들러를 그대로 전달해야 함
3-2. 이벤트 객체 (Event Object)
3-3. 이벤트 버블링(bubbling) 과 캡쳐링(capturing)
- HTML 요소에 이벤트가 발생하면 연쇄적 반응이 일어남 => 이벤트 전파(Event Propagation)
- 전파의 2가지 방식이 버블링과 캡쳐링이다.
- 이벤트 버블링
- 자식요소에서 발생한 이벤트가 부모요소로 전파되는 것
- 버블링이 일어나 부모요소로 이벤트가 전파되면 해당 요소의 등록된 이벤트 핸들러가 동작
stopPropagation()
메소드로 버블링을 막을 수 있음 => 필요한 경우가 아니면 사용 X
- 이벤트 캡쳐링
- 자식요소에서 발생한 이벤트가 부모요소부터 시작하여 이벤트를 발생시킨 자식요소까지 도달하는 것
- 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면
addEventListener
메소드의 3번째 프로퍼티로 true
전달
3-3. 이벤트 위임 (Event Delegation)
- 다수의 자식요소에 각각 이벤트 핸들러를 바인딩하는 대신,
- 하나의 부모 요소에 이벤트 핸들러를 바인딩 하는 방법
- 이벤트 버블링이 일어나기 때문에 가능함
- 이벤트 객체의
target
프로퍼티를 활용하여 발생시킨 요소에 적용
3-4. 브라우저 기본 동작 변경
Event.preventDefault()
- HTML 요소는 각각 기본 동작을 가지고 있음 (e.g. a tag => href 값으로 이동)
- 이러한 기본 동작을 중단시켜 줌
Event.stopPropagation()
- 한 요소를 이용하여 이벤트를 처리한 후 부모요소로 이벤트가 전파 되는 것을 중단
- 부모요소에 동일한 이벤트에 대한 다른 핸들러가 지정되어 있을 경우 사용
오늘의 나는 어떤 어려움이 있었을까?
오늘 오랜만에 10시부터 10시까지 공부를 하다보니 마지막에 조금 피곤했던 것 같다.
체력 관리가 필요하다고 느꼈다.
내일의 나는 무엇을 해야할까?
- 반응형 웹 퍼블리싱 수강
- CS 강의 1개 수강
- 개인 / 팀 데일리 미션