일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- unionfind
- PWA
- db
- 싸피셜
- 알고리즘
- VITE
- 싸피10기
- Django
- 리액트
- 플로이드워셜
- js
- Javascript
- 싸피
- 데코레이터
- sqld
- 셀프넘버
- 머신러닝종류
- react
- 백준
- SQL
- 14658
- queryset
- Python
- SSAFYcial
- pwa적용하기
- TypeScript
- vitepwa
- QuerySetAPI
- SSAFY
- git
- Today
- Total
Meme's IT
[JS] JavaScript와 DOM 본문
# JavaScript를 사용하는 방법
1.html파일 내 Body에 script 태그를 이용함
2. js파일을 만든 후, script: src 태그를 이용
3. 개발자도구 > console에서 직접 입력
→ Node.js / Deno등을 통해 바로 할 수도 있음
# DOM
= Document Object Model
웹 페이지를 하나의 객체로 보는 것,
프로그래밍 언어가 페이지 구조에 접근할 수 있는 방법을 제공한다
HTML 문서를 자바스크립트가 접근 및 조작할 수 있도록 도와주는 API를 제공하는 인터페이스
→ 문서의 요소(element), 속성(attribute), 스타일(style) 등을 접근, 변경할 수 있도록 함
- DOM에서 모든 요소, 속성, 텍스트는 하나하나 모두 객체임
- 최상위에는 document라는 객체 (모두 document의 자식)
- 객체마다 부모 자식의 관계(=상속이 존재함) → DOM Tree
※ Document란?
= 웹 페이지 전체
DOM Tree의 진입점 / 페이지를 구성하는 모든 요소를 토함
▶ 문서의 요소를 객체로 제공하여
다른 프로그래밍 언어에서 접근하고 조작할 수 있는 방법을 제공하는 API
즉, DOM은 웹 페이지의 컨텐츠에 대한 프로그래밍 인터페이스를 제공하여,
웹 페이지의 구조를 변경하거나 내용을 동적으로 조작하는 데에 사용된다.
## 참고
JavaScript == DOM? → False
JavaScript > DOM? → False
DOM을 이용해서 수정을 하는거지, 둘이 같거나 JS안에 DOM이 있는건 아님
웹 페이지를 동적으로 만든다 = 웹 페이지를 조작한다
조작 순서 1) 조작하려는 요소를 선택
2) 선택한 요소를 조작
# DOM 선택
document.querySelector()
// 요소 한 개 선택
document.querySelectorAll()
// 요소 여러 개 선택
(1) document.querySelector(selector)
제공한 선택자와 일치하는 element 한 개 선택
제공한 CSS selector을 만족하는 첫번째 element를 반환해줌 (없다면 null로)
<body>
<h1 class="heading">DOM 선택</h1>
<script>
console.log(document.querySelector('.heading'))
</script>
</body>
(2) document.querySelectorAll(selector)
제공한 선택자와 일치하는 여러 element를 선택
제공한 CSS selector을 만족하는 NodeLIst를 반환해줌
<body>
<h1 class="heading">DOM 선택</h1>
<a href="https://www.google.com/">google</a>
<p class="content">content1</p>
<p class="content">content2</p>
<p class="content">content3</p>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
<script>
console.log(document.querySelectorAll('.content'))
console.log(document.querySelectorAll('ul > li'))
</script>
</body>
(cf) 만약 여러개 중에 중간에 있는거 하나만 선택하고 싶다면?
![](https://blog.kakaocdn.net/dn/oeNem/btsyTypWAc1/RKrBkrzUEKG1s8PA7gCJXK/img.png)
개발자 도구 > 선택하고 싶은 요소 > 복사 > selector 복사
console.log(document.querySelector('body > p:nth-child(4)'))
querySelector부분에 붙여넣기
# DOM 조작
1. 클래스 속성 조작
element.classList.add()
// 지정한 클래스 값을 추가
element.classList.remove()
// 지정한 클래스 값을 제거
element.classList.toggle()
// 클래스가 존재한다면 제거 후 False 반환
// 없다면 클래스 추가 후 True 반환
<script>
const h1Tag = document.querySelector('.heading')
h1Tag.classList.add('red') // 색이 빨강으로 바뀜
h1Tag.classList.remove('red') // 다시 원래색으로 돌아옴
h1Tag.classList.toggle('red') // red가 없어졌으므로 다시 생기고 빨강으로 출력
h1Tag.classList.toggle('red') // red가 있으니까 없어지고 원래색으로 바뀜
</script>
2. 일반 속성 조작
Element.getAttribute()
// 해당 요소에 지정된 값을 반환(조회)
Element.setAttribute(name, value)
// 지정된 요소의 속성값이 있다면 갱신, 없다면 새로운 속성 추가
Element.removeAttribute()
// 요소에서 지정된 이름을 가진 속성을 제거
const aTag = document.querySelector('a') //a tag가 선택됨
aTag.setAttribute('href', 'https://www.naver.com/') //a tag의 주소가 네이버로 바뀜
aTag.removeAttribute('href') //주소 삭제, null이 반환됨
3. HTML 콘텐츠 조작
(1) textContent
const h1Tag = document.querySelector('h1') // h1을 저장하고
h1Tag.textContent = "새로운 제목" //기존의 h1에 있던 텍스트를 바꿔준다
(2) createElement
작성한 tagname의 HTML 요소를 생성하고 반환해줌
const h1Tag = document.createElement('h1') // h1태그 한개 만듬
h1Tag.textContent = '제목' // 내용을 '제목'으로 넣어줌
(3) appendChild
부모.appendChild(자식) 형태로 사용
const section1 = document.querySelector('section') # section 태그를 가져옴
const myArticle = document.createElement('article') # article 태그를 하나 만듬
section1.appendChild(myArticle) # section(부모)안에 article(자식)을 넣어줌
(4) removeChild
자식 Node를 제거, 반환
const h1Tag = document.createElement('h1') // h1태그 한개 만듬
h1Tag.textContent = '제목' // 내용을 '제목'으로 넣어줌
const divTag = document.querySelector('div') // div태그 가져옴
divTag.appendChild(h1Tag) // div에 h1넣어줌
divTag.removeChild(h1Tag) // div에서 h1삭제
4. 스타일 조작
"요소.style.조작하려고하는 항목" 의 형식
const pTag = document.querySelector('p')
pTag.style.color = 'red' // 색을 빨강으로 바꿔줌
참고
- 반복되는 항목이 많을 때, for문을 사용하면 편하다
// for 문 이용해서 해보기
var listItem = document.querySelectorAll('li') // li tag를 모두 가져옴
for (let i = 0; i < todoList.length; i++) { // 모든 li에 대해서
listItem[i].classList.add('list-group-item') // 작업을 수행해줌
console.log(listItem[i])
}
var arr = new Array(myname, myjob, myexperience, myemail, myphone)
// 내가 직접 arr를 만들수도있음
for (var i = 0; i < arr.length; i++) {
arr[i].classList.add('highlight')
}
- const, var 등은 변수 선언이고
- console.log( )를 이용해서 print처럼 쓸 수 있음
'FrontEnd > JavaScript' 카테고리의 다른 글
[JS] 조건문과 반복문 (0) | 2023.10.24 |
---|---|
[JS] 연산자 (0) | 2023.10.24 |
[JS] 데이터 타입 (0) | 2023.10.24 |
[JS] JavaScipt의 변수 (0) | 2023.10.24 |
[JS] JavaScript 개요 (0) | 2023.10.23 |