DOM 총 정리

---

DOM 정리  

DOM

 

HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 방식이다

DOM은 자바스크립트를 사용해서 웹 화면의 구조를 추가,수정,삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공

HTML을 동적 구조로 조작할 수 있게 도와주는 모델

 

DOCUMENT

 

window의 document 속성은 창이 포함한 문서를 참조

document는 모든 종류의 문서에 대한 공통의 속성과 메소드를 제공

document의 querySelector 메소드는 선택자를 인자로 전달받아
전달받은 선택자와 일치하는 문서 안의 첫 번째 요소(element)를 반환한다.

textContent 속성은 노드가 포함하고 있는 텍스트 컨텐츠를 표현

 

EVENT

 

이벤트란 '시스템 내에서 일어나는 사건' (클릭, 키보드 입력, 스크롤 등)

각각의 이벤트들은 이벤트 발생 시 대응으로 이벤트 핸들러를 가질 수 있다.
이벤트 핸들러 정의하는 작업을 이벤트 핸들러 등록이라 한다.
이벤트 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 다르다.

 

addEventListener

 

addEventListener  메소드를 활용해 이벤트 핸들러 등록을 할 수 있다.
이는 이벤트 핸들러 속성을 사용하는 것보다 모던한 방법

 

이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터이다.

이벤트 발생 시에 이벤트 핸들러가 호출될 때 이벤트 객체가 전달되는데, 
이 때 이벤트 핸들러 함수의 매개변수를 통해 이벤트 객체를 받을 수 있다. ( event, e)

 

createElement / appendChild

 

document의 createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환한다.

 

appendChild 메소드는 노드에 자식 요소를 추가할 때 사용하는 메소드

append 메소드 또한 자식 요소를 추가할 때 사용 가능한데, 기능적으로 appendChild와 다른 면이 있다.

 

	appendChild	append
결과값	추가한 자식 노드 반환	반환 데이터 X
()에 들어갈 수 있는 값	노드 객체만 가능	노드 객체 or 문자열을 자식 요소로 추가 가능

 

value / preventDefault

 

요소의 텍스트에 접근하고 싶다면? -> textContent 또는 innerText

사용자가 요소에 입력한 값에 접근하고 싶다면? -> value (target.value)

 

사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근하면 된다.

value에 접근함으로써 입력 값 읽기 or 쓰기를 수행할 수 있다.

 

form에 포함된 입력 요소의 name을 통해 각 입력 요소에 접근할 수 있다.

 

form에서 이벤트가 제출되는 submit 이벤트가 발생하면 action 속성의 url로 리다이렉트되지만, 
이벤트 객체를 통해 기본 기능을 차단할 수 있다. (함수 내용 위에 e.preventDefault() 추가 ! )

 

삼항 연산

 

일반적으로 if문의 단축 형태로 사용되기 때문에, 삼항 조건 연산식이라고 부른다.

 

// 삼항 연산
조건식 ? 참인 경우의 결과 : 거짓인 경우의 결과

 

타이머 만들기

 

setTimeout

 

정해진 시간이 지나고 나면 주어진 함수를 실행하는 타이머 메소드

setTimeout(실행할 함수, ms 단위의 시간) (ex.1000ms -> 1초)
// 1000ms가 지나고 나면 함수를 실행한다.
setTimeout(function() {
	console.log('1초 지났어!')
}, 1000)​

 

setInterval

 

일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 타이머 메소드

setInterval(반복 실행할 함수, ms 단위의 시간)
// 500ms마다 함수를 반복 실행한다.
setInterval(function(){
	console.log('0.5초입니다 ㅎㅎ')
}, 500)​

 

clearInterval

 

setInterval 메소드가 호출되어 반복 실행할 함수 타이머를 등록하면, 타이머는 0이 아닌 숫자를 반환한다.
숫자는 타이머의 ID를 의미하며, 이를 clearInterval 메소드에 전달하면 해당 타이머의 반복 실행이 취소된다.

// 세팅된 타이머의 반환값(ID)를 변수에 저장하자
let timer;
timer = setInterval(function(){
	console.log('0.5초 지났습니다 ㅎㅎ')
}, 500)

// 세팅된 타이머를 멈춰줘요.
clearInterval(timer)​

 

classList

 

웹 요소(element)로부터 클래스 컬렉션을 반환하는 읽기 전용 속성

const div = document.querySelector('div')

div.classList.add('menu') // 지정한 클래스 값 추가
div.classList.remove('menu') // 지정한 클래스 값 제거

div.classList.toggle('any value') // 클래스 값 토글링

 

일반적으로 toggle은 있으면 제거하고, 없으면 생성한다는 의미다.

 

 

event.target 과 event.currentTarget 의 차이  

 

클릭된 요소를 기준으로 사용하는 경우 event.target을 사용

 

event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환 (내가 클릭한 태그의 부모 태그를 반환)

---