+++
JS CallStack 호출스택
https://new93helloworld.tistory.com/358
즉시실행함수와 클로저(렉시컬스코프) 연관성 알아보기
defer async
자바스크립트 파싱에 의한 DOM 생성 중단되는 문제를 근복적으로 해결하기 위한 어트리뷰트
async, defer 모두 html 파싱과 외부 스크립트 파일의 로드가 비동기적으로 동시 진행하지만 자바스크립트 실행시점에 차이가있다.
asynx
scirpt 태그의 순서와는 상관없이 로드가 완료된 자바스크립트부터 먼저 실행되므로 순서보장X
-> 순서 보장이 필요한 script 태그에는 async를 지정하지 않아야한다.
defer
async와 마찬가지로 html 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 단, 자바스크립트 파싱과 실행은 html파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후 (이때 dom 이벤트가 발생)진행된다.
-> DOM 생성이 완료된 이후 실행되어야할 스크립트에 유용하다.
DOM
Document Object Model
HTML 문서의 모든 요소를 객체로 만들어 사용하도록 여러기능을 제공하는 모델
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
document 객체
https://developer.mozilla.org/ko/docs/Web/API/Document
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()
Node
DOM 표준에 나와있는 HTML의 모든 개별적인 요소
종류
1. 문서노드 : document
2. 요소노드 : HTML 각각의 요소
3. 텍스트노드 : HTML 요소 내부의 텍스트
4. 속성노드 : HTML 속성
5. 주석노드 : 주석
6. 루트노드 : HTML
트리자료 구조 => 노드간의 계층적 구조로 이루어짐
계층구조 -> 관계를 가진다
노드 관계
1. 부모/조상(상위) : parent
2. 자식/후손(하위) : first / last
3. 형제 / 자매
<!-- 노드 -->
<div id="dom">
<h1>Plus-Minus</h1>
<div id="result">0</div>
<button id="btn-plus" class="btn">+1</button>
<button id="btn-minus" class="btn">-1</button>
</div>console.log(document.childNodes)
console.log(document.childNodes[1])
console.log(document.childNodes[1].childNodes)
ㄴ 중간에 빈 공백 혹은 줄바꿈은 textNode로 간주 -> </head><body>
const result3 = document.getElementById('result')
console.log(result3.previousSibling)
console.log(result3.nextSibling)
내가 HTML 요소를 선택했는지, Node 접근했는지, 지정 방법에 따라 사용가능한 메소드가 달라진다!
html collection
node list
-> 서로 메소드가 다르다
DOM Event
https://developer.mozilla.org/ko/docs/Web/API/Event
돔 객체 내부에 일어나는 모든 특정 사건
1 인라인 방식 : 권장X
html요소의 속성 내부에 onclick ="" 이벤트 추가
<h1>Menu</h1>
<div id="sub">설명</div>
<hr>
<h3>서비스</h3>
<button id="check" class="tab" name="checkName"onclick="showContent()">조회</button>
<button id="transfer" class="tab">이체</button>
<ul class="checkService">
<li>계좌조회</li>
<li>수표조회</li>
<li>오픈뱅킹</li>
</ul>
<div id="content"></div>2 프로퍼티 방식
const check = document.querySelector('#check')
check.onclick = function() {
document.querySelector('#content').innerHTML = '조회 서비스'
}
check.onclick = function showContent2 () {
document.querySelector('#content2').innerHTML = '조회 서비스2'
} -> 같은 이벤트 중복등록 불가한계점 : 같은 이벤트는 중복 등록 불가
3 addEventListner
const check = document.querySelector('#check')
check.addEventListener('click', () => {
document.querySelector('#content').innerHTML = '조회 서비스'
})
check.addEventListener('click', () => {
document.querySelector('#content2').innerHTML = '조회 서비스2'
})같은 이벤트 중복 가능
실습
html
<div>
<h1>Plus-Minus</h1>
<div id="result">0</div>
<button id="btn-plus" class="btn">+1</button>
<button id="btn-minus" class="btn">-1</button>
</div>script
const btnPlus = document.getElementById('btn-plus')
const btnMinus = document.getElementById('btn-minus')
const result = document.getElementById('result')
let num = 0
btnPlus.addEventListener('click', () => {
result.innerHTML = ++num
})
btnMinus.addEventListener('click', () => {
result.innerHTML = --num
})