자바스크립트에서 HTML의 요소에 접근하는 방법은 여러가지가 있습니다.
요소로 접근할 수도 있고, 노드의 개념으로 접근하기도 하는데요.
노드node란 주석, 텍스트, HTML등 모든 것을 포함하는 개념이고, 요소element는 html요소만을 의미합니다.
용어의 차이에 주의하며 사용해야 합니다.
document.getElementById()
HTML 'id' 속성 값을 검색한 요소를 반환합니다.
여러 요소가 검색되면 가장 먼저 찾은 요소를 반환합니다.
검색 결과가 없을시 null을 반환합니다.
document.querySelector()
CSS 선택자로 검색한 요소 하나를 반환합니다.
여러 요소가 검색되면, 가장 먼저 찾은 요소만 반환합니다.
검색 결과가 없으면 null을 반환합니다.
document.querySelectorAll()
CSS 선택자로 검색한 모든 요소를 nodeList로 반환합니다.
nodeList라는 이 객체는 유사배열이고, .forEach()를 사용할 수 있습니다.
.parentElement
노드의 부모 요소를 반환합니다. 다른 함수와 달리 노드에서 접근한다는 점을 주의합니다.
.children
요소의 모든 자식 요소를 반환합니다.
.firstElementChild / .lastElementChild
요소의 첫 번째 자식 혹은 마지막 자식 요소를 반환합니다.
.dataset
요소의 각 data-속성 값을 얻거나 지정합니다.
.id
요소의 id 속성 값을 얻거나 지정합니다.
.className
요소의 class 속성 값을 얻거나 지정합니다.
.classList
요소의 class 속성 값을 제어합니다.
.add(): 새로운 값 추가
.remove(): 기존 값을 제거
.toggle(): 값을 토글
.contains(): 값을 확인
.style
요소의 style 속성의 CSS 속성 값을 얻거나 지정합니다. style이 인라인 스타일일 때만 가능합니다.
인라인 스타일은 적용 우선순위가 높으므로 최대한 이 방식을 지양하는 것이 좋습니다.
window.getComputedStyle()
요소에 적용된 스타일 객체를 반환합니다. .style과는 다르게 인라인 스타일만 가져오는 것이 아닌, 그 요소에 실제로 적용된 CSS내용을 하나의 객체 데이터로 반환합니다.
.getAttribute() / .setAttribute()
요소에서 특정 속성의 값을 얻거나(get) 지정(set)합니다.
const el = document.querySelector('.child)
el.setAttribute(html속성, 실제 지정할 값) //지정
el.getAttribute(html속성) //조회.hasAttribute() / .removeAttribute()
요소에서 특정 속성을 확인하거나 제거합니다.
window.innerWidth / window.innerHeight
현재 화면인 뷰포트의 크기를 얻습니다.
window.scrollX / window.scrollY
페이지의 좌상단 기준, 뷰포트의 수평 또는 수직 스크롤을 얻습니다.
window.scrollTo() / .scrollTo()
지정된 좌표로 대상을 스크롤합니다.
.clientWidth / .clientHeight
border를 제외한 요소의 크기를 얻습니다.
스크롤바도 border처럼 제외됩니다.
.offsetWidth / .offsetHeight
border를 포함한 요소의 크기를 얻습니다.
