2022/08/30 - TIL

39.4 노드 정보 취득

Node.prototype.nodeType = 노드 객체의 종류
Node.prototype.nodeName = 노드의 이름을 문자열로 반환한다

<div id="a">hello</div>
document.nodeType = 9// 문서 노드타입은 9 텍스트 노드는 3 요소 노드는 1이다
document.nodeName = #document//텍스트 노드 #text, 요소노드는 태그이름에 #을붙인다

39.5 요소 노드 텍스트 조작

39.5.1 nodeValue

node1.nodeValue = "a"//텍스트 노드에 있는 값을 변경한다

39.5.2 textContent

document.getElementbyId('foo')//프로퍼티에 의한 텍스트 취득 null은 생략한다

vs innerText ⇒ innerText는 css에 순종적이다. 따라서 css에 의해 비표시로 지정된 요소는 오드 텍스트에 반환되지 않는다. innerText 프로퍼티는 css를 고려해야하므로 프로퍼티보다 느리다

39.6 DOM 조작

39.6.1 innerHTML

innerHTML 프로퍼티를 참조하면, 태그 사이에, 포하된 모든 HTMl 마크업을 문자로 반환한다.

39.6.2 insertAdjacentHTMl 메서드

기보  요소에는 영향을 주지 않고 새롭게 삽입될 요소만을 파싱하여 자식요소에 추가하고
기존의 자식 노드를 모두 제거하고 다시 처음부터 새롭게 자식 노드를 생성하여 자식요소로
추가하는 innerHTML 프로퍼티보다 효율적이고 빠르다.

innerHTML, insertAdjacentHTML 모두 HTML 마크업 문자열을 파싱하므로 크로스 사이트 스크립팅
공격에 취약하다

39.6.3 노드 생성과 추가

요소 노드 생성 document.createElement();

텍스트 노드 생성 document.createTextNode();

텍스트 노드를 요소 노드의 자식노드로 추가 Node.prototype.appendChild

39.6.6 노드 이동

Node.prototype.insertBefore(newNode, childNode)/
$li.appendChild($ul, $fruits.insertBefore)// 두번째 인수가 받은 노드의 자식노드가 
//아니면 에러가 나온다

39.6.7 노드 복사

Node.prototype.cloneNode
a.cloneNode() //텍스트 노드가 없는 사본이 복사(얕은복사라서)
a.cloneNode(true)//텍스트 노드가 포함된 깊은 복사

39.6.8 노드 교체

Node.prototype.replaceChild(new, old) 자식노드를 교체한다

39.6.9 노드 삭제

Node.prototype.removeChild() 자식을 제거한다

39.7 어트리뷰트

39.7.1 어트리뷰트 노드와 attributes 프로퍼티

39.7.2 HTML 어트리뷰트 조작

39.7.3 HTML 어트리뷰트 vs DOM 프로퍼티

39.7.4 data 어트리뷰트와 dataset 프로퍼티

39.8 스타일

39.8.1 인라인 스타일 조작

39.8.2 클래스 조작

38.8.3 요소에 적용되어 있는 CSS 스타일 참조

39.9 DOM 표준

40장 이벤트

40.1 이벤트 드리븐 프로그래밍

이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 하고, 이벤트가 발생하였을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러의 등록이라 한다.

onclick 프로퍼티가 click 이벤트를 담당한다

40.2 이벤트 타입

40.2.1 마우스 이벤트

click 마우스 클릭
dbclick 마우스 더블 클릭
mousedown 마우스 버튼을 눌렀을 때
mouseup 마우스 버튼을 놓았을 때
mousemove 마우스 커서를 움직였을 때
mouseenter 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링이 되지 않는다)
mouseover 마우스 커스를 HTML 요소 안으로 이동했을 떄 (버블링된다)
mouseleave 마우스 커서를 요소 밖으로 이동했을 떄(버블링되지 않는다)
mouseout 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링 된다)

40.2.2 키보드 이벤트

keydown 모든 키를 눌렀을 때 발생
keypress 문자 키를 눌렀을 때 연속적으로 발생한다
keyup 누르고 있던 키를 놓았을 때 한번만 발생한다
keydown, keyup은
control option shift tab delete enter 방향키와 문자 숫자 특수 문자키를 눌렀을 때 발생한다.
문자 숫자 특수문자 enter키를 눌렀을 떄는 연속적으로 발생하지만 나머지는 한번만 발생한다.
keypress에서 control option shift tab delete 방향키를 눌렀을 때는 발생하지 않고,
문자 숫자 특수문자 enter를 눌렀을 ㅐ만 발생한다.

40.3 이벤트 핸들러 등록

이벤트 헨들러는 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수다. 이벤트가 발생함면 브라우저에 의해 호출될 함수가 이벤트 핸들러다. 이밴트 핸들러를 등록하는 방법은 3가지다

40.3.1 이벤트 핸들러 어트리뷰트 방식

이밴트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록된다

이벤트 핸들러 등록이란, 함수 호출을 브라우저에게 위임하는 것이다.

cbd 방식의 프레임워크 라이브러리는 이벤트 핸들러 어트리뷰트 방식으로 이벤트를 처리한다

<button onclick=say()> </button>

40.3.2 이벤트 핸들러 프로퍼티 방식

이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다. 이때, 이벤트 타깃과 이벤트 타입 그리고 이벤트 핸들러를 지정해야한다

$button.onclick = function(){}

40.3.3 addEventListener 메서드 방식

$button.addEventListener('click', function(){})

1~3까지 여러 방식이 있다. 이때, 등록된 방식을 2개르 등록하면 2개 이벤트 헨들러가 모두 실행된다.(2번 3번 각각하면 2개) 단, addEventListener 메서드를 참조해 중복 등록하려면 하나의 이벤트 핸들러만 등록된다.

40.4 이벤트 헨들러 제거

이벤트핸들러함수 인수와 동일해야 제거가 되기에, 무명함수를 이벤트 핸들러로 지정한경우에는 제거할 수 없다

$button.addEventLIstener('click', handleClick)
$button.removeEventLIstener('click', handleClick, true)//실패
$button.removeEventLIstener('click', handleClick)//성공

$button.addEventLIstener('click', function(){
	$button.removeEventListener('click', arguments.callee);
})
//arguments.callee는 코드 최적화를 방해하므로 strict mode에서 사용이 금지된다.
//이때는., 다른 변수나 자료구조에 저장하여 저장하는 것이 좋다

40.5.2 이벤트 객체의 공통 프로퍼티

Event 인터페이스 즉 Event.prototype에 정의되어 있는 이벤트 관련 프로퍼티는 UIEvent, CustomEvent, MouseEvent 등 모든 파생 이벤트 객체에 상속된다. 즉 Event 인터페이스의 이벤트 관련 프로퍼티는 모든 이벤트 객체가 상속받는 공통 프로퍼티다.

40.6 이벤트 전파

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인이벤트 타깃을 중심으로 DOM 트리를 통해 전파된다.

40.7 이벤트 위임

focus/blur ⇒ focusin/focusout mouseenter / mouseleave ⇒ mouseover / mouseout으로 대체하여 캡처링을 막을 수 있다

여러 개의 하위의 DOM요소를 ㄹ이벤트 핸들러에 등록하는 대신 하나의 상위 DOM요소에 핸들러를 등록하는 것을 말한다.

40.8 DOM 요소의 기본 동작 조작

40.8.1 DOM 요소의 기본 동작 중단

document.querySelector('a').onclick = e =>{
	e.preventDefault
}
//a의 기본동작을 중단한다.

40.8.2 이벤트 전파 방지

document.querySelector('.btn2').onclick = e =>{
	e.stopPropagation() ; 이벤트 전파를 중지시킨다.
}

40.9 이벤트 핸들러 내부의 this

40.9.1 이벤트 핸들러 어트리뷰트 방식

이벤트핸들러를 호추할 때 인수로 전달한 this는 이벤트를 반인디앟ㄴ DOM 요소를 가리킨다.

40.9.2 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식

이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드방식의 this는 모두 이벤트 객체의 currentTarget 프로퍼티와 같다. 클래스 필드에 할당한 화살표 함수는 이벤트 핸들러로 등록하여 이벤트 핸들러 내부의 this가 인스턴스를 가리키도록 할 수 있다. 다만 이때 이벤트 핸들러 increase는 프로토타입 메서드가 아닌 인스턴스 메서드가 된다,

수업시간에 들은 것

1. nodeValue vs contentWrite 차이
2. 어트리뷰트와

DOM을 보면 일관성이 없다. 맨처음에 잘못만들었기 때문에 잘못되었다.

1. 어트리뷰트 등록방식
<button onclick=""> </button>
주의 어트리뷰트는 string이 와야한다. 어트리뷰트로 이벤트를 등록한다면 호출문을 작성하기에
소괄호에 인자를 넣으면 된다.
단점 : html코드에 자바스크립트 코드가 섞여있다. 이게 나쁜 이유는, html은 html파일에
js는 js에 넣는게 전통적인 생각이다.

jsx 리액트.createElement로 호출된다

바닐라로할 때는 1번은 쓰지 않는 것이 좋다.

jquery는 html에 종속된다. 즉 디자인이바꿔지고 나서 에러가 나올 수 있다.

2. 프로퍼티
$btn.onclick =function{} ==>요소노드를 담고있다
2-1 재할당을 통해서 값을 지울 수 있다
2-2 null로 이벤트를 없앨 수 도 있다.
0$ 옵저버블은 뒤에 $f를붙인다
3. addEventListener
한개의 객체에 여러 이벤트를 사용할 수 있기 때문에 addEventListener을 사용하는 것이 좋다

event => 이벤트가 일어나면 생성되는 객체
load부터 사용자의 이벤트, 커스텀이벤트까지 다양하게 있다.

이벤트 리스너는 나한테 맞는 이벤트가 나올때까지 캡쳐링을 한다. ( 타입은 클릭을 말한다)
그리고 전파가 일어난다.
preventDefault는 어떤 객체를 눌렀을때 발생하는 이벤트를 없애는 방법이다.

A-B-C
->캡처링
<-버블링
이 캡쳐링을 주었을 때 방향을 정하고, stop propagation으로 방향을 정할 수 있다.

어트리뷰트 this =>일반함수기 때문에 window
프로퍼티는 onclick의 프로퍼티를 가지고 있는, 객체
프로퍼티의 화살표함수
$button.onclick = e=>{} //전역 객체(한단계가 박으로 나간다) 이를 해결하려면
bind를 이용해서 묶는 방법이 있다.

결론 이벤트 핸들러에서는 this를 사용하지 않는 것이 좋다

parentNode.matches(’.className’)

parentNode.contains(’classname)

와 같은 메서드가 있으니 나중에 사용할 것