TIL 230919

 getElementById/Class와 querySelector

퍼포먼스는 querySelector(이하 QS)보다 getElementById/Class(이하 ID)가 더 빠르다. 하지만 편의성과 가독성에서는 QS가 더 좋은 모습을 보인다. ID는 HTMLCollection에 리턴이 되고  QS는 NodeList에 리턴이 된다. 또한 forEach문은 QS에서만 사용이 가능하다.

 

편의성

ID/Class는 id/class 속성만 선택자로 사용할 수 있다. 이 말은 속성이 없다면 호출을 위해 속성을 지정해주어야 한다는 것, QS는 id, class, [data-*=""], input[name=""] 등 다양한 선택자 사용이 가능하다.

 

가독성

getElementsByClassName은 값이 배열로 반환된다. 그래서 단일 요소를 가져오려면 [0]을 붙여주어 사용한다. querySelector는 1개만 반환한다.

 

 

 Node와 Element의 차이

parentNode(이하PN)와 parentElement(이하CE)의 차이는 반환값이다. PE는  node를 반환하고 CE는 element를 반환한다. 그렇다면 node와 element의 차이는 무엇일까.

DOM은 노드들로 이루어져 있다. 아무 DOM 객체나 노드가 될 수 있다. document 자체나 엘리먼트, 텍스트, 주석 등이 모두 포함된다. 반면 엘리먼트는 우리가 일반적으로 생각하는 태그로 특정되는 노드들이다. 즉 엘리먼트는 노드에 포함되는 더 작은 개념이다.

DOM>Node>element

 

  parentNode vs. parentElement
parentNode는 특정 노드의 부모 노드를 반환하고, parentElement는 특정 노드의 부모 엘리먼트를 반환한다.
부모 노드가 엘리먼트인 경우 둘 다 엘리먼트를 반환하지만 특수한 경우(예를 들어 현재 노드가 documentElement인 경우) 둘의 반환값이 달라진다.

  childNodes vs. children
둘 다 특정 노드의 children을 가져오지만, childNodes는 NodeList 형태로 가져오고 children은 HTMLCollection 형태로 가져온다.
childNodes는 parentNode와 비슷하게 자식이 엘리먼트가 아니더라도 모두 가져온다. children은 자식 노드들 중 엘리먼트 노드만 가져올 수 있고, childNodes를 사용하면 모든 자식 노드들을 가져올 수 있는 것이다.

 

 append vs. appendChild 

둘 다 부모 노드에 자식 노드를 추가하는 메서드다. 자식 노드들의 맨 뒤에 추가된다. (맨 앞에 노드를 추가: prepend/ 선택 요소 바로 뒤 추가:after / 선택한 요소의 바로 앞 추가:before).  append는 노드와 텍스트를 추가할 수 있으며 한 번에 여러 개의 자식 노드를 추가할 수 있다.

appendChild는 노드만 추가할 수 있으며 한 번에 하나의 노드만 추가할 수 있다. appendChild를 이용해 텍스트를 추가하려면 createTextNode로 텍스트 노드를 생성한 후 추가해야 한다.

-출처-https://ant-hill.tistory.com/33

 

 

CDN

콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크. 사용자가 해당 서버와 멀리 떨어져 있는 경우 지리적으로 사용자와 가까운 cdn서버에 저장되어 컴퓨터에 빨리 도달하도록 한다.

 

 

 

이벤트객체(feat.addEventListner(e))

이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 것. 이벤트가 발생하면 동적으로 생성되어 핸들러에 파라미터로 전달된다.

이벤트는 객체이기 때문에 프로퍼티와 메소드를 가지고 있다. 

e.target과 e.currentTarget

e.target : 실제 이벤트를 발생시킨 요소

e.currentTarget: 이벤트에 바인딩된 dom 요소

e.preventDefault(): 이벤트의 기본 동작을 중단

e.stopPropagation(): 이벤트의 전파(버블링/캡처링)를 중단(이벤트가 부모요소/자식요소로 전달되어 실행되는것)

// HTML
<div class="parent">
  <button id="btn1">button 1</button>
  <button id="btn2">button 2</button>
</div>
--------------
// Javascript
function getEventTarget(e) {
  console.log(e.target); // <button id="btn1">button 1</button>
  console.log(e.currentTarget); // <div class="parent">...<div>
  console.log(this); // <div class="parent">...<div>
  console.log(e.currentTarget === this); // true
}

var parent = document.querySelector('.parent');
parent.addEventListener('click', getEventTarget);  
--------------------------------------------------------------------------
// HTML
<div id="divBox">
  <p id="paraBox">블로그
    <a id="linkBox" href="https://cheonmro.github.io/">클릭</a>
  </p>
</div>
--------------
// Javascript
document.getElementById("divBox").addEventListener("click", clickDiv);
document.getElementById("paraBox").addEventListener("click", clickPara);
document.getElementById("linkBox").addEventListener("click", clickLink);

function clickDiv(event) {
  console.log('Event for div');
}
function clickPara(event) {
  console.log('Event for p');
}
function clickLink(event) {
  event.stopPropagation();	// 이벤트의 전파를 중단함.
  console.log('Stop Propagation!')
}

 

 

 

 

 

 

참조/얉복깊복

const를 사용해야하는 경우 객체 배열 함수

export default <> import
export <> import {}