TIL Day-15

이벤트 객체

사용자입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체다.

DOM LIVE

sprint review

  function handleClick(e) {
    // 아래의 빈 칸(____)을 채우세요.
    // console.log("working?");
    let currentMenu = e.textContent; // TODO
    console.log(currentMenu + "를 클릭하셨습니다.");
  }
  

1. DOM은 HTML을 조작할 수 있도록 마련된 객체형태의 구조나 모델이다.

2. console.dir() 과 console.log()의 차이점

console.dir()	console.log()
객체형태로 반환	화면내용을 HTML형턔로 보여줌
사용된 객체	class,id등

3. DOM 메소드 정리

• createElement : tag를 생성할 때 사용
• querySelector, querySelectorAll : tag를 지정할 때 사용
• textContent : tag에 적힌 요소만 가져옴
• append, appendChild : 부모태그에 자식태그를 붙히는 방식 ex) a.append(b)
• classList.add, classList.remove : 태그에 클래스를 추가 혹은 제거
• remove, removechild : 태그 혹은 자식태그를 삭제 ex) a.removechild(b)

4. script tag를 head에 넣는 것과 body가 끝나기 전에 넣는 것의 차이

script가 html 중간에 들어가면, 객체지향프로그램이 html을 파싱(해석)하는 중간에 js파일을 읽어들여 함수나 객체를 실행시킬 수 없는 상황이 발생할 수 있다. 따라서 /body 바로 앞에 위치시킴으로서, html이 모두 파싱된 후 화면에 로딩이 된 후 js파일을 해석하면 된다.

5. innerHTML과 innerText, textContent의 차이

innerHTML	innerText	textContent
해당 element의 HTML요소를 가져옴	해당 element에서 사용자에게 보여지는 text만 가져옴	해당 Node가 가지고 있는 텍스트 값을 그대로 읽는다

6. HTML 구조를 DOM을 이용해 만들 수 있나요?

<div class="tweet">
 <div class="username">김코딩</div>
</div>

const a = document.createElement('div')
a.classList.add('tweet')
document.body.append(a)
const b = document.createElement('div')
b.classList.add('username')

7. 클릭 이벤트를 붙히는 방법

1. addEventListener('keys',value)

a.addEventListener('keyup',function(){
}
b = function(){
}
a.onclick = function(){
}

이벤트 종류
https://jenny-daru.tistory.com/17

8. 유효성 검사에서 필요한 과정

9. 문제를 함수로 쪼개는 것이 왜 좋은지 이해하고 있는가?