Meme's IT

[JS] JavaScript와 DOM 본문

FrontEnd/JavaScript

[JS] JavaScript와 DOM

Memez 2023. 10. 23. 13:56

# 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>

heading이 선택된 것 확인 가능

(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) 만약 여러개 중에 중간에 있는거 하나만 선택하고 싶다면?

더보기

개발자 도구 >  선택하고 싶은 요소 >  복사 > 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
'FrontEnd/JavaScript' Related Articles more