[JS] DOM

Document Object Model (DOM)

- 웹 브라우저가 HTML 코드를 해석하여 구조화해놓는 객체

- document를 통해 HTML의 모든 요소에 접근할 수 있다.

 

document에서 요소를 선택하는 메서드들

- document.getElementById('id')

- document.getElementByClassName('className')

- document.getElementByTagName('tagName')

- document.querySelector('cssSelector')

- document.querySelectorAll('cssSelector')

 

선택한 HTML 요소를 변경하는 방법

- element.innerHTML : 해당 요소의 내부의 내용을 채운다. 태그가 적용되기 때문에 남발하면 보안이 취약해진다.(tag 적용 가능)

- element.innerText : 해당 요소의 내부의 내용을 채운다. (tag 미적용)

- element.attribute : 해당 요소의 속성을 직접 변경

- element.setAttribute() : 메서드로 해당 속성을 변경

- element.addEventListener() : 메서드로 해당 요소에 이벤트를 추가

- element.style.propertyName : 해당 요소의 CSS를 수정

- element.className : 해당 요소의 클래스 속성에 접근