DOM(Document Object Model)
HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조
노드
<div class = "greeting">Hello</div>
div / class / greeting / Hello / div
start tag / attribute name / attribute value / contents / end tag
요소 노드 : div / 어트리뷰트 노드 : class:"greeting" / 텍스트 노드 : "Hello"
노드 객체들로 구성된 트리 자료구조를 DOM / DOM트리라고 한다
출처 : https://poiemaweb.com/js-dom
- 문서 노드(Document Node)
트리 최상위의 루트노드, HTML 문서당 document는 유일함, 하위 노드에 접근하려면 문서 노드를 통해야 함 - 요소노드
HTML 요소를 가리키는 객체, HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화 한다
요소 노드는 문서의 구조를 표현함 - 어트리뷰트 노드
HTML 요소의 어트리뷰트를 가리키는 객체, 어트리뷰트 노드는 그림과 같이 요소노드를 통해 접근이 가능함 - 텍스트 노드
텍스트 노드는 HTML 요소의 텍스트를 표현, 최종단에 위치한 노드(자식 노드를 가질 수 없다)
노드 객체의 상속 구조
출처 : https://velog.io/@hangem422/js-web-node
노드 객체에는 모든 노드 객체가 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있다
노드 객체의 공통된 기능일수록 프로토타입 체인 상위 , 개별 기능은 체인 하위에 구축하여 상속 구조를 갖는다
▶DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. 이것을 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다
DOM
CSS 선택
input 요소중 type 어트리뷰트 값이 'text'인 요소를 모두 선택
input[type=text] {}
자식 선택자 : div요소의 자식 요소 중 p를 모두 선택
div > p {}
인접 형제 선택자 : p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택
p + ul {}
일반 형제 선택자 : p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택
p ~ ul {}
NodeList 객체는 실시간 노드 객체 상태 변경 반영하는 live 객체로 동작
안전한 DOM 컬렉션 -> HTMLCollection , NodeList 객체를 배열로 변환하여 사용해라
사용자로 부터 입력ㅂ다은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 XSS에 취약함
HTML 마크업 내에 자바스크립트 악성 코드가 포함되어 있다면 파싱 과정에서 그대로 실행될 가능성
나머지 내용은 쭉 읽어봤다
이벤트와 타이머는 부분부분 정리할 예정이다
타이머: 디바운스와 스로틀
짧은 시간 간격으로 연속하여 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법
이벤트 예시 : scroll,resize,input,mousemove
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>click me</button>
<pre>일반 클릭 이벤트 카운터 <span class="normal-msg">0</span></pre>
<pre>디바운스 클릭 이벤트 카운터 <span class="debounce-msg">0</span></pre>
<pre>일반 클릭 이벤트 카운터 <span class="thottle-msg">0</span></pre>
<script>
const $button=document.querySelector('button')
const $normalMsg=document.querySelector('.normal-msg')
const $debounceMsg=document.querySelector('.debounce-msg')
const $throttleMsg=document.querySelector('.thottle-msg')
const debounce=(callback,delay)=>{
let timerId;
return event=>{
if(timerId) clearTimeout(timerId)
timerId=setTimeout(callback,delay,event)
}
}
const throttle=(callback,delay)=>{
let timerId
return event=>{
if(timerId) return
timerId=setTimeout(()=>{
callback(event)
timerId=null
},delay,event)
}
}
$button.addEventListener('click',()=>{
$normalMsg.textContent= + $normalMsg.textContent+1
})
$button.addEventListener('click',debounce(()=>{
$debounceMsg.textContent= + $debounceMsg.textContent+1
},500))
$button.addEventListener('click',throttle(()=>{
$throttleMsg.textContent= + $throttleMsg.textContent+1
},500))
</script>
</body>
</html>
버튼을 빠르게 누르게 되면 일반 클릭 이벤트 카운터만 클릭 횟수에 맞춰서 올라간다
디바운스
input 이벤트는 사용자가 텍스트 입력 필드에 값을 입력할 때마다 연속해서 발생한다.
debounce 함수가 반환한 함수는 debounce 함수에 두번째 인수로 전달한 시간(delay)보다 짧은 간격으로 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정한다.
짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간 동안 이벤트가 더 이상 발생하지 않으면 이벤트 핸들러가 한 번만 호출되도록 하는 것이 디바운스
-> resize,input 요소에 입력되 값으로 ajax 요청하는 입력 필드 자동완성 UI구현, 버튼 중복 클릭 방지등 유용하게 사용
스로틀
짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한번만 호출되도록 함
이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다
-> scroll 이벤트처리, 무한 스크롤 UI구현 등에 사용
출처
'JavaScript' 카테고리의 다른 글
| Ajax (0) | 2022.07.11 |
|---|---|
| 비동기 프로그래밍 (1) | 2022.07.10 |
| 브라우저의 렌더링 과정 (0) | 2022.07.07 |
| Set과 Map (0) | 2022.06.30 |
| 스프레드 문법/디스트럭처링 할당 (1) | 2022.06.30 |