-
DOM 이해하기concept/HTML, CSS, DOM 2020. 10. 9. 22:19
DOM과 자바스크립트의 차이
DOM은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. 자바스크립트가 DOM을 통해서 웹페이지에 접근할 수 있습니다.
웹 페이지는 일종의 문서(document)입니다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공합니다. 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정 가능합니다.
이 차이에 대해서 조금 더 깊게 알아보고 싶다면 해당 문서를 통해서 공부해보시면 좋겠습니다.
부모 엘리먼트를 찾는 방법
Element.closest()
MDN 링크
: 기준 Element 에서부터 closest() 메소드를 통해 자신부터 부모 요소 단위로 출발하여 설정해 준 선택자에 만족할 때까지 탐색합니다. (document 루트까지 이동). 이 중 가장 가깝게 조건에 만족한 부모 엘리먼트가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환합니다.
<!doctype html> <html> <head> <title>codestates</title> </head> <body> <H1>Welcome</H1> <HR> Welcome to codestates! </body> </html>let el = document.querySelector('span'); let parent = el.closest("div"); console.log(parent); // output은 아래와 같습니다. // "<div> // <span> Welcome to Codestates </span> // </div>" let grandparent = el.closest("body"); console.log(grandparent); // output은 body의 전체가 나오게 됩니다.Node.parentElement
MDN 링크
: 현재 엘리먼트의 부모 엘리먼트(object 혹은 null)를 읽기 전용으로 리턴합니다.
<!doctype html> <html> <head> <title>codestates</title> </head> <body> <H1>Welcome</H1> <HR> Welcome to codestates! </body> </html>let parent = document.querySelector('span').parentElement; console.log(parent); // output은 아래와 같습니다. // "<div> // <span> Welcome to Codestates </span> // </div>" let grandparent = parent.parentElement; console.log(grandparent); // output은 body의 전체가 나오게 됩니다. let superGrandparent = document.parentElement; console.log(superGrandparent); // output --> null'concept > HTML, CSS, DOM' 카테고리의 다른 글
styled-components VS emotion 과연 어떤 차이가 있을까? (2) 2023.12.07 scrollHeight, clientHeight, offsetHeight (0) 2022.11.10 DOM 조작하기 (0) 2020.10.11 HTML 기본 틀 (0) 2020.07.01 CSS 질문 정리 (0) 2020.04.08