모스카토

객체와 DOM과 이벤트 본문

엘리스 ai트랙

객체와 DOM과 이벤트

라리라밤 2022. 1. 25. 11:52
가능성을 확장하고 확장된 것 안에서 사용하면서 기능을 확정할 수 있다.
이해가 안되는 텍스트는 모르는 용어들의 조합일 뿐이다.

 

1. 객체지향과 객체

1. 배열과 객체의 관계

한건 한건의 데이터는   배열  에 담는다.

각 데이터가 여러 속성을 가지고 있어서 이름을 붙이고 싶으면   객체  에 담는다.

1차원데이터 : 배열, 객체 하나

2차원데이터 : 배열안에 객체, 배열안에 배열 등

 

2. 함수와 객체의 관계

이름을 가질 수 있는 1등 시민 - 숫자, 문자열, 배열, 익명함수anonymous function ...

이름을 가질 수 없는 2등 시민 - 조건문, 반복문 ...

1등 시민은 배열, 객체의 요소가 될 수 있다.

데이터와 데이터를 처리하는 함수가 분리되어 있으면 여러 문제가 발생한다. 같은 데이터를 처리하는 함수를 데이터와 같이 담고 싶다.

즉, 서로 연관된 데이터와 함수들을 모아놓은 것이 객체이다.

  함수   : 데이터를 처리하는 방법을 함수라고 하고,

  메소드   : 객체 안에 들어있는 함수를 메소드라고 한다.

ex ) built-in 객체 Math 안에는 구체적인 데이터인 PI와 메소드(데이터 처리방법)인 random()이 있다. 데이터와 함수가 서로 연관돼 있어서 Math라는 같은 상자에 들어 있다.

this : 저, 나와 같은말. 자기가 속해있는 객체나 배열을 의미한다.

 
 

2.  DOM 이란 ?

= Document Object Model 문서 객체 모델

정의는    웹페이지를(document) 객체(object)로 표현(model)해서 객체를 통해 웹페이지를 프로그래밍적으로 조작할수있도록 만든 인터페이스(조작장치)   이다.

문서를 트리구조로 구조화하고 각 요소를 객체화해서  표현한 결과물.

프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 하는 인터페이스.

객체 지향 모델.

* 인터페이스란 : 물리적 연결이나 정보를 통한 연결이다. 자동차로 따지면 자동차와 운전자를 연결해주는 엑셀러레어터나 속도계를 인터페이스라고 할 수 있다. 컴퓨터에서 사용되는 의미는 사용자와 프로그램이 상호작용할 수 있게하는 방법이다. DOM을 통해 html문서(텍스트)를 변경하고 조작할 수 있다.

 

1. DOM의 종류

① HTML DOM : HTML 문서를 조작하는 방법. 모든 HTML요소는 HTML DOM을 통해 접근 할 수 있다.

② XML DOM : XML 문서를 위한 DOM

③ Core DOM

 

2. Document 객체 : 웹페이지를 의미한다.

HTML 요소에 접근할 때 첫 시작객체가 Document 객체이다.

 

3. 선택메소드

document.getElementById()               // id 속성으로 선택 

document.getElementsByClassName()       // class 속성으로 선택

document.getElementsByName()            // name 속성으로 선택

document.querySelectorAll()             // css 선택자로 모두 선택

document.querySelector()                // css 선택자로 선택

querySelector로 선택자를 통해 요소를 선택하는 추세이다.

 

4. 생성메소드

document.createElement()     // HTML 요소를 생성

document.innerHTML()         // HTML 구조로 여러 요소를 생성

document.write()             // HTML 출력 스트립을 통해 텍스트를 출력

 

5. 이벤트 핸들러 추가

요소.onclick = function( ){ }                   // 요소의 onclick 속성에 함수를 준다.

요소.addEventListener( 'click', 실행할 함수 )      // 요소에 click이벤트가 발생했을 경우, 실행할 함수를 준다.

 

3. Node 객체

Node : HTML DOM의 단위

노드트리 : 노드들의 구조, 계층적 관계로 DOM의 트리구조를 말한다.

-> 부모, 자식, 형제 노드 등 계층적 관계를 맺고 있다.

 

 

1. 노드의 종류

문서 노드 : html 문서 전체

요소 노드 : 모든 html 요소, 속성을 가질 수 있다.

속성 노드 : 모든 요소노드의 속성

텍스트 노드 : html 문서의 모든 텍스트

주석 노드

 

2. 노드의 정보 가져오기

document.querySelector('div').nodeName;     // 노드의 이름가져오기 (태그)

document.querySelector('div').nodeValue;    // 노드의 값

document.querySelector('div').nodeType;     // 노드의 타입

노드 타입은 숫자로 표현된다.

  • 요소 (1)
  • 속성 (2)
  • 텍스트 (3)
  • 주석 (8)
  • 문서 (9) 

 

3. DOM element 객체의 hyerarchy 와 상속.

모든 요소 노드(element node / element object)는 위 그림처럼 HTML 객체를 상속받는다. 

따라서 HTML객체에 있는 메소드들은 모두 DOM element 객체(태그들)에서 사용가능하다.

예를들어 .remove() 와 같은 메소드는 HTML 객체의 메소드이지만 모든 element 객체에서 사용할 수 있다.

document.querySelector('ol>li:nth-child(1)>a').remove()

위와 같은 코드가 있으면 자바스크립트는 a 태그의 프로퍼티 중에서 remove를 찾는다.

없으면 부모객체인 HTML객체로 가서 remove 프로퍼티를 찾아 사용한다.

 

 

4. 이벤트

이벤트란 웹브라우저가 알려주는 HTML 요소에 대한 사건의 발생이다.

form, 키보드, 마우스, HTML DOM, Window 객체 등 다양한 곳에서 발생하는 이벤트를 이벤트 종류라고 한다.

브라우저는 이벤트를 감지하여 사용자와 웹페이지가 상호작용 할 수 있게 해준다.

자바스크립트는 이벤트의 발생에 반응하여 다양한 동작을 수행할 수 있다.

event.preventDefault();

이벤트의 발생을 막는 코드이다. 이벤트의 발생 시 기본적으로 실행되는 동작 대신 커스텀 기능을 주고 싶을 때 자주 사용한다.

 

1. 이벤트핸들러를 등록하는 방법

① 자바스크립트 코드에서 .onclick, .onload 등 프로퍼티로 등록하는 방법

window.onload = function() { } // HTML 문서가 로드된 후 실행한다.

-> .html 파일에 자바스크립트를 작성할 때 script태그를 head에 작성해도 동작한다.

inline으로 이벤트핸들러를 등록하면 태그가 만들어진 시점에만 이벤트 핸들러를 추가할 수 있다.

② HTML 태그에 속성으로 등록

<button onclick="this.innerText = '클릭했습니다!'">클릭해 보세요!</button>

 

③ addEventListener 함수로 등록

var btn = document.querySelector('.nav'); 

function show() {
    document.querySelector('.nav').style.backgroundColor = 'blue';
};

btn.addEventListener('click', show);

addEventListener 함수로 이벤트핸들러를 등록하면 언제든 이벤트 핸들러를 추가할 수 있고, 하나의 이벤트에 여러개의 handler를 추가할 수도 있다.

 

5. html 요소 타겟팅하기

  프로퍼티  : 객체에 소속되어 있는 변수들, 데이터, 속성을 프로퍼티라고 한다.

프로퍼티를 변형하는 함수를    메소드  라고 한다. 위에서 설명 했듯이 객체 안의 들어있는 함수를 메소드라고 한다.

html objects의 프로퍼티, 메소드들도 DOM element 이고, DOM에 속한 객체이다.

 

<html>
	<body>
    	<ol>
        	<li>
            	<a href="index.html"></a>
            </li>
        	<li>
            	<a href="index.html"></a>
            </li>
            <li>
            	<a href="index.html"></a>
            </li>
        </ol>
    </body>
</html>

위와 같은 html에서 a태그의 속성 href의 값을 가져오는 방법이다.

 

document.getElementsByTagName('ol')[0].firstChild.nextSibling.firstChild.href

getElementsByTagName을 이용하여 정석적으로 가져오면 굉장히 길다.

document.querySelector('ol>li:nth-child(2)>a').href

querySelector 를 이용하여 선택자( css selector => emmit, javascript등 많은곳에서 사용됨 )로 가져오면 훨씬 쉽다.

위 코드에서 anchor 객체를 querySelector 로 가져오고, .href 를 통해 href라는 프로퍼티에 접근할 수 있다.

 

document.querySelector('[name="title"]').value

name 프로퍼티의 값이 title인 태그의 value 속성의 값을 가져오는 코드이다.

 

document.querySelector('form > p:nth-child(1) >input').value

form 태그의 자식 중 첫번째 자식인 p태그의 자식인 input태그의 value 프로퍼티의 값을 가져오는 코드이다.

 

 

<  기타  >

1. 콜백함수 : 실행주체가 내가 아니라 등록된함수를 자바스크립트 엔진이 대신 실행하는 함수!

ex. addEventListener, setTimeout, setInterval...

2. class 프로퍼티 추가하는 방법 : classList.add(' ')

3. document에서 여러개를 가져오는 것은 배열이 아니다. -> map, filter, forEach등 함수를 사용하지 못한다.

 

저작자표시 (새창열림)

'엘리스 ai트랙' 카테고리의 다른 글

sql로 데이터 다루기1  (0) 2022.02.08
리눅스 기초 1  (0) 2022.01.26
자바스크립트 유용한 함수들  (0) 2022.01.21
자바스크립트 기초 2  (0) 2022.01.20
자바스크립트 훑기  (0) 2022.01.19
'엘리스 ai트랙' Related Articles more
Comments