프론트/HTML,CSS

25,26,27,28일차 - JS-DOM

따뜻한 개발자 2024. 2. 28. 09:17

JS-DOM (API)

■ 문서 내 객체들을 지정하고 상호작용하기 위한 API이다

Document 내에서 요소를 가져오는 세가지 방법

■ document 객체에 접근해서 태그, 클래스, 아이디 이름으로 요소를 가져오는 방법

■동일하지만 쿼리 셀렉터를 통해 복수개의 요소가 있으면 최상위 요소만 가져온다  (구버젼에서는 에러 발생할 수 있음) 

■ querySelectorALL 은 복수개의 요소들이 담긴 NodeList 로 반환해준다  (구버젼에서는 에러 발생할 수 있음) 

// getElements : 갯수에 상관없이 배열에 담아오겠다는 의미
var elemTags = document.getElementsByTagName('h1');
console.log(elemTags);
var elemClass = document.getElementsByClassName('head2');
console.log(elemClass);
var elemId = document.getElementById('head3');
console.log(elemId);

// 쿼리셀렉터 : css 의 셀렉터를 차용한 방식
// 복수개의 요소가 있을 경우 가장 위에 있는 하나만 가져올 수 있다.
elemTags = document.querySelector('h1');
console.log(elemTags);
elemClass = document.querySelector('.head2');
console.log(elemClass);

// 복수개를 가져올 수 있는 쿼리 셀렉터
elemClass = document.querySelectorAll('.head2');
console.log(elemClass);

요소의 속성을 변경하는 두가지 방법

■ 직접 요소의 속성에 접근하여 값을 변경하는 방법 ( 사용자 정의 속성은 변경하지 못한다 )

■ setAttribute('속성이름', '값') 으로 사용자가 정의한 속성도 변경할 수 있다

 

//input 태그 가져오기
var input = document.getElementsByTagName('input');
//console.log(input[0]);
//input 태그의 모양을 버튼으로 바꿔 보자
input[0].type='button';
input[0].value='버튼';
input[0].setAttribute('속성의 이름', '변경할 값');

Event

■ 벨이 울리면, 손님 테이블로 이동해라

■ 문서 내의 요소에서 이벤트가 발생할 경우 함수가 호출되어 실행된다

■ 이벤트내에서는 특별한 객체들을 사용할 수 있다

요소에 Event 를 등록하는 두가지의 방법

1. <요소>.addEventListener() 로 요소에 직접 추가하기

■ IE08 이하에서는 호환되지 않는다

■ 하나의 요소에 동일한 이벤트를 적용받는 함수를 여러개 만들 수 있다

■ 함수의 이름이 없는 익명 함수로 개발자는 간단하게 기능을 구현할 수 있다

2.<요소 <이벤트 명>="<호출할 함수명>"

this 는 실행 문맥에 따라 바뀐다

■ 일반 함수에서의 this: window(전역 객체), 내부 함수(일반 함수, 메소드, 콜백함수)는 모두 전역객체 바인딩

■ 메소드에서 this: 메소드를 소유한 객체

■ 생성자 함수에서 this는 객체 속성 할당을 위해 사용

■ 명시적 this: 특정 객체에 바인딩이 가능함

Event Listener

■ 특정 요소에 이벤트 조건이 만족하면, 함수가 실행된다

■ 브라우저마다 기능이 지원되지 않을 수 있지만, 많이 사용한다

Window Object

■ 브라우저의 창을 의미하고 창을 열수도 닫을수도 있다

■ 새 창을 열면 새 창은 "자식" 기존 창은 "부모"가 된다 자식 입장에서는 부모 창은 opener 로 조작할 수 있다

Timing 

■ <담을 변수> = setInterval(실행할 함수, 시간(ms))

- 1초마다 함수를 실행해라(함수를 없애지 않는다면 반복하여 실행한다)

■ <담을 변수> = setTimeOut(실행할 함수, 시간(ms))

- 시간만큼 지난 후 함수를 실행해라

■ 담기는 변수안에 저장되는 값은 타이머의 식별자(1,2,3,4,5..)가 저장되어있다 여기서 식별자란 다른 타이머와 구분하고 접근하기 위해 임의로 지정한 일련번호, 주민등록번호와 같은 개념이다

■ 자바스크립트 내장함수에서 타이머를 관리하는 기능이 존재하지 않아, 변수 또는 배열에 넣어서 관리해야한다!!

■ clearInterval(삭제할 함수)

- 함수를 삭제해라, 쓰레드 없애는 것처럼

 

번외 DOM vs BOM

■ BOM란 웹 브라우저의 환경의 객체들을 모아둔 집합, 모델을 말한다

■ 반대로 DOM는 HTML 문서의 구조를 조작하고 내용, 디자인을 변경하는 등의 객체, 구조를 말한다

■ BOM 의 예제

- 새 창 열기, 닫기, 브라우저의 현재 정보, 쿠키, JSON 등

■ DOM의 예제

- 문서 내의 요소 가져오기, 속성 변경 등 

Cookie

◆ 누구나 봐도 상관없는 정보를 저장하고 싶을때 사용한다

JSON

◆ JavaScript Object 표기법, 웹 개발자에게 익숙한 형태인 자바스크립트 오브젝트로 통신합시다 만든게 요겁니다

■ 보안이 강조되는 데이터는 절대로 사용하면 안된다

■ json parser 로 문법검사하자

■ 서버 클라이언트에서 JSON 형태로 주고 받자

// json 을 문자열로 만드는 함수
var txt = JSON.stringify(obj);
console.log(txt);

// 문자열을 json 으로 만드는 함수
var json = JSON.parse(txt);
console.log(json);