전날엔 이사하느라 하루 수업을 빼먹었다!
이젠 나도 어엿한 서울인------은 사실 등원 시간 확연히 줄어서 너무 좋다ㅜㅜ
자바스크립트 - DOM, 이벤트
DOM
노드
HTML 요소와 노드 객체
HTML 문서의 계층적 구조와 정보를 표현하여 이를 제어할 수 있는 API
프로퍼티와 메서드를 제공하는 트리 자료구조
요소 노드 취득
1. id를 아용한 요소 노드 취득
const $elm = document.getElementById('banana');
$elm.style.color = "red"2. 태그 이름을 이용한 요소 노드 취득
const $elems = document.getElementsByTagName('li');
[...$elems].forEach(elem => {elem.style.color = 'blue';});3. class를 이용한 요소 노드 취득
const $elems2 = document.getElementsByClassName('fruit');
[...$elems].forEach(elem => {elem.style.color = 'red';});
const $apples = document.getElementsByClassName('fruit apple');
[...$apples].forEach(elem => {elem.style.color = 'pink';})
4. css 선택자를 이용한 요소 노드 취득
const $elem = document.querySelector('.banana');
$elem.style.color = 'yellow';
const $elems3 = document.querySelectorAll('ul > li');
$elems3.forEach(elem => {elem.style.color = 'green';})5. 특정 요소 노드를 취득할 수 있는지 확인
Elements.prototype.matches
const $apple2 = document.querySelector('.apple');
console.log($apple2.matches('#fruits > li.apple')); // true
console.log($apple2.matches('#fruits > li.banana')); // false
DOM 조작
새로운 노드를 생성해 DOM에 추가하거나 기존 노드를 삭제 또는 교체 하는 것1. innerHTML 메서드2. insertAdjacentHTML 메서드
3. 노드 생성과 추가
const $fruits = document.getElementById('fruits');
const $li = document.createElement('li'); // 요소 노드 생성
const textNode = document.createTextNode('Banana'); // 텍스트 노드 생성
$li.appendChild(textNode);
$fruits.appendChild($li);4. 복수의 노드 생성과 추가
DocumentFragment 노드
기존 DOM과 별도로 존재하기 때문에 자식 노드를 추가해도 기존 DOM의 벼경이 발생하지 않는다.
DOM에 추가할 경우 자신은 제거되고 자신의 자식 노드만 DOM에 추가된다.
어트리뷰트
HMTL 요소는 여러 개의 어트리뷰트(속성)을 가질 수 있다.
어트리뷰트 노드와 attributes 프로퍼티
HTML 어트리뷰트 조작
getAttribute(attributeName), setAttribute(attributeName, attributeValue) 메서드 사용
이벤트
이벤트 핸들러
이벤트가 발생했을 때 호출될 함수
이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록
이벤트 타입
이벤트의 종류를 나타내는 문자열(마우스, 키보드, 포커스, 폼 등)
이벤트 핸들러 등록
이벤트가 발생했을 때 브라우저에 호출을 위임한 함수 => 이벤트가 발생하면 브라우저에 의해 호출될 함수
이벤트가 발생하면 관련한 정보를 담고 있는 이벤트 객체가 동적으로 생성
생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달
이벤트 핸들러 어트리뷰트 방식
on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어짐
$button.onclick = () => {
alert('button click');
};이벤트 핸들러 프로퍼티 방식
이벤트 핸들러 프로퍼티 방식은 하나의 이벤트에 하나의 이벤트 핸들러만을 바인딩 할 수 있다는 단점 존재
$button.onclick = function () {
console.log('button clicked1')
}addEventListener 방식
$button.addEventListener('click', function () {
console.log('[addEventListener 메서드 방식] button click')
})
이벤트 핸들러 제거
removeEventListener
이벤트 전파
트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전달된다.
DOM 요소의 기본 동작 조작
DOM 요소의 기본 공작 중단
DOM 요소는 저마다 기본 동작이 있다.
<body>
<a href="https://www.google.com">go</a>
<input type="checkbox">
<script>
document.querySelector('a').onclick = e => {
e.preventDefault();
};
document.querySelector('input[type=checkbox]').onclick = e => {
e.preventDefault();
};
</script>
</body>이벤트 전파 방지
stopPropagation 메서드로 이벤트 전파 중지
이벤트 핸들러 내부의 this
이벤트 핸들러 어트리뷰트 방식이벤트 핸들러 프로퍼티 방식 addEventListener 메서드 방식이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킨다.화살표 함수로 정의한 이벤트 핸들러 내부의 this는 상위 스코프의 this를 가리킨다.
이벤트 핸들러에 인수 전달
함수를 호출할 때 인수를 전달한다.어트리뷰트 방식은 함수 호출문을 사용할 수 있기 때문에 인수를 전달할 수 있지만 프로퍼티 방식과 addEventListener 메서드 방식의 경우, 함수 자체를 등록해야한다.(인수 전달 불가)
프로퍼티 방식과 addEventListener 메서드 방식의 인수 전달 방법ㅇㅇㅇㅇ
ㅇㅇ
ㅇㅇㅇㅇㅇ
'TIL > 디지털트윈' 카테고리의 다른 글
| 5.19 행맨게임 만들기 프로젝트 (0) | 2023.05.19 |
|---|---|
| 05.19 디지털 트윈 부트캠프 26일차 (0) | 2023.05.19 |
| 05.16 디지털 트윈 부트캠프 23일차 (0) | 2023.05.16 |
| 05.15 디지털 트윈 부트캠프 22일차 (0) | 2023.05.15 |
| 05.11 디지털 트윈 부트캠프 21일차 (0) | 2023.05.11 |
댓글