TIL(19)

💻 Today

1. 코드스테이츠

• DOM 이해하기
• 유효성 검사 (pair)
• Algorithm (1,2)

---

2. 학습

• DOM

---

3. 생각

dom을 이용한 html, css의 접근 새롭기도 하고 아직 익숙하지 않은 개념이라 어려웠다.
익숙하지 않아 여러번 강의를 돌려보고 검색해 봤다.
익숙해지면 꽤나 재밌는 결과물을 만들어 낼 수 있으리라는 것을 알게되니 좋았다.
낮에 페어와 함께 했던 부분 및 강의 내용을 상기시키며 다시 한번 나만의 코드를 작성해 보는게 오늘의 목표!

---

4. DOM

메소드	의미	결과
document.getElementById("id")	HTML id속성으로 태그 선택	id에 해당하는 태그 하나
document.getElementsByClassName("class")	HTML class속성 태그 선택	class에 해당하는 태그 모음(HTML Collection)
document.getElemetsByTagName("tag")	HTML 태그 이름으로 태그 선택	tag에 해당하는 태그 모음(HTML Collection)
document.querySelector("css")	css 선택자로 태그 선택	css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나
document.querySelectorAll("css")	css 선택자로 태그 선택	css 선택자에 해당하는 태그 모음(NodeList)

유사배열

• 배열과 유사한 객체
  • 숫자 형태의 indexing이 가능
  • length 프로퍼티가 있다.
  • 배열의 기본 메소드를 사용할 수 없다.
  • Array.isArray(유사배열)의 리턴값이 false다.

이벤트

• 이벤트 : 웹 페이지에서 발생하는 부분의 일 ex)버튼 클릭, 스크롤, 키보드 입력...

• 이벤트 핸들링 : js를 통해 이벤트를 다루는 일

• 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드
  
  

이벤트 핸들러 등록 방법

// js로 해당 DOM 개게의 onclick 프로퍼티 등록
let btn = document.querySelector('#myBtn');

btn.onclick = function () {
  console.log('Hello Word!');
};