생성,조회,수정 2
E.dataset
= 요소의 각 data- 속성 값을 얻거나 지정합니다.
ex)
const el = document.querySelector('.child')
const str = 'Hello World!'
const obj = {a:1, b:2}
el.dataset.helloWorld = str
el.dataset.object = JSON.stringify(obj)
console.log(el.dataset.helloWorld)
console.log(el.dataset.object)
console.log(JSON.parse(el.dataset.object))
E.classList
= 요소의 class 속성 값을 제어합니다.
= .add() : 새로운 값을 추가 / .remove() : 기존 값을 제거
= .toggle() : 값을 토글 / .contains() : 값을 확인
ex)
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'))
})
E.getAttribute() / E.setAttribute()
= 요소에서 특정 속성 값을 얻거나 지정합니다.
ex)
const el = document.querySelector('.child')
el.setAttribute('title', 'Hello World!')
console.log(el.getAttribute('title'))
E.hasAttribute() / E.removeAttribute()
= 요소에서 특정 속성을 확인하거나 제거합니다.
ex)
const el = document.querySelector('.child')
el.setAttribute('title', 'Hello World!')
console.log(el.getAttribute('title'))
