자바스크립트 DOM 조작 치트시트

Document Object Model(DOM이라고 함)은 개발자가 웹 사이트에 상호 작용을 추가할 수 있는 수단입니다. DOM은 훌륭한 자바스크립트 개발자가 되는 법을 배우는 데 필수적인 부분이므로 오늘은 DOM

전제 조건

이 게시물은 새로 고침을 위한 것이므로 JavaScript의 기본 사항과 DOM이 무엇인지에 대한 기본 지식을 알고 있기를 바랍니다.

요소 만들기

const element = document.createElement('element')
parentElement.appendChild(element)

const div = document.createElement('div')
body.appendChild(div)

const ul = document.createElement('ul')
const li = document.createElement('li')
ul.appendChild(li)

요소 제거

removeChild 또는 remove 메서드를 사용하여 요소를 제거할 수 있습니다.

// with removeChild method
parent.removeChild(child)
// with remove method
child.remove()

ul.removeChild(li)
// or
li.remove()

요소 쿼리

ID가 있는 요소 쿼리

const element = document.getElementById('elementId')

const container = document.getElementById('container')

태그 이름으로 모든 요소 쿼리(태그 이름으로 하나의 요소만 찾는 유사한 방법 없음)

const groupOfElements = document.getElementsByTagName('tag')

const inputs = document.getElementsByTagName('input')

올인원

// query by id
const element = document.querySelector('#elementId')

// query group of elements by id (which ignores the purpose of having a special id)
const elements.querySelectorAll('#elementId')

// query element by class name
const element = document.querySelector('.className')

// query group of elements by class name
const elements = document.querySelectorAll('.className')

요소 수정

요소의 속성 수정

스타일 개체 수정

element.style.fontSize = "18px"
element.style.backgroundColor = "#ffffff"

아이디 수정:

element.id = "myId"

클래스 수정

element.classList.add('myClass')

element.classList.remove('myClass')

텍스트 수정

const element.innerText = "Hello World"

이 작업에는 textContent 속성도 있지만 대신 innerText를 사용하는 것이 좋습니다.

일반적으로 속성 수정

element.setAttribute(attribute, value)

input.setAttribute(name, "myInput")

element.removeAttribute(attribute)

input.removeAttribute('name')

이벤트 리스너

다음은 사용하게 될 인기 있는 이벤트 목록입니다. change , click , submit , keydown ... 및 more

element.addEventListener('event', () => {
// Do something...
}

button.addEventListener('click', () => {
alert('Hello There!')
}

결론

이 글이 도움이 되었다면 남겨주시면 감사하겠습니다 💓