[ JS ] JavaScript DOM

메이·2024년 4월 29일
JavaScript

JavaScript

목록 보기
8/12

📖 DOM (Document Object Model)

: HTML 문서를 객체로 표현한 것으로, JS에서 HTML을 제어할 수 있게 해준다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="./index_2.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <!-- 주석 1 -->
        <div id="c1" class="child">사과</div>
        <div class="child">바나나</div>
        <div class="child">체리</div>
        <!-- 주석 2 -->
        텍스트 1
        텍스트 2
    </div>
    
</body>
</html>

01. Node와 Element

  • 노드 (Node) : 요소, 텍스트, 주석 등의 각 구조
  • 요소 (Element) : 노드의 하위 객체인 요소
const parentEl = document.querySelector('.parent')
// parent라는 클래스를 가진 요소를 찾아서 parentEl라는 변수에 할당해라

// 요소의 모든 자식 노드를 확인한다.
console.log(parentEl.childNodes)

// 요소의 모든 자식 요소를 확인한다.
console.log(parentEl.children)

[text, comment, text, div#c1.child, text, div.child, text, div.child, text, comment, text]
[div#c1.child, div.child, div.child, c1: div#c1.child]

✔ 배열데이터가 아니라 유사배열이다.
✔ 줄바꿈하는 것도 글자로 포함하여 text로 표기됨.

02. 검색과 탐색

document.querySelector (선택자)

: 선택자로 검색한 요소를 하나 반환한다. 검색 결과가 없으면 null을 반환한다.

const el = document.querySelector('.child:nth-child(2)')
console.log(el)

const el2 = document.querySelector('.child:nth-child(4)')
console.log(el2)

<div class="child">바나나</div>
null


document.querySelectorAll (선택자)

: 선택자로 검색한 모든 요소를 NodeList 객체로 반환한다.

const nodeList = document.querySelectorAll('.child')
console.log(nodeList)
console.log(nodeList[0], nodeList[1], nodeList[2])

// NodeList 객체는 유사배열이며 `.forEach()` 메소드는 내장되어 있지만
// 기타 배열 메소드는 사용할 수 없다.
nodeList.forEach((el, index) => {
    console.log(index + 1, el)
})

// NodeList 객체는 `Array.from()` 메소드를 통해 배열로 변환할 수 있다.
const nodes = Array.from(nodeList)
const names = nodes.map( el => el.textContent)
console.log(names)

NodeList(3) [div#c1.child, div.child, div.child]
<div class="child">사과</div> <div class="child">바나나</div> <div class="child">체리</div>

1 <div id=​"c1" class=​"child">​사과​​
2 <div class=​"child">​바나나​​
3 <div class=​"child">​체리​

['사과', '바나나', '체리']


getElementById (아이디)

: HTML id 속성 값으로 검색한 요소 하나를 반환한다. 검색 결과가 없으면 null로 반환한다.

const idEl = document.getElementById('c1')
console.log(idEl)

const selEl = document.querySelector('#c1')
console.log(selEl)

<div id="c1" class="child">사과</div>
<div id="c1" class="child">사과</div>


노드.parentElement

: 노드의 부모 요소를 반환한다.

const el = document.querySelector('.child')

console.log(el)
console.log(el.parentElement)

<div id="c1" class="child">사과</div>
<div class="parent"> ... </div>


previousElementSibling / nextElementSibling

  • 요소.previousElementSibling : 요소의 이전 형제 요소를 반환한다.
  • 요소.nextElementSibling : 요소의 다음 형제 요소를 반환한다.
const el = document.querySelector('.child')
console.log(el.previousElementSibling)
console.log(el.nextElementSibling)

const el = document.querySelector('.child:nth-child(2)')
console.log(el.previousElementSibling)
console.log(el.nextElementSibling)

null
<div class="child">바나나</div>

<div id="c1" class="child">사과</div>
<div class="child">체리</div>


요소.children

  • 요소.children : 요소의 모든 자식 요소를 반환한다.
  • 요소.firstElementChild : 요소의 첫번째 자식 요소를 반환한다.
  • 요소.lastElementChild : 요소의 마지막 자식 요소를 반환한다.
const el = document.querySelector('.parent')

console.log(el.children)
console.log(el.children[el.children.length - 1])
console.log(el.firstElementChild)
console.log(el.lastElementChild)

[div#c1.child, div.child, div.child, c1: div#c1.child]
<div class="child">체리</div>
<div id="c1" class="child">사과</div>
<div class="child">체리</div>

03. 생성, 조회, 수정

document.createElement (태그이름)

: HTML 요소를 메모리상에 생성해 반환한다.

const divEl = document.createElement('div')
divEl.textContent = 'Hello world!'
divEl.classList.add('box')
console.log(divEl)

const inputEl = document.createElement('input')
inputEl.value = '1234'
inputEl.type = 'password'
console.log(inputEl)

const buttonEl = document.createElement('button')
buttonEl.textContent = '비밀번호 보기'

buttonEl.addEventListener('click', () => {
    inputEl.setAttribute('type', 'text')
})
console.log(buttonEl)


document.body.append(divEl, inputEl, buttonEl)


.prepend / .append / .appendChild

  • 요소.prepend(노드1, 노드2, ...) : 하나 이상의 노드를 요소의 첫번째 자식으로 삽입한다.
  • 요소.append(노드1, 노드2, ...) : 하나 이상의 노드를 요소의 마지막 자식으로 삽입한다.
  • 노드.appendChild(노드1) : 하나의 노드를 노드의 마지막 자식으로 삽입하고 삽입한 노드를 반환한다.
const parentEl = document.querySelector('.parent')

const divEl = document.createElement('div')
divEl.classList.add('box')
divEl.textContent = '새로운 요소!'

const inputEl = document.createElement('input')

const res1 = parentEl.prepend(new Comment(' 새로운 주석! '))
const res2 = parentEl.append(divEl, '새로운 텍스트!')
const res3 = parentEl.appendChild(inputEl).placeholder = '값을 입력하세요!'

console.log(res1, res2)
console.log(res3)


.remove()

  • 요소.remove() : 요소를 제거한다.
const el = document.querySelector('.child')
console.log(el)
el.remove()


.contains( )

  • 노드.contains(노드) : 주어진 노드가 대상 노드를 포함한 후손인지 확인한다.
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')

console.log(parentEl.contains(childEl))
console.log(document.body.contains(parentEl))
console.log(document.body.contains(childEl))
console.log(document.body.contains(document.body))
console.log(parentEl.contains(parentEl))

console.log(parentEl.contains(document.body))
console.log(childEl.contains(document.body))

true
true
true
true
true
false
false


.textContent( )

  • 노드.textContent : 노드의 모든 텍스트를 확인(Get)하거나 지정(Set)한다.
// Get
const el = document.querySelector('.child')
console.log(el.textContent)

// Set
el.textContent = '오렌지'
console.log(el.textContent)

사과
오렌지


.innerHTML( )

  • 요소.innerHTML : 요소의 내부 HTML을 확인(Get)하거나 지정(Set)한다.
// Get
const el = document.querySelector('.parent')
console.log(el.innerHTML)

// Set
el.innerHTML = '<div class="child" style="font-size: 50px; color: red;">오렌지</div>'
console.log(el.innerHTML)

    <div id="c1" class="child">사과</div>
    <div class="child">바나나</div>
    <div class="child">체리</div>
    <!-- 주석 2 -->
    텍스트 1
    텍스트 2
// Set
el.textContent = '<div class="child" style="font-size: 50px; color: red;">오렌지</div>'
console.log(el.textContent)


.dataset

  • 요소.dataset : 요소의 data- 속성을 확인(Get)하거나 지정(Set)한다.

✍ 예제1

const el = document.querySelector('.child')
const str = 'Hello world!'
const num = 123
const obj = { a: 1, b: 2}

console.log(el.dataset)   // 객체 데이터

el.dataset.helloWorld = str
el.dataset.number = num
el.dataset.object = JSON.stringify(obj)

console.log(el.dataset)

console.log(el.dataset.helloWorld)
console.log(el.dataset.number)   // 문자 데이터
console.log(JSON.parse(el.dataset.number))  // 숫자 데이터
console.log(el.dataset.object)  // 문자 데이터
console.log(JSON.parse(el.dataset.object))  // 객체 데이터

DOMStringMap {}
DOMStringMap {helloWorld: 'Hello world!', number: '123', object: '{"a":1,"b":2}'}
Hello world!
123
123 // 숫자 데이터
{"a":1,"b":2}
{"a":1,"b":2} // 객체 데이터

✍ 예제2

const users = [
    { name: 'Neo', age: 22 },
    { name: 'Evan', age: 48 },
    {name: 'Lewis', age: 7 }
]

const userEls = users.map( user => {
    const divEl = document.createElement('div')
    divEl.textContent = user.name
    divEl.dataset.age = user.age
    return divEl
})

document.querySelector('.parent').append(...userEls)
// document.querySelector('.parent').append(...[divEl, divEl, divEl])
// document.querySelector('.parent').append(divEl, divEl, divEl)

console.log(Number(document.querySelector('[data-age').dataset.age))


22


.classList

  • 요소.classList : 요소의 class 속성을 제어한다.
  • 요소.classList.add() 값을 추가
  • 요소.classList.remove() 값을 제거
  • 요소.classList.toggle() 값을 토글
  • 요소.classList.contains() 값을 확인
const el = document.querySelector('.child')

el.classList.add('active')
console.log(el.classList.contains('active'))

el.classList.remove('active')
console.log(el.classList.contains('active'))

el.addEventListener('click', () => {
    el.classList.toggle('active')
    console.log(el.classList.contains('active'))
})


.style

  • 요소.style : 요소의 style 속성을 확인(Get)하거나 지정(Set)한다.

✍ 예제1

const el = document.querySelector('.child')

// 개별 지정할 수 있다.
el.style.width = '100px'
el.style.fontSize = '20px'
el.style.backgroundColor = 'green'
el.style.position = 'absolute'

// 한번에 지정할 수 있다.
Object.assign(el.style, {
  width: '100px',
  fontSize: '20px',
  backgroundColor: 'green',
  position: 'absolute'
})

console.log(el.style)
console.log(el.style.width)
console.log(el.style.fontSize)
console.log(el.style.backgroundColor)
console.log(el.style.position)

✍ 예제2

const el = document.querySelector('.child')
el.style.width = '100px'
el.style.backgroundColor = 'grey'
el.style.transition = '1s'

el.addEventListener('click', () => {
    const box = Number.parseInt(el.style.width, 10)
    el.style.width = `${box + 50}px`
})

사과를 누르면 박스가 옆으로 길어짐


.Attribute

  • 요소.getAttribute(속성) : 요소의 속성을 확인한다.
  • 요소.setAttribute(속성, 값) : 요소의 속성과 값을 지정한다.
  • 요소.hasAttribute(속성) : 요소에 속성이 있는지 확인한다.
  • 요소.removeAttribute(속성) : 요소의 속성을 제거한다.
const el = document.querySelector('.child')

console.log(el.getAttribute('class'))
console.log(el.getAttribute('title'))

el.setAttribute('title', 'hello world')

console.log(el.hasAttribute('class'))
console.log(el.hasAttribute('title'))
console.log(el.hasAttribute('value'))

child
null
true
true
false

profile
메이
프론트엔드 개발자를 꿈꾸는 코린이₊⋆ ☾⋆⁺
다음 포스트

[ JS ] JavaScript EVENT

0개의 댓글