Front-end/JavaScript

[JavaScript] DOM

주술회전목마 2023. 2. 3. 20:07

✅ 문서 구조

  • HTML(Mark Up), MD
  • Xlsx => MS 엑셀, 구글 스프레드시트
  • Docx => MS워드, 구글 문서
  • PDF => 수 많은 도구 뷰어
  • PPT => 수 많은 도구 뷰어
  • HWP => 한컴

✅ Node, Tree

  • html = 문서
  • 문서를 조작하는 언어 = javascript
  • how❓ => Document Object Model(DOM)

이때, DOM은 node들로 구성됨

node들은 트리형태로 구성되어 있음

✅ DOM 속성

>> 속성이 무지하게 많기 때문에 다 외울필요는 없고 필요할 때 확인이 가능하다.

✅ DOM 선택

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()

     getElements => HTML Collection으로 가져옴

 

⭐️ querySelector() : id(#), class name(.), tag name 맨 처음껄 하나씩 가져와줌

⭐️ querySelectorAll() : id(#), class name(.), tag name 모든 걸 가져와줌

✅ DOM 조작

textContent()

removeChild(element)

appendChild(element)

createElement()

innerHTML = ''