노드 메소드

노드 생성 메소드
document.createElement(elem);
document.createTextNode(str);

노드 삽입 메소드
node.append(node or str) : 노드 자식 끝에 삽입
node.prepend() : 노드 자식 맨 앞에 삽입
node.before() : 노드 전에 삽입
node.after() : 노드 다음 삽입
node.replaceWith() : node를 새로운 노드나 문자열로 대체
elem.insertAdjacentHTML : (where, html) : HTML 문서를 where에 삽입
elem.insertAdjacentText : Text노드를 where에 삽입
elem.insertAdjacentelement : 요소를 where에 삽입
*where
beforebegin : elem 바로 앞
afterbegin : elem 첫 자식요소 바로 앞
beforeand : elem 마지막 자식요소 바로 다음
afterend : elem 바로 다음

삭제
node.remove()

노드 복제
elem.cloneNode(true) : elem의 속성, 자손 전부가 복사
elem.cloneNode(false) : elem만 복사

클래스 속성 조작
className : 클래스 이름 전체 교체
classList./add(str)/remove(str)/toggle(str)/contains(str)/replace(old,new)  
클래스 value 일부 수정

스타일 메소드

style prop은 없애고 싶을 때 delete가 아닌 빈문자열('')을 할당할 것
ex) elem.style.backgroundColor = ""

스타일을 하나가 아닌 여러개를 바꾸고 싶을 때 style.cssText = `` 속성을 이용
*적용된 스타일 전체를 교체하므로 주의

사이즈 메소드

offsetParent : 가장 가까운 조상 요소 반환
elem.offsetLeft, offsetTop : offsetParent 기준으로 현재 요소가 얼마만큼
떨어져 있는지를 나타내는 값
elem.offsetWidth : margin을 제외한 border까지의 elm 너비
elem.clientWidth : padding까지 측정한 너비
elm.scrollWidth : 스크롤에 가려진 부분까지 포함하여 전체 너비를 측정
clientLeft, clientTop : border 두께 측정
scrollLeft, scrollTop : 스크롤에 가려진 영역의 너비와 높이

스크롤 메소드

scrollTo(x,y) : 왼쪽 상단부 기준으로 좌표값에 해당하는 위치로 이동
scrollBy(x,y) : 현재 위치 기준으로 좌표값으로 이동
elem.scrollIntoView() : elem위치로 스크롤 이동
scrollX === pageXoffset : 수평측으로 스크롤 이동을 얼마나 했는지 측정
scrollY === pageYoffset : 수직측으로 스크롤 이동을 얼마나 했는지 측정

참고

https://ko.javascript.info/