🔥 [UIUX] 0130 JAVASCRIPT Coding, 코딩 초급~고급 16

You_Jin.·2025년 1월 30일

✏️ 2025. 1월 30일 / javascript 초급~고급 16

👻 DOM을 이용한 이벤트 처리
HTML 요소에 이벤트 핸들러를 연결해놓으면 태그 속성과 자바스크립트 소스가 섞이게 됩니다.
그래서 자바스크립트를 수정하려면 HTML 태그와 속성을 하나씩 찾아보아야 합니다.
하지만 DOM을 이용하여 이벤트 핸들러를 처리하면
태그와 자바스크립트 소스가 분리되면서 보기 좋게 사용할 수 있습니다.
앞에서 배운 이벤트 처리 방법은 HTML이 주인이 되어 자바스크립트의 함수를 불러와 실행했습니다.
하지만 DOM을 사용하면 자바스크립트가 주인이 되어 HTML요소를 가져와 이벤트 핸들러를 연결합니다.
    [기본형]
    <script>
    HTML웹요소.on이벤트명 = 함수명; => ⭐ 소괄호를 붙이지 않습니다.
    </script>

👻 DOM을 이용한 이벤트 처리로 상세글 페이지 만들어보기!

👻 문서 객체, DOM(Document object model)
웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때
웹 문서 전체 또는 일부분이 동적으로 반응하게 하기 위해서 입니다.
이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 합니다.
DOM(문서객체)는 HTML태그 구조를 하나씩 읽어내려가면서
요소와 요소간의 포함관계를 구조화하여 저장합니다.
이때 하나 하나의 태그 포함관계나 요소를 NODE라고 표현합니다.
이 노드들을 시각화하여 하나로 표현하면 마치 나무 뿌리와 닮았다고 하여 'DOM트리'라고 부릅니다.
문서 객체 모델을 한 마디로 정의하자면
'자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록
객체를 사용해 웹 문서를 체계적으로 정리하는 방법'이라고 말할 수 있습니다.
HTML언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML문서에서 사용하는 XML DOM도 있습니다.
DOM은 웹 문서를 하나의 객체로 정의합니다.
그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의합니다.
예를 들어 웹 문서 전체는 document 객체이고, 안에 있는 이미지는 image 객체입니다.
이처럼 DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리합니다.

⭐ DOM 트리
자바스크립트로 DOM을 조작하려면 실제 웹 문서가 DOM으로 어떻게 표현되는지 알고 있어야 합니다.
DOM트리의 최상위 객체로는 Document가 있고 곧 HTML 문서 전체를 뜻합니다.
이 안에 자손으로 <head>,<body>가 있고 head안에는 meta나 title, link등의 태그가 들어있습니다.
body안에는 header와 footer, main, div, section 등등의 태그들이 서로 부모 자식 관계를 갖습니다.
이것을 시각화하여 정리한 것을 'DOM트리'라고 부릅니다.
이렇게 부모와 자식구조로 태그들의 구조를 표현하면 마치 나무형태가 되어 'DOM트리'라고 하고
트리에서 가지가 갈라져 나온 항목을 '노드(node)'라고 합니다.
dom트리의 시작 부분인 html노드를 나무 뿌리에 해당한다고 하여 '루트(root)노드'라고 부릅니다.
루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룹니다.
따라서 각 노드 사이의 관계를 부모와 자식, 형제로 표현할 수 있습니다.
부모노드(parent)에는 자식노드(child)가 있고, 부모노드가 같은 형제노드(sibling)노드가 있습니다.
      ⭐ [DOM을 구성하는 기본 원칙]
      1. 모든 HTML태그는 요소(element)노드 입니다.
      2. HTML태그에서 사용하는 텍스트 내용은 자식노드인 텍스트(text)노드 입니다.
      3. HTML태그의 속성은 자식노드인 속성(attribute)노드 입니다.
      4. 주석은 주석(comment)노드 입니다.

⭐ DOM 요소에 접근하고 속성 가져오기
웹 문서에서 사용한 여러 이미지 가운데 하나만 골라서 크기를 바꾸려면 콕 집어서 가져올 수 있어야 합니다.
이렇게 웹 문서에서 원하는 요소를 찾아가는 것을 '접근한다'라고 표현합니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

You_Jin.

🎧 ᴘʟᴀʏɪɴɢ: UXUI (Feat: coding) ─────────⚪───── 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀ ㅤ ◄◄⠀▐▐⠀►► ───○ 🔊

🔥 [UIUX] 0130 JAVASCRIPT Coding, 코딩 초급~고급 16

✏️ 2025. 1월 30일 / javascript 초급~고급 16

🔥 [UIUX] 0124 JAVASCRIPT Coding, 코딩 초급~고급 15

🔥 [UIUX] 0201 JAVASCRIPT Coding, 코딩 초급~고급 17

0개의 댓글