DOM & EVENT

HTML, CSS, JAVASCRIPT의 기능

HTML

브라우저가 이해할 수 있도록 어떤 구조를 가졌는지 알 수 있는 마크업 언어로 구성된 문서

CSS

HTML을 스타일링해주는 것

• inline
• <style></style>
• .css 를 link로

JAVASCTIP

페이지에 동적인 요소를 추가하기 위해 탄생

• import
• <script>
• .js를 script로

---

DOM ?

Documet Object Model

• JavaScript와 HTML의 소통을 하게 해주는 중간다리
• Document = html (html을 object로 만들어 준 것이 document)
  => 객체 사용과 동일하게 .(점)과 [](브라켓) 사용하여 접근
• HTML을 계층화 시켜 트리구조로 만든 객체 모델
  

DOM 접근 방법

• getElementById() : 성능면으로는 좋음

• getElementByClassName()
  => class가 여러개일 경우 유사배열로 가져오기 때문에 해당 객체 한개만 접근하려면 인덱스 사용해서 접근 가능

  const main = document.getElementsByClass()
  main.getElementsByClass() // 접근 가능
   main.getElementsById() // 접근 불가능

• querySelector() (그렇다고 느리거나 하는건 아니기 때문에 사용하는 것 괜찮음)
  => 자손 객체에 접근이 쉬움 ex : querySelector('.className img')

• querySelectorAll()
  => 여러개를 가져올 수 있어서 유사배열로 가져옴

여러번 중복 사용을 편하게 해주는 Tip!!

const get = (element) => document.querySelector(element)

const imgClass = get('.imgClass')

---

addEventListener

• 사용자가 행동을 하는 것 (click, scroll.. 등)
  사용자가 해당 이벤트를 발생시켰을 때 내용을 작동하게 해준다
• 두가지 인자로 이벤트종류, 함수를 사용 (콜백함수)
  => 콜백함수 ? 함수호출 시 인자로 또 다른 함수를 전달하는 것, 이벤트종류를 실행하면(콜) 실행 이후에 적용(백)이 되는 것

요소.addEventListener(이벤트종류, function() {
	//이벤트가 일어났을 때 실행할 내용
});

** 함수 내에서 return 사용 = 함수를 종료

---

공부하며 정리&기록하는 ._. 씅로그