data life

[JavaScript] DOM 본문

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 = ''

'Front-end > JavaScript' 카테고리의 다른 글

[JavaScript] 배열  (0) 2023.02.10
[JavaScript] 객체  (0) 2023.02.10
[JavaScript] 함수  (0) 2023.02.01
[JavaScript] 값(Value)에 대해 알아보자  (0) 2023.01.10
Canvas  (0) 2022.11.24