DOM
DOM이란 브라우저가 HTMl 문서를 파싱하는 과정에서 생겨나는 객체이다.
이사진은 트리구조라고도 한다.
붉은색은 엘리먼트노드라고 한다.
파란색은 텍스트노드이다.
보라색은 속성노드이다.
노드는 다 객체의 형태로 지니고 있다.
객체 안에는 여러 속성이 있다.
console.dir(document) ==> 특정 객체의 수 많은 속성들을 볼수 있다.
console.dir(document.childNodes) ==> dom에 점찍고 특정 속성을 볼수 있다.
Html 문서에 의해 dom이 생성이 나고 dom 내부에 노드가 있고 개발자는 노드에 있는 속성으로 html을 조작을 가능하다. 즉 우리는 dom을 활용해 html을 조작하고 있던거다.
window
console.log(window.event);
윈도우는 전역객체이다. 이 윈도우를 활용해주면 event를 체크해 줄수 있음
그리고 인풋에 입력한 글자의 키코드를 알수 있음
ex) 엔터는 keyCode가 13이다.
document.createElement()
createElement() 메소드안에 태그 이름을 적으면 태그를 추가할 수 있다.
ex) document.createElement("li");
appendChild();
const newLi = document.createElement("li");
const newSpan = document.createElement("span");
newLi.appendChild 메소드는 li태그가 담긴 nuewLi 변수의 li태그 내부에 하위속성으로 어떠한 태그 하나를 추가할 때 사용한다.
ex) newLi.appendChild(newSpan); ==> li태그 안에 span태그를 담는다.
classList.toggle()
classList.toggle("클래스명") classList에는 여러 메소드가 있는 그중 toggle는 add,와 remove 기능 둘다 한다.
즉 클래스를 추가하거나 제거를 반복해 준다.
classList.add()는 클래스를 추가해 준다.
classList.remove()는 클래스를 제거해 준다.
addEventListener()
addEventListenr는 특정 태그가 어떤 동작을 하게 되면 그 함수를 실행 시켜주는 메소드이다.
예를 들어 btn.addEventListener('click', () => {})
btn을 클릭시 익명함수를 실행시킨다.
document.querySelectorAll("li");
콘솔로그에 찍어보면 li태그가 배열형태로 담겨져 있다.
contains()
contains메소드는 해당 클래스리스트에 complete라는 클래스가 담겨있는지 확인해준다.
ex) complete: todoList.children[i].classList.contains("complete")
예를 들어 complete: todoList.children[i].classList안에 complete 클래스가 있는지 확인해준다.
children()
children()메소드는 자식 요소에 접근을 해준다.
만약 html 문서가
스코프
스코프란 변수 참조의 유효범위이다.
스코프에는 전역 스코프, 지역 스코프가 있다.
전역 스코프(global scope): 코드 전체 부분을 말한다.
즉 지역 스코프안에서도 변수 참조가 가능하다.
지역 스코프(local scope): 함수안에 변수를 선언시 지역 스코프이다.
함수 레벨 스코프
Function () {
Var x = 0;
}
console.log(x)
// var 키워드는 함수 레벨 스코프를 따른다.
그래서 콘솔 로그값은 언디파인드 값이 나온다.
블록 레벨 스코프
if() {
Var y = 0;
}
console.log(x)
// var 키워드는 블록 레벨 스코프를 따르지 않는다.
그래서 콘솔로그 값은 0이 나온다.
let키워드는 함수 레벨 스코프를 따른다.
let키워드는 블록 레벨 스코프도 따른다.
그래서 저위에 코드를 var 대신 let를 적으면 두개다 언디파인드 값이 나온다.
