카테고리 없음

DOM

tp134679 2024. 12. 2. 02:02

<목차>

1. window 와 DOM 

2. DOM 의 명령어

3. event 

 

 

window 

모든 객체가 소속된 객체로서 가장 전역에 선언된 최상위 객체 입니다. 사용자가 무슨 정보를 가지고 있던지 윈도우는 최상위 객체로서 모든 값을 제공합니다. 윈도우는 문서를 담당하고 편집하는 DOM과 사용자가 브라우저와 소통하기 위하여 만들어진 BOM 그리고 이를 조작 가능하게 만들어주는 JavaScript가 있습니다.  

 

 

 

 

 

 

 

 

1.DOM 이란

DOM은 Document Object Model 의 약자로서 문서 모델의 객체 라는 뜻을 가집니다. 

문서 객체란 <html>이나 <head> , <body>와 같은 html의 문서의 태그들을 javaScript 가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 합니다. 즉 자바스크립트나. 웹 브라우저에서 html문서를 인식 간섭 가능하고 동적으로 제어하는 것을 뜻합니다. 

DOM 구조

2. DOM 의 명령어 

DOM에서 HTML문서를 선택하는 명령어는 여러 가지가 있는데 기본적으로 접근을 하기 위해서

window.document. 을 기본적으로 사용합니다. css의 직계자식 선택자처럼  window > documant처럼 

윈도우 안에 문서 를 뜻합니다.  이중 window는 최상위 객체 로서 누구라도 포함함으로  생략하여 documant. 만사용해도 무방합니다. 

getElementBy()를 사용하여 엘리먼트에 직접추가를 하는 방식과

querySelector() (질문을 선택) 질문을 선택하는데 누구에게 명령할꺼냐 의 두가지 방식이 주로 사용됩니다. 

 

 

 

getElementBy() By 뒤에 HTML내 에서의 부를 이름을 선언하고 괄호에 작성하면 해당 이름을 js 로가지고와서 사용할 수 있게 됩니다. 

  Element 뒤에 s 를 붙여서 이름이같은 여러가지 테그도 한번에 적용이 가능합니다.

 

 

querySelector() 는 누구에게 명령할꺼야 라고 더 직관적으로 사용하기 편한데 css구조 처럼 (body > div ) 처럼

HTML코드 내에있는 원하는 테그에 쉽게 접근이 가능하기에 getElementBy 보다 주로 사용하게 됩니다.

 

 

DOM에서 많이 쓰는 명령어들 이다. 

 

element.addEventListener . 

엘리언트를 이벤트에 등록했다는 DOM 의 명령어이다.

 

3. event 

자바스크립트 내에서 윈도우 화면 영역에서 click mouseover mouseout 등 특정행동을 취했을때 함수를 호출하며 사용합니다. 

 

 

이벤트를 주고싶을때 객체 뒤에 on(이벤트 명) = (함수) 를 사용하거나 

객체 뒤에 add addEventListener . ('이벤트 속성', '이벤트를 지정할 함수")

를 넣어서 사용합니다.

HTML에 btn이라는 버튼을 만든다.

버튼을 querySelector 로 자바로 불러오고 

함수에 온클릭 (클릭시 발생하는 이벤트) 를 넣어서 이벤트를 적용함