[JS] DOM 다루기

스터디/Vanilla JS

밀크티냠냠 2022. 4. 9. 17:45

아무래도 퍼블리싱 하다보면 DOM을 찾고 가져오거나 지우거나 추가하거나 입맛대로 다루어야하는데

그때마다 자주 찾게되서 그런 녀석들 정리! 내가 편하려고!!

document.querySelector('여기에 클래스나 아이디, 앨리먼트를 입력');
document.querySelectorAll('여기에 클래스나 아이디, 앨리먼트를 입력');

querySelectorAll을하면 저 조건의 요소들을 배열로 만드는데.. 한번씩 그사실을 까먹고 하나로 생각하고 작업을 해버려서 왜 찾을수 없다고 하지? 하면서 실수를 한다ㅠ 배열은 하나씩 가져와서 작업해야하는걸 잊지말자ㅠ

부모, 자식, 형제 찾기는 이분글을 보는게 좋더라.. 재밌구ㅋㅋㅋㅋ 이해가 단번에 되어서 좋았다

[Javascript] 부모, 자식, 형제 찾기, 선택하기 (childNodes, parentNode, Sibling)

함수를 통하여 애타게 가족을 찾아다니는 요소들의 코드속 인생을 보면 자바스크립트도 사실은 우리의 인생과 다르지 않다. (?) childNodes 1 2 3 4 5 cs 오늘은 단란한 이 네명의 가정

itun.tistory.com

Element.closest() - Web API | MDN

아래 폴리필은 Element.closest(), 메소드를 지원하지 않는 브라우저를 위한 방법이지만, element.matches() 메소드를 사용하므로 IE 9 이상에서 동작한다.

developer.mozilla.org

보통 getAttribute()나 removeAttribute를 썻는데 dataset으로 찾을 수 있다고해서 찾아본 공식문서. 간략하게만 봐서 다음에 더 자세히 읽었으면 좋겠다

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData

developer.mozilla.org

찾은 엘리먼트 추가, 제거, 수정하기

HTML DOM 엘리먼트 추가와 제거 | 자바스크립트 자습서

HTML DOM 엘리먼트 추가와 제거 자바스크립트에서는 HTML 엘리먼트를 동적으로 추가하거나 제거할 수 있다. 새 HTML 엘리먼트 추가 새 HTML 엘리먼트를 추가하려면 createElement()나 createTextNode() 메서드

codingnuri.com

내가 처음 js 공부할때 정리한 글이긴 한데 정확하고 편해서 자주쓰는 방법

insertAdjacenHTML('추가할 위치','추가할 내용');