Object Model( BOM< navigator 객체, 창 제어>, DOM< 제어대상 찾기, jQuery, HTMLElement > )
navigator 객체
- 현재 자바스크립크가 실행되고 있는 브라우저의 제품명, 버전을 알 수 있는 객체
크로스 브라우징(cross browsing)
- 브라우저마다 다르게 동작하게 되는 이슈를 크로스 브라우징 이슈라고 한다.
창 제어
- window 객체를 이용해서 창과 창 사이에 제어를 할 수 있다.
- window.open을 이용해서 새 창을 열거나 현재 창에서 브라우저를 열 수 있고
해당 내용은 안에 인자를 주는것을 이용해서 할 수 있다.
( window 객체를 이용해서 다양한 방법으로 창을 제어할 수 있다.. )
DOM( Document Object Model )
- 웹페이지를 자바스크립트로 제어하기 위한 객체 모델
- document 객체를 이용해서 웹페이지에 있는 문서를 제어할 수 있다.
1. 제어 대상 찾기
- document.getElementsByTagName을 이용해서 태그의 이름을 이용해서 제어 대상을 찾거나
document.getElementsByClassName을 이용해서 클래스의 이름을 이용해서 제어 대상을 찾을 수 있다.
( 두 메서드 모두 유사배열 형태의 반환값을 가진다 )
( getElementByTagName() 이용하면 같은 종류의 태그를 제어 할 수 있고
유사배열 형태의 반환값을 가지기 때문에 배열에 접근하는 형식으로 원하는 객체에 접근을 할 수 있다 )
( 위와 같이 배열 형식으로 해당 객체에 접근하고 그걸 어떻게 활용할 수 있는지에 대한 간단한 예시이다.. )
( getElementByClassName()을 이용하면 태그의 종류가 다르더라도 같은 class값을 가지고 있는 태그들을
한번에 제어하는게 가능해진다.. )
- document.getElementById를 이용하면 id값을 이용해서 제어 대상을 찾을 수 있고
여기서 id는 해당 문서에서 단 하나만 존재할수 있는 값으로 중복이 되지 않는다.
( getElementById()를 이용할때 id값은 중복이 불가능하고
중복이 된다해도 단 하나만 제어가 가능하다 )
- document.querySelector이나 document.querySelectorAll을 이용해서
CSS 선택자 방식으로 제어 대상을 찾을 수 있고
All이 붙지 않은 메서드는 맨처음 발견되는 하나에만 적용이 되고 All을 이용하면 모든 부분에 적용이 된다.
( querySelector()를 이용해서 위와 같이 CSS에서 선택자 형식으로 찾으면서
제일 처음에 검색되는 객체를 제어할 수 있다 )
( querySelectorAll()을 이용하면 단하나만 적용되는 querySelector()와 다르게
해당 되는 모든 부분에 적용이 된다 )
jQuery
- 자바스크립트 라이브러리
- 자주 사용하는 로직을 재사용 가능하도록 효율성을 높일수 있다.
jQuery를 이용한 제어대상 찾기
- $()는 jQuery 함수를 의미한다.
( $()안에는 CSS 선택자가 들어온다 )
- $().메소드는 jQuery 함수를 통해 반환된 jQuery 객체의 메소드이다.
( $('')인 jQuery 함수를 이용해서 반환된 jQuery 함수의 객체를 메소드를 통해 제어할 수 있다 )
HTMLElement
- <TagName>.constructor.name을 이용해서 생성된 태그에 대한 객체이름을 알아낼수 있다.
( 단수의 경우 HTML<TagName>Element의 객체 이름을 가지게 되고
복수의 경우 HTMLCollection이라는 이름을 가지게 되는데
이 객체들의 프로퍼티를 이용해서 제어를 할수 있게 되는것이다 )
HTML Collection
( 생성된 태그에 대한 객체이름을 프로그래밍적으로 알아내려면
<TagName>.constructor.name을 이용해서 가져올 수 있다 )
( DOM tree를 보면 전체적인 구조가 조금더 머릿속에 쉽게 정리가 된다.. )
jQuery 객체
- jQuery 함수를 반환한 결과를 말한다.
- 체이닝을 이용해서 해당 jQuery 객체에 대한 연속적인 작업을 처리할 수 있다.
Element 객체
- 엘리먼트(태그)를 추상화한 객체
식별자 API
Element.tagName: 해당 엘리먼트의 태그 이름을 알아내는 프로퍼티 ( 읽기 전용 )
Element.id: id 식별자는 문서에서 단 하나만 등장할 수 있는 식별자이고 값을 읽어올 수 있고 수정 할 수도 있다.
( 프로퍼티를 이용해서 해당 id값을 변경 할 수 있다 )
Element.className: 여러개의 엘리먼트를 그룹핑할때 사용한다.
Element.classList: Element.className에 비해서 사용성이 훨씬 편리하다.
조회 API
Element.getElementById: 해당 Id값에 해당하는 엘리먼트 객체를 가져온다.
Element.getElementsByTagName: 해당 TagName에 해당하는 엘리먼트들을 객체로 가져온다.
Element.getElementsByClassName: 해당 ClassName에 해당하는 엘리먼트들을 객체로 가져온다.
속성 API
Element.getAttribute(name)
Element.setAttribute(name, value)
Element.hasAttribute(name)
Element.removeAttribute(name)
댓글