한 걸음씩

[JS][Udemy] DOM 본문

JS

[JS][Udemy] DOM

winter17 2023. 3. 24. 19:22

► DOM

  • Document Object Model
  • 웹 페이지를 구성하는 JS 객체들의 집합
  • 문서 : 문서 객체 모델 내 다른 것들처럼 하나의 객체, 자동 생성

 

1.  Selecting

► getElementById()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unicorn</title>
</head>
<body>
    <h1 id="mainheading">I &hearts; unicorns</h1>
    <img src="https://devsprouthosting.com/images/unicorn.jpg" id="unicorn" alt="unicorn">
    
</body>
</html>
// Select the image element by its id and save it to a variable called image
// Select the h1 by its id and save it to a variable called heading

const image = document.getElementById('unicorn')
const heading = document.getElementById('mainheading')

 

► getElementsByTagName

 

► getElementsByClassName

 

► querySelector ★

document.querySelector('h1') // tag select
document.querySelector('#id') // id select
document.querySelector('.class') // class select

 

►querySelectorAll ★

document.querySelectorAll('h1')
document.querySelectorAll('#id')
document.querySelectorAll('.class')
// 타입과 속성으로 선택
const checkbox = document.querySelector('input[type="checkbox"]')

 

2. Manipulate  

► innerHTML

► textContent

<h1>Pickles Are <span>Delicious</span></h1>
// Delicious를 Disgusting로 바꾸기
document.querySelector('span').textContent = 'Disgusting'

► innerText

3. Attributes  

document.querySelector('#id').src // src처럼 속성을 선택해 내용을 변경할 수 있다
let nonce = script.getAttribute("nonce"); // getAttribute 메서드를 사용해 속성을 바로 선택할 수 있음
<button>Hello World</button> 

// button 태그를 선택해 button 변수에 저장
const button = document.querySelector("button");

// setAttribute 메서드로 button의 name을 helloButton으로 변경

// setAttribute(name, value)
button.setAttribute("name", "helloButton");
// 위의 속성과 같은 결과를 불러옴
button.name = 'helloButton'

>> <button name="helloButton">Hello World</button>

4.  스타일 변경하기  

► style 

  • style을 지정해주지 않으면 DOM에서 작업하기 어려움 
    • 특히, 많은 스타일을 한 번에 설정하는 경우 좋은 방법이 아님
    • css 클래스를 만들어서 클래스로 접근하는게 더 나은 방법
  • style 객체를 사용해서 값을 변경하는 방법 가능
// 자주 사용하는 방법은 아님
// 인라인 스타일은 아주 구체적이고 특정하게 적용되기 때문에 주의해야 함
h1.style.color = 'red'

h1.style.fontsize = '3em'

h1.style.border = '2px solid pink'
// 모든 a태그를 선택해서 style color값을 red로 변경할 수 있음
const allLinks = document.querySelector("a");

for (let link of allLinks) {
		link.style.color = 'red'
}

 

 

► ClassList

  • element.classList 그 자체는 읽기 전용 프로퍼티지만 add()와 remove() 메서드를 이용하여 변형할 수 있다
  • getAttribute, setAttirbute로 class를 조작하는 것에 비해 간단하다
  • 요소에 현재 클래스를 적용하는 손쉬운 방법
  • 클래스를 조장하고, 서로 토글하고, 제거하거나 추가하는 방법
  • https://developer.mozilla.org/ko/docs/Web/API/Element/classList

공부 더 하기!!

5.  계층 이동 

► parentElement

► children

► nextSibling

►previousSibling

6.  

► Append / AppendChild

►insertAdjacentElement

► after

 

► Practice 

 

 

► remove / removeChild

 

'JS' 카테고리의 다른 글

[JS][Udemy] pokemon game demo  (0) 2023.03.27
[TIL] 2303024  (0) 2023.03.24
[JS][Udemy] Params, Spread, Rest, Destructuring  (0) 2023.03.23
[JS][Udemy] Array Callback Methods  (0) 2023.03.22
[JS][Udemy] JavaScript Functions 2  (0) 2023.03.21
'JS' Related Articles more