Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- css#cascading#display#block#inline
- border-style
- box-shadow
- grid-row-start
- javascipt
- React
- grid-column-end
- relative
- collapsing-margins
- package.json
- scope
- classList
- mongodb
- createElement
- variables
- javascript
- var
- gird-row-end
- valuable
- Grid
- python #qqplot #qq-plot #code
- grid-template-areas
- confirm()
- localStorage
- prompt()
- foreach()
- CSS
- className
- grid-column-start
- react-hook-form
Archives
- Today
- Total
data life
[JavaScript] DOM 본문
✅ 문서 구조
- 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 |