JavaScript DOM - 생성,조회,수정 (2)

 

 

 

 

classList

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'))
})

   - 요소의 class 속성을 제어합니다.

   - contain() 메서드를 사용하여 클래스의 존재 유무를 확인할 수 있습니다.

   - add(), remove() 메서드를 사용하여 클래스를 추가 또는 제거할 수 있습니다.

   - toggle() 메서드를 통해 클래스가 있으면 제거하고, 없으면 추가할 수도 있습니다.

실행결과(이벤트 실행 전)

 

 

 

 

style

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)

   - 요소의 style 속성을 확인(Get)하거나 지정(Set)합니다.

html

콘솔

 

 

 

 

 

속성 확인 - 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'))

el.removeAttribute('class')
el.removeAttribute('title')

   - 속성을 부여(get), 확인(set), 부여(has), 제거(remove)합니다.