'나홀로스터디'에 해당되는 글 27건
- 2014.12.18 DOM 확장
- 2014.12.15 CSS와 DHTML
- 2014.12.08 DOM
- 2014.11.26 문서 스크립팅
- 2014.11.20 클라이언트 감지
DOM 확장
2014. 12. 18. 18:16 나홀로스터디/JS For Web Dev
이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
- 선택자 API에 대한 이해
- HTML5 DOM 확장 사용
- 브라우저 전용 DOM 확장 사용
DOM은 그 자체로도 매우 잘 정의된 API이긴 하지만 표준 기반 방법이나 특정 브라우저 전용 방법으로 확장하여 기능을 추가할 때도 많다. DOM 확장의 우선적 표준은 선택자 API와 HTML5 두 가지이다.
11.1 선택자 API
자바스크립트 라이브러리에서 가장 인기있는 기능은 CSS 선택자로 패턴을 만들고 그에 맞는 DOM 요소를 선택하는 능력이다. 그 중에서도 jQuery 라이브러리는 getElementById()나 getElementsByTagName()으로 요소에 대한 참조를 얻지 않고 완전히 CSS 선택자에 기초하여 DOM 문서를 쿼리한다.
선택자 API 레벨 1의 핵심은 querySelector()와 querySecectorAll() 메서드이다. 지원하는 브라우저에서는 Document 타입과 Element 타입에서 이 메서드를 사용할 수 있다.
11.1.1 querySelector() 메서드
querySelector() 메서드는 매개변수로 CSS 쿼리를 받고 패턴에 일치하는 첫 번째 자손 요소를 반환하며 일치하는 것이 없다면 null을 반환한다.
var body = document.querySelector('body');
11.1.2 querySelectorAll() 메서드
querySelectorAll() 메서드는 querySelector()와 마찬가지로 CSS 쿼리를 매개변수로 받되 일치하는 노드 전체를 반환한다. 이 메서드는 NodeList의 정적 인스턴스를 반환한다. 다시 말해 반환 값은 NodeList의 프로퍼티와 메서드를 모두 갖지만 접근할 때마다 다시 쿼리하는 것이 아니라 처음 접근했을 때의 상태만 반영한 채 고정된다. 유효한 CSS를 넘겨 querySelector()을 호출하면 NodeList 객체를 반환하며 포함하는 요소 숫자에는 제한이 없다. 일치하는 것이 없다면 빈 NodeList를 반환한다.
11.1.3 matchesSelector() 메서드
선택자 API 레벨2 명세에서는 Element 타입에 matchesSelector()라는 메서드를 정의했다. 이 메서드는 매개변수로 CSS 선택자를 받고 요소가 그에 일치하면 true를 일치하지 않으면 false를 반환한다.
11.2 요소 간 이동
인터넷 익스플로러는 타 브라우저와 달리 요소 사이의 공백을 텍스트 노드로 반환하지 않는다. 이 때문에 childNodes나 firstChild 같은 프로퍼티를 사용할 때 차이가 발생했고 DOM 명세를 유지하면서 브라우저 사이의 차이를 극복하려는 노력으로 요소 간 이동 명세서에서는 새 프로퍼티 그룹을 정의했다.
firstElementChild - 첫 번째 자식 요소를 가리킨다.
lastElementChild - 마지막 자식 요소를 가리킨다.
previousElementSibling - 이전 형제 요소를 가리킨다.
nextElementSibling - 다음 형제 요소를 가리킨다.
11.3 HTML5
HTML5에서 다루는 주제는 매우 방대하며 이 섹션에서는 DOM 노드 전체와 관련있는 부분만 설명한다. HTML5의 다른 부분은 관련된 주제가 등장할 때마다 설명한다.
11.3.1 클래스 관련 추가사항
HTML4 이래 웹에서 가장 많이 바뀐 점이라면 class 속성을 통해 요소의 시맨틱 정보와 스타일 정보를 함께 전달하는 사례가 늘어났다는 점이다.
getElementsByClassName() 메서드
HTML5에서 가장 인기있는 것은 document 객체와 HTML 요소 전체에서 사용 가능한 getElementsByClassName() 메서드이다. getElementsByClassName() 메서드는 클래스 이름 문자열을 매개변수로 받으며 해당 클래스를 모두 가진 요소의 NodeList를 반환하므로 이 메서드는 클래스를 바탕으로 이벤트를 등록하려 할 때 유용하다.
classList 프로퍼티
클래스 이름을 조작할 때는 className 프로퍼티를 이용해 중복여부를 확인하고 클래스 이름을 추가하거나 제거, 교체했다. HTML5에서는 모든 요소에 classList 프로퍼티를 추가하여 클래스 이름을 안전하고 단순하게 조작할 수 있다. clasList 프로퍼티는 DOMTokenList란 새 컬렉션 타입의 인스턴스이다. 다른 DOM 컬렉션과 마찬가지로 DOMTokenList 역시 length 프로퍼티가 있어서 포함된 데이터 개수를 알수 있고 item() 메서드나 대괄호 표기법을 통해 개개의 데이터를 가져올 수 있다.
contains(value) - 주어진 값이 목록에 존재하면 true를 그렇지 않다면 false를 반환한다.
remove(value) - 주어진 문자열 값을 목록에서 제거한다.
toggle(value) - 값이 목록에 존재하면 제거하고 그렇지 않으면 추가한다.
div.classList.remove("user");
div.classList.toggle("user");classList 프로퍼티를 이용하면 요소의 class 속성을 완전히 제거하거나 덮어쓸 때 외에는 className 프로퍼티가 불필요하다.
11.3.2 포커스 관리
HTML5는 DOM에 포커스 관리 기능을 추가했는데 첫번째는 document.activeElement인데 이 프로퍼티는 항상 현재 포커스를 가진 DOM 요소를 가리키는 포인터를 포함한다. 요소는 사용자 입력(일반적으로 탭 키)을 통해 받거나 focus() 메서드로 자동으로 포커스를 받는다.
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); // true
alert(document.hasFocus()); //true
문서를 처음 불러올 떄 document.activeEment는 기본적으로 document.body를 가리키며 문서를 완전히 불러오기 전에는 null이다. document.hasFocus()는 문서에 포커스가 있는지 나타내는 불리언 값을 반환한다.
11.3.3 HTMLDocument의 변화
readyState 프로퍼티
document 객체에서 readyState 프로퍼티를 처음 구현한 브라우저는 인터넷 익스플로러 4였고 HTML5에서 표준화 되었다. document의 readyState 프로퍼티에 가능한 값은 두 가지이다.
complete - 문서를 완전히 불러옴
document.readyState 프로퍼티는 문서를 불러왔는지 확인하는 것으로 이전에는 onload 이벤트 핸들러를 써야했다.
if(document.readyState == "complate"){
}
호환성 모드
선택 렌더링 방법을 도입함에 따라 브라우저에서 페이지를 어떤 모드로 렌더링 중인지 알아보기 위해 인터넷 익스플로러에서는 document에 compatMode라는 프로퍼티를 추가했는데 이 프로퍼티에는 브라우저의 렌더링 모드를 나타내는 역할만 있다. 표준모드는 document.compatMade는 "CSS1Compat"이며 쿽스모드는 document.compatMode는 "BackCompat"이다.
<head> 프로퍼티
HTML5에서는 각각 문서의 <head> 요소와 <body> 요소를 가리키는 document.head, documnet.body 프로퍼티를 도입했다.
var head = document.head || document.getElementsByTagName("head")[0]; 이 코드는 document.head 프로퍼티가 존재하면 해당 프로퍼티를 사용하고 그렇지 않다면 getElementsByTagName() 메서드를 사용한다. 이 프로퍼티를 구현한 브라우저는 크롬과 사파리5이다.
11.3.4 문자셋 프로퍼티
HTML5에서 charset 프로퍼티는 문서의 문자셋을 나타내며 새 문자셋 지정도 가능하다.
defaultCharset 프로퍼티는 브라우저 및 시스템의 기본 설정에 따라 문서에 기본적으로 적용해야 할 문자셋을 나타내는데 이들 프로퍼티는 문서의 문자 인코딩에 대해 여러 가지를 알려주며 이를 컨트롤 할수 있게 한다.
document.charset 프로퍼티는 인터넷 익스플로러와 파이어폭스, 사파리, 오페라, 크롬에서 지원하고 document.defaultCharset 프로퍼티는 인터넷 익스플로러와 사파리, 크롬에서 지원한다.
11.3.5 커스텀 데이터 속성
HTML5 요소에서는 요소의 렌더링에 필요한 정보나 시맨틱 값이 아닌 데이터를 접두사 data-가 붙은 비표준 속성에 제공하도록 한다. 커스텀 데이터 속성을 정의하면 요소의 datasete 프로퍼티를 통해 접근할 수 있다. dataset 프로퍼티는 이름-값 쌍으로 이루어진 DOMStringMap 인스턴스인데 속성이름에서 data- 접두사를 제거한 프로퍼티로 표현된다.
11.3.6 마크업 삽입
DOM 노드를 연달아 만들고 이들을 순서대로 배열하는데 시간을 들이기보다 HTML 문자열로 만들어 삽입하는 편이 훨씬 쉽고 빠르기 때문에 HTML5에서 표준화 되었다.
innerHTML 프로퍼티
innerHTML을 읽기 모드로 사용하면 요소와 주석, 텍스트 노드 등의 자식 노드를 모두 나타내는 HTML 표현을 반환하고 쓰기 모드로 사용하면 주어진 값을 바탕으로 새 DOM 서브트리를 만들어 요소의 자식 노드를 완전히 교체한다.
인터넷 익스플로러와 오페라는 모든 태그를 대문자로 반환하며 사파리와 크롬, 파이어폭스는 공백과 들여쓰기를 포함해 HTML을 문서 그대로 반환한다. innerHTML을 쓰기 모드로 사용하면 주어진 문자열을 DOM 서브트리로 파싱해 이미 존재하는 자식 노드를 모두 교체한다. 주어진 문자열은 HTML로 간주되므로 태그는 모두 브라우저에서 HTML을 처리하는 표준에 따라 요소로 변환된다.
※ innerHTML을 설정하면 브라우저에서 HTML 문자열을 적절한 DOM 트리로 파싱한다. 즉 innerHTML을 설정하고 다시 읽으면 일반적으로 제공한 것과는 다른 문자열이 반환된다. 이는 원래 제공한 HTML 문자열로 DOM 서브트리를 생성한 다음 다시 직렬화한 결과 문자열을 반환하기 때문이다.
<script> 요소에 defer 속성이 있어야 하며 마이크로소프트에서 '스코프 요소'라고 부르는 요소 뒤에 있어야 하는데 인터넷 익스플로러는 innerHTML로 삽입하는 문자열 처음 부분에서 스코프 없는 요소를 모두 제거하므로 innerHTML로 삽입된 <script> 요소는 대부분의 브라우저에서 실행되지 않는다. 이 스크립트가 적절히 동작하게 하려면 닫는 태그 없는 <input> 같은 요소나 텍스트 노드 같은 스코프 요소 뒤에 써야 한다. <col>,<colgroup>,<frameset>,<head>,<html>,<style>,<table>,<tbody>,<thead>,<tfoot>,<tr>은 innerHTML을 지원하지 않는다.
outerHTML 프로퍼티
outerHTML을 읽기 모드에서 호출하면 호출한 HTML 요소를 자식 노드와 함께 반환하고 쓰기 모드에서 outerHTML을 호출하면 주어진 HTML 문자열을 파싱하여 DOM 서브트리를 생성하고 호출한 노드 전체를 교체한다.
insertAdjacentHTML() 메서드
이 베서드는 삽입할 뒤치와 HTML 텍스트 두 가지를 매개변수로 받는데 첫 번째 매개변수는 반드시 다음 값 중 하나여야 한다.
"afterbegin" - 호출한 요소의 첫 번재 자식 요소 바로 앞에 삽입한다.
"beforeend" - 호출한 요소의 마지막 자식 요소 바로 다음에 삽입한다.
"afterend" - 호출한 요소 바로 다음에 삽입한다.
값은 대소문자를 구분하지 않고 두번째 매개변수는 innerHTML/outerHTML과 마찬가지로 HTML문자열로 파싱되며 값을 제대로 파싱할 수 없다면 에러가 발생한다.
메모리와 성능 문제
이 섹션에서 설명한 메서드로 자식 노드를 교체하면 메모리 문제가 생길 수 있는데 인터넷 익스플로러에서 특히 심하다. 요소에 이벤트 핸들러가 등록돼 있거나 프로퍼티에 자바스크립트 객체가 있는 상태에서 해당 핸들러나 프로퍼티를 사용하여 요소를 문서 트리에서 제거한다면 요소와 이벤트 핸들러 사이의 연결이 메모리에 남기 때문에 innerHTML과 outerHTML, insertAdjacentHTML()을 사용할 때는 제거할 요소의 이벤트 핸들러나 자바스크립트 객체 프로퍼티를 모두 제거하길 권한다.
11.3.7 scrollIntoView() 메서드
브라우저들이 페이지 영역에서 스크롤을 구현하는 방법이 제각기 달랐기 때문에 HTML5 명세에 scrollIntoView()이 포함되었다. scrollIntoView() 메서드는 모든 HTML 요소에 존재하며 브라우저 창이나 커너테이너 요소를 스크롤해서 해당 요소가 뷰포트에 보이게 한다. 매개변수로 true를 넘기거나 생략하면 창 전체를 스크롤하여 요소 상단과 뷰포트 상단을 맞추고 그렇지 않다면 요소를 스크롤하여 뷰포트에서 완전히 보이게 하지만 상단을 맞추지는 않는다.
11.4 전용 확장
11.4.1 문서 모드
인터넷 익스플로러8은 '문서 모드'라는 새 개념을 도입했다. 문서 모드에 따라 지원하는 기능이 다르다.
internet Explorer 7 - 페이지를 익스플로러 7 표준 모드로 렌더링한다. 익스플로러 8 이상의 새 기능은 지원하지 않는다.
internet Explorer 8 - 페이지를 익스플로러 8 표준 모드로 렌더링한다. 선택자 API와 CSS2 선택자, CSS3 기능 일부, HTML5 기능 일부를 사용할 수 있다.
internet Explorer 9 - 페이지를 익스플로러 9 표준 모드로 렌더링한다. ECMAScript 5, 완전한 CSS3 지원, HTML5 기능 일부를 지원한다.
HTTP 헤더의 X-UA-Compatible이나 <meta> 태그로 특정 문서 모드를 강제할 수 있다.
<meta http-equiv="X-UA-Compatible" content="IE=EIVertion">
EmulateIE9 - 독타입이 존재하면 문서 모드를 익스플로러 9 표준으로 맞추고 그렇지 않다면 5에 맞춘다.
9 - 문서 모드를 익스플로러 9 표준으로 강제, 독타입은 무시한다.
브라우저는 독타입을 보고 렌더링 모드를 판단하므로 X-UA-Compatible 필드를 반드시 써야 하는것은 아니다. 페이지에 적용된 문서 모드는 document.documentMode 프로퍼티를 통해 확인 가능하다.
11.4.2 children 프로퍼티
인터넷 익스플로러 9 미만 버전과 타 브라우저 사이에는 공백을 텍스트 노드로 취급하는 방법이 다르며 이 차이 때문에 children 프로퍼티가 만들어졌다. children 프로퍼티는 요소의 자식 요소만 포함하는 HTMLCollection이다.
11.4.3 contains() 메서드
contains() 메서드를 사용하면 문서 트리를 순회하지 않고도 주어진 노드가 다른 노드의 자손인지 확인이 가능하다. 이 메서드는 검색을 시작할 조상 노드에서 호출하며 확인해야할 노드를 매개변수로 받는다. 노드 사이의 관계는 DOM 레벨 3 메서드인 compareDocumentPosition()을 통해서도 확인이 가능하다.
11.4.4 마크업 삽입
innerText 프로퍼티
innerText를 읽기 모드로 사용하면 서브트리 순서대로 테스트 노드를 모두 결합한 값을 반환하고 쓰기 모드로 사용하면 자식 요소를 전부 제거한 다음 주어진 값으로 텍스트 노드를 만들어 삽입한다. innerText 값을 설정하면 자식 노드 전체를 제거하여 텍스트 노드 하나만 남으므로 태그 형태의 문자열도 모두 HTML 인코딩하여 텍스트 노드로 만든다. 파이어폭스는 innerText를 지원하지 않지만 textContent라는 프로퍼티를 지원한다.
※ innerText가 반환하는 콘텐츠는 인라인 스타일과 스크립트 블록을 생략하지만 textContent가 반환하는 콘텐츠는 인라인 스타일과 스크립트 코드도 반환한다. 브라우저 사이의 차이를 피하려면 깊이 중첩되지 않은 DOM 서브트리나 인라인 스타일 또는 인라인 스크립트가 존재하지 않는 부분의 텍스트만 읽어야 한다.
outerText 프로퍼티
outerText 프로퍼티는 호출한 노드에도 적용된다는 점을 제외하면 innerText와 똑같이 동작한다. 읽기 모드에서는 outerText와 innerText 사이에 차이가 없지만 쓰기 모드에서 outerText는 호출한 요소의 자식 노드만 교체하는 것이 아니라 자식 노드를 포함한 전체 요소를 교체한다.
11.4.5 스크롤
모든 요소에서 HTMLElement 타입의 확장 형태
scrollByLines(lineCount) - lineCount에 주어진 숫자의 텍스트 줄 높이만큼 요소를 스크롤한다.
scrollByPages(pageCount) - pageCount에 주어진 숫자의 페이지 높이만큼 요소를 스크롤한다.
scrollIntoView()와 scrollIntoViewIfNeeded()는 요소의 컨테이너에서 동닥하고 scrollByLines()와 scrollByPages()는 요소 자체에서 동작한다.
모든 브라우저에서 지원하는 메서드는 scrollIntoView() 하나뿐이므로 일반적으로 이 메서드만 사용한다.
CSS와 DHTML
2014. 12. 15. 17:26 나홀로스터디/JS 완벽가이드
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
16.1 CSS 개요
16.2 DHTML과 CSS
16.3 인라인 스타일 스크립트
16.4 계산된 스타일의 스크립팅
16.5 CSS 클래스 스크립팅
16.6 스타일시트 스크립팅
css와 자바스크립트를 함께 사용하면 때로는 동적인 HTML을 표현할 수 있다.
16.1 CSS 개요
CSS에서 각 스타일은 세미콜론으로 구분된 이름/값 속성 쌍으로 지정된다. CSS 표준에서는 자주 함께 쓰이는 몇 가지 스타일 속성들을 하나로 모아놓은 단축 속성들을 지원한다.
16.1.1 문서 엘리먼트에 스타일 규칙 적용하기
문서 엘리먼트에 스타일 속성을 적용하는 방법에는 여러가지가 있는데 한 가지 방법은 각 HTML 태그의 style 어트리뷰트에 스타일 속성을 써넣는 것이다.
<p style="margin-left:1in; margin-right:1in">
CSS를 사용하는 중요한 목적 중 하나는 문서의 표현에서 내용과 구조를 분리하는 것인데 위와 같이 하면 목적을 달성할 수 없다. 문서 표현에서 구조를 분리해내려면 '스타일시트'를 사용하면 된다. 스타일시트를 사용하면 모든 스타일 정보를 한 군데로 모아서 정리할 수 있다.
또 다른 종류의 스타일시트 규칙으로는 해당 스타일을 적용할 엘리먼트의 '클래스'를 지정하는 선택자를 사용하는 형태가 있다. 마지막으로, 스타일시트에는 id 어트리뷰트로 지정된 개별 엘리먼트에 한해서만 스타일을 적용할 수 있다는 규칙도 있다.
16.1.2 문서에 스타일시트 결합시키기
HTML 문서의 <head> 태그 안에 <style>과 </style> 태그를 만들고 그 사이에 스타일시트를 넣음으로써 HTML 문서와 스타일시트를 합칠 수 있다. 한 웹사이트에 있는 둘 이상의 페이지에서 같은 스타일시트를 사용한다면 스타일시트를 HTML에 넣기보다는 그 자체를 별도의 파일로 저장하여 CSS 파일을 HTML 페이지에 포함시킬수 있다. HTML 페이지에 스타일시트를 포함시키려면 <link> 태그를 사용하면 된다. 또한 <link> 태그를 사용해서 대체 스타일시트를 지정할 수도 있다. CSS @import 지시어를 사용하여 페이지 고유의 스타일시트에 공통 CSS 파일을 포함시킬 수 있다.
16.1.3 Cascade
CSS의 C는 캐스케이딩(cascading)을 의미한다. 이 용어가 가리키는 의미는 문서의 어떤 엘리먼트에 적용되는 스타일 규칙은 다른 위쪽의 단계에서 흘러 내려온 것일 수 있다는 뜻이다.
사용자 스타일시트는 브라우저의 기본 스타일시트보다 우선한다. 문서의 저자 스타일시트가 사용자 스타일시트보다 우선한다. 인라인 스타일은 모든 것보다 우선한다는 규칙이 있다. 예외 규칙으로 사용자 스타일 속성에 !important 변경자가 포함된 값이 있으면 저자 스타일시트보다 우선한다.
16.1.4 CSS 버전
CSS1은 1996년 10월에 채택되었고 색, 폰트, 바깥 여백, 테두리 등을 비롯한 기본 스타일들에 대한 속성을 정의했다. CSS2는 1998년 5월에 정의되었고 엘리먼트가 배치될 위치를 절대적으로(absolute) 지정하는 기능이 있다.
16.2 DHTML과 CSS
DHTML 콘텐츠 개발자들에게 CSS의 가장 즁요한 기능은 보통의 CSS 스타일 속성을 사용하여 문서에 있는 각 엘리먼트의 가시성이나 크기, 정확한 위치를 지정할 수 있다는 것이다.
16.2.1 DHTML의 핵심: 절대적 위치 지정
CSS의 position 속성은 엘리먼트를 배치하는 방법을 지정한다.
static
디폴드 값이며 문서 내용의 기본 흐름을 따라 엘리먼트가 배치되게 한다. 정적(static)으로 배치된 엘리먼트는 DHTML 엘리먼트가 아니기 때문에 top, left 등의 속성으로 위치를 지정할 수 없다.
absolute
이 값으로 설정된 엘리먼트는 자신을 감싸고 있는 컨테이너 엘리먼트를 기준으로 위치가 지정된다. 절대적(absolute)으로 배치된 엘리먼트는 다른 엘리먼트들과 무관하게 독립적으로 배치되며 <body>를 기준삼은 상대적인 위치를 갖는다. 만일 다른 엘리먼트 속에 이 엘리먼트가 중첩되어 있다면 감싼 엘리먼트를 기준삼은 상대적인 위치를 갖는다.
fixed
이 값은 브라우저 창을 기준으로 하여 엘리먼트 위치를 지정할 수 있게 한다. fixed로 배치된 엘리먼트는 항상 보이며(감출 수 없다) 문서를 스크롤해도 따라 움직이지 않는다. 고정적 배치는 대부분의 최신 브라우저에서 지원되지만 특이하게도 IE6만큼은 예외다.
relative
엘리먼트의 position 속성이 relative로 설정되면 이 엘리먼트는 일단 문서의 기본 흐름을 따라 배치된 후 그 위치를 기준으로 상대적인 거리에 배치된다.
16.2.2 CSS 위치 지정 예: 그림자가 깔린 텍스트
text-shadow 속성은 CSS3에서 채택되었으나 아직 구현하지 못하는 브라우저가 있으므로 shadow.js라는 자바스크립트 모듈을 사용하여 표현할 수 있다.
16.2.3 엘리먼트 위치와 크기 알아내기
최신브라우저에서 엘리먼트의 offsetLeft와 offsetTop 프로퍼티는 해당 엘리먼트의 X좌표와 Y좌표를 반환한다. 마찬가지로 offsetWidth와 offsetHeight 프로퍼티는 가로와 세로 길이를 반환한다. 이들 프로퍼티는 읽기 전용이며 픽셀 값을 숫자 타입으로 반환한다.('px' 단위가 붙지 않는다.) 위치가 지정되지 않은 엘리먼트에서 offsetParent는 브라우저마다 다르게 처리된다. 따라서 브라우저에 관계없이 엘리먼트의 위치를 판별하려면 offsetParent가 참조하는 엘리먼트들을 따라서 루프를 돌면서 오프셋 값을 누적시키는 것이다.
function getX(e){
var x = 0; // 0에서 시작한다
while(e){ // 엘리먼트 e에서 시작한다.
x += e,offsetLeft; // 오프셋 값을 더한다.
e = e.offsetParent; // 그리고나서 offsetParnet를 따라 올라간다.
}
return x; // offsetLeft의 총합을 반환한다.
}여기서 반환하는 값은 문서 좌표인데 이 값은 CSS 좌표와 호환되며 브라우저의 스크롤바 위치에 영향을 받지 않는다. 하지만 문서내 overflow 속성이 사용된다면 오프셋을 계산하는데 좀더 복잡한 과정을 사용해야 한다.
16.2.4 제 3의 차원: z-index
z-index 속성은 엘리먼트들을 쌓아 올리는 순서를 지정하며 둘 이상의 엘리먼트들이 겹쳐있을 때 어느 것이 더 위에 위치할 것인지 가리킨다. z-index의 디폴트 값은 0이지만 z-index 속성은 정수값이다. 단, z-index에 의해 지정되는 쌓아 올리기 순서는 오직 서로 형제 관계인 엘리먼트들에게만 적용된다.
16.2.5 엘리먼트 표시(display)와 가시성(visibility)
문서 엘리먼트를 화면에 실제로 보여줄 것인지를 제어하는 두 가지 CSS 속성은 visibility와 display 속성이다. visibility는 속성값이 hidden이면 해당 엘리먼트가 보이지 않고 속성값이 visible이면 해당 엘리먼트가 보인다. 한편 disply 속성은 보다 포괄적이며 해당 항목이 표시되는 방법을 지정하는데 사용되는데 해당 엘리먼트가 블록 엘리먼트인지, 인라인 엘리먼트인지, 리스트 항목인지 등을 지정한다. 그러나 display 속성이 none으로 설정되면 해당 엘리먼트가 표시되지 않음은 물론 배치조자 되지 않는다.
visibility와 display 스타일의 속성의 차이점이라 하면 동적으로 배치된 엘리먼트에 각 스타일을 적용했을때 일어나는 효과가 서로 다르다는 것이다. 문서 구조의 기본 흐름을 따라 배치되는 엘리먼트들(position속성이 static 또는 relative일 때)에 visibility를 hidden으로 설정하면 해당 엘리먼트가 보이지 않을 뿐 할당된 공간은 그대로 남아 있게 된다. 반면 엘리먼트 display 속성을 none으로 설정하면 문서 구조상에 해당 엘리먼트를 위한 공간이 아에 할당되지 않는다. (absolute나 fixed로 지정된 엘리먼트에서는 이 두 속성의 효과가 동일하다.)
16.2.6 CSS 박스 모델과 위치 지정 세부 사항
엘리먼트의 테두리(border)란 해당 엘리먼트 주변(또는 주변의 일부분)에 그려지는 사각형으로 css속성에서 각 테두리마다 스타일을 지정할 수 있다. margin과 padding 속성은 둘다 엘리먼트 주변의 여백을 지정하는 데에 쓰이는데 margin은 엘리먼트 테두리 바깥쪽에 있는 여백을 지정하는 반면 padding은 테두리 안쪽에 있는 여백을 지정한다.
width와 height가 지정하는 크기는 오직 엘리먼트의 내용 영역뿐이다. 안쪽 여백, 테두리, 바깥 여백 등에 필요한 추가 공간은 여기에 포함되지 않는다. 테두리까지 포함하여 엘리먼트가 화면상에서 차지하는 총 면적을 구하려면 엘리먼트의 width 값에 좌우 안쪽 여백과 좌우 테두리 굵기를 더해야 한다.
16.2.6.1 인터넷 익스플로러의 변덕
윈도우용 익스플로러 버전 4부터 5.5는 width와 height 속성을 엘리먼트의 테두리와 안쪽 여백이 포함된다.(하지만 바깥 여백은 포함되지 않는다.) 브라우저는 <!DOCTYPE> 선언이 있으면 엄격한 표준을 따르지만 선언이 없다면 디폴트는 하위 호환을 따르는 방식이 된다
16.2.7 색(color), 투명성(tranceparency), 투명도(translicency)
CSS에는 색을 지정할수 있는 문법이 있는데 색을 구성하는 삼원색인 빨강, 초록, 파랑 성분값을 16진수 숫자로 지정하는 방법이 있다. 만일 엘리먼트의 배경색이나 배경 이미지를 지정하지 않는다면 그 엘리먼트의 배경은 보통 투명하다. 하지만 모든 엘리먼트가 디폴트로 투명한 것은 아니다. 투명도를 지정하려면 CSS3의 opacity 속성을 사용하는데 1은 100% 불투명한 것을(디폴트), 0은 0% 불투명(또는 100% 투명)한 것을 의미한다.
16.2.8 부분적 가시성(partial visibility):overflow와 clip
visibility 속성은 문서 엘리먼트를 완전히 감추고 싶을 때 쓰인다. 한편 overflow와 clip 속성은 엘리먼트의 일부분만을 보이려 할 때 쓸수 있다.
visible(디폴트)
필요에 따라 내용물이 지정된 크기보다 넘쳐서 엘리먼트 박스 밖으로도 그려질 수 있게 허용한다.
hidden
지정된 크기를 초과하는 내용물은 잘려나가서 보이지 않는다. 따라서 크기와 위치 지정 속성에 의해 정의된 영역 밖으로는 내용물이 전혀 그려지지 않는다.
scroll
엘리먼트 박스에 수평, 수직 스크롤바가 추가된다.
auto
내용물이 엘리먼트 크기를 초과할 때에만 스크롤바가 표시된다.
16.3 인라인 스타일 스크립트
자바스크립트 객체에는 CSS1과 CSS2 스타일 속성에 해당하는 프로퍼티가 있다. 이들 프로퍼티의 값을 설정하는 것은 style 어트리뷰트에서 해당 스타일을 설정하는 것과 동일한 효과를 일으킨다. 이들 프로퍼티를 읽으면 (스타일이 있으면) 그 엘리먼트의 style 어트리뷰트에 설정되어 있는 CSS 속성 값을 읽을 수 있는데 중요한 점은 엘리먼트의 style 프로퍼티로 얻어지는 CSS2Properties 객체에는 오직 해당 엘리먼트의 인라인 스타일만 지정되어 있다는 것이다.
16.3.1 명명 규칙: 자바스크립트의 CSS 속성들
CSS 속성 중에는 이름 중간에 하이픈(-)이 들어가는 경우가 많다. 하지만 자바스크리비트에서 하이픈은 마이너스 기호로 해석되기 때문에 CSS2Properties 객체의 프로퍼티 이름들은 원래의 CSS 속성 이름들과 약간 다르다. CSS2Properties 프로퍼티 이름을 만들때는 하이픈을 제거하는 대신 하이픈 직후의 문자를 대문자로 바꾼다.
자바를 비롯한 몇몇 언어에서 'float'이라는 단어가 키워드로 지정되어 있으므로 CSS2Properties 객체는 CSS의 float 속성에 대응하는 프로퍼티 이름에 float 를 사용할 수 없다. 자바스크립트에서는 이 문제에 대한 해결책으로 float 속성 이름 앞에 'css'라는 접두사를 붙여 cssfloat이라는 프로퍼티를 사용할 수 있게 하였다.
16.3.2 스타일 프로퍼티를 사용하여 작업하기
CSS2Properties 객체의 스타일 프로퍼티를 사용하여 작업할 때엔 모든 값을 문자열로 지정해야 한다. 엘리먼트에 대해 자바스크립트로 수행하려면 모든 값을 따옴표로 감싸야만 한다. 또 하나, 모든 위치 지정 프로퍼티에는 단위를 필수적으로 명시해야 함을 유의하라.
HTMLElement의 style 프로퍼티에서 CSS2 Properties 객체를 얻어낼 경우 이 객체의 프로퍼티가 나타내는 것은 해당 엘리먼트의 인라인 스타일 속성 값이다. 바꿔말하면 이들 프로퍼티 중 하나를 설정한다는 것은 곧 그 엘리먼트의 style 어트리뷰트에 지정된 CSS 속성을 설정하는 것이 된다. 이 설정은 오직 그 하나의 엘리먼트에만 영향을 미치며 CSS 계층 구조에서 전파되는 모든 스타일 설정보다 이 인라인 속성이 우선한다.
16.3.3 예: CSS 툴팁
첫째, 스타일시트에는 툴팁의 그림자, 배경색, 테두리 그리고 폰트가 지정되어 있다.
둘째, Tooltip() 생성자에서 툴팁 <div> 엘리먼트가 생성될 때 position:absolute 등과 같은 속성이 인라인 스타일로 지정된다.
셋째, top, left, visibility 스타일은 Tooltip.show() 메서드에 의해 툴팁이 표시될 때 지정된다.
16.3.4 DHTML 애니메이션
움직이는 애니메이션 효과를 주려면 구현하려는 이미지의 style.left 프로퍼티를 반복적으로 증가시켜 원하는 위치에 도달시키면 된다. 다른 방법으로는 style.clip 프로퍼티를 반복적으로 변경함으로써 이미지의 보이는 부분을 픽셀 단위로 증가시킬 수도 있따. 모든 DHTML 애니메이션에는 setInterval()이나 setTimeout() 함수가 필요할 것이다.
16.4 계산된 스타일의 스크립팅
자바스크립트에서 HTML 엘리먼트의 style 프로퍼티는 HTML의 style 어트리뷰트에 대응한다. 또한 style 프로퍼티의 값으로 얻어지는 CSS2Properties 객체에는 오직 해당 엘리먼트의 인라인 스타일 정보만 저장되어 있다.
경우에 따라 어떤 엘리먼트에 적용된 모든 스타일을 정확히 알고 싶을 때가 있는데 W3C 표준에 따르면 어떤 엘리먼트의 계산된 스타일을 얻어내는 API Window 객체의 getComputedStyle() 메서드다. 이 메서드의 첫째 전달인자는 계산된 스타일을 얻어내려는 대상 엘리먼트이고 둘째 전달인자는 스타일을 얻어내려는 ":before"나 ":after" 같은 CSS 모조 엘리먼트다. getComputedStyle() 의 반환값은 CSS2Properties 객체이며 이 객테는 지정된 엘리먼트(또는 모조 엘리먼트)에 적용된 모든 스타일을 표현하고 읽기 전용이다.
IE는 getComputedStyle() 메서드를 지원하지 않지만 모든 HTML 엘리먼트에는 currentStyle 프로퍼티가 있고 이 프로퍼티가 해당 엘리먼트에 대한 계산된 스타일을 지니고 있다.
16.5 CSS 클래스 스크립팅
이 절에서는 HTML 엘리먼트의 className 프로퍼티를 사용하여 HTML class 어트리뷰트의 값을 스크립팅 하는 방법을 알아보자
16.6 스타일시트 스크립팅
16.6.1 스타일시트 활성화와 비활성화
스타일시트를 활성화 또는 비활성화시키는 스타일시트 스크립팅 기법은 가장 간단하며 호환성과 안정성면에서도 가장 우수하다. HTML DOM 레벨2 표준에는 <link>와 <script> 엘리먼트에 대해 disabled 프로퍼티가 정의되어 있는데 HTML 태그에는 이 프로퍼티에 대응하는 disabled 어트리뷰트 등이 존재하지 않는다. 하지만 자바스크립트에는 읽고 쓸 수 있는 disabled 프로퍼티가 존재한다.
16.6.2 스타일시트 객체와 스타일시트 규칙
문서에 적용되어 있는 스타일시트는 document 객체의 styleSheets[] 배열에 저장되어 있다. 배열의 엘리먼트는 CSSStyleSheet 객체이고 이 객체에는 cssRules[] 배열이 있는데 여기에 스타일시트 규칙들이 포함되어 있다. IE는 cssRules[] 프로퍼티를 지원하지 않지만 그와 동등한 rules 프로퍼티가 있다. cssRules[]또는 rules[] 배열의 엘리먼트는 CSSRules 객체다. W3C 표준에 의하면 CSSRule 객체는 어떤 종류의 CSS 규칙이라도 표현할 수 있는데 여기에는 at-규칙(at-rule)이라 불리는 @import나 @page 지시어도 포함된다.
'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글
| 10장 모듈과 네임스페이스 (0) | 2015.03.31 |
|---|---|
| 쿠키와 클라이언트 측 지속성 (0) | 2014.12.23 |
| 문서 스크립팅 (0) | 2014.11.26 |
| 웹 브라우저와 자바스크립트 (0) | 2014.11.18 |
| 함수 (0) | 2014.10.27 |
DOM
2014. 12. 8. 15:03 나홀로스터디/JS For Web Dev
이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
- DOM을 노드의 계층 구조로 이해
- 다양한 노드타입
- 브라우저들 간의 비호환성을 우회하는 DOM 코딩
문서 객체 모델 DOM은 HTML과 XML 문서에 대한 애플리케이션 프로그래밍 인터페이스(API)다. 넷스케이프와 마이크로소프트에서 초기에 사용하던 동적 HTML을 계승한 DOM은 이제 진정으로 플랫폼과 언어에 독립적인 페이지 표현 및 조작 방법이 되었다.
DOM 레벨 1은 1998년 10월에 W3C 권고가 되었고 기본적인 문서구조와 쿼리 인터페이스를 제공한다.
※ 인터넷 익스플로러8 및 이전 버전에서는 DOM 객체를 COM 객체로 구현했다. 따라서 이들 객체는 네이티브 자바스크립트 객체와는 다른 방식으로 동작한다.
10.1 노드의 계층 구조
HTML과 XML 문서는 모두 DOM을 통해 노드의 계층 구조로 표현 가능하다. 노드 타입에는 여러가지가 있으며 각 노트 타입은 서로 다른 특징, 데이터, 메서드를 가지고 각 노드는 다른 노드와 관계가 있을 수도 있다. 이런 계층 구조를 생성하며 특정 노드에 뿌리(root)를 둔 트리 구조로 표현된다.
문서 요소는 문서의 최상위 요소로 문서 하나에 문서 요소 하나만 존재하며 다른 요소는 모두 이 안에 존재한다. HTML 페이지에서 문서 요소는 항상 <html> 요소이고 XML에서는 미리 지정된 문서 요소가 없으면 어떤 요소든 문서 요소가 될 수 있다.
10.1.1 Node 타입
Node 인터페이스는 자바스크립트에서 Node 타입으로 구현되며 인터넷 익스플로러를 제외한 모든 브라우저에서 Node 타입에 접근할 수 있다. 자바스크립트의 노드 타입은 모두 Node를 상속하므로 모든 노드 타입에서 같은 기본 프로퍼티와 메서드를 공유한다.
모든 노드에는 타입을 나타내는 nodeType 프로퍼티가 있고 노드 타입은 다음 12가지 숫자형 상수 중 하나이다
Node.ELEMENT_NODE(1) Node.ARRTIBUTE_NODE(2) Node.TEXT_NODE(3) Node.CDATA_SECTION_NODE(4) Node.ENTITY_REFERENCE_NODE(5) Node.ENTITY_NODE(6) Node.PROCESSING_INSTRUCTION_NODE(7) Node.COMMENT_NODE(8) Node.DOCUMENT_NODE(9) Node.DOCUMENT_TYPE_NODE(10) Node.DOCUMENT_FRANMENT_NODE(11) Node.NOTATION_NODE(12)
nodeName, nodeValue 프로퍼티
nodeName과 nodeValue 프로퍼티는 해당 노드의 정보를 제공한다. 프로퍼티 값은 노드 타입에 따라 완전히 다르므로 이 값을 사용하기 전에 항상 노트 타입을 테스트하길 권장한다.
if (someNode.nodeType == 1){
value = someNode.nodeName; // 요소의 태그 이름
} 노드가 요소라면 nodeName 값을 변수에 할당한다. 요소의 nodeName은 항상 요소의 태그 이름과 일치하며 nodeValue는 항상 null이다.
노드 사이의 관계
모든 노드는 다른 노드와 관계가 있다. 각 노드에는 childNodes 프로퍼티가 있는데 이 프로퍼티에는 NodeList가 저장된다. NodeList는 배열 비슷한 객체인데 노드를 순서 있는 목록으로 저장하여 위치 기반으로 접근할 수 있다. NodeList에 length 프로퍼티가 있고 저장된 데이터를 대괄호 표기법으로 접근할 수 있긴 하지만 NodeList는 Array의 인스턴스가 아니다. NodeList 객체는 사실 DOM 구조에 대한 쿼리 결과이며 문서가 바뀌면 NodeList 객체에도 자동으로 반영되어 '살아있는' 객체라고 부르기도 한다.
각 노드에는 문서 트리에서 부모를 가리키는 parentNode 프로퍼티가 있고 childNodes 목록의 각 노드는 형제 관계이다. 같은 목록에 있는 노드 사이를 previousSibling 및 nextSibling 프로퍼티로 이동할 수 있다. 그 외에 편리한 메서드로 hasChildNodes()가 있는데 이 메서드는 노드에 자식 노드가 있다면 true를 반환하며 매번 childNodes 목록에서 length를 호출하는 것보다 효과적이다.
ownerDocument 프로퍼티는 전체 문서를 표현하는 문서 노드에 대한 포인터이다.
노드조작
노드 사이의 관계 포인터는 모두 읽기 전용이므로 노드를 조작하는 메서드는 따로 있다. 가장 자주 쓰이는 메서드는 appendChild()인데 이 메서드는 childNodes 목록에 노드를 추가하고 새로 추가한 노드, 부모 노드, childNodes 목록에 포함된 모든 관계 포인터가 업데이트 되면 appendChild()는 새로 추가한 노드를 반환한다.
한 노드를 childNodes 목록 마지막이 아니라 특정 위치로 옮겨야 할 때는 insertBefore() 메서드를 사용한다. insertBefore() 메서드는 삽입할 노드와 기준 노드 두 가지를 매개변수로 받는데 삽입한 노드는 기준 노드의 이전 형제가 되며 이동이 끝나면 메서드는 삽입한 노드를 반환한다. 기준 노드가 null 이라면 insertBefore()는 appendChild()와 똑같이 동작한다.
appendChild()와 insertBefore()는 모두 기존의 노드를 제거하는 일 없이 삽입하기만 하는 반면 replaceChild() 메서드는 기존 노드를 교체한다. replaceChild() 메서드는 매개변수로 삽입할 노드(A)와 교체할 노드(B) 두 개를 받아서 B를 문서 트리에서 제거해 반환하며 B가 있던 자리에 A를 대신 삽입한다. replaceChild()로 노드를 삽입하면 B의 관계 포인터를 모두 A에 복사한다.
노드를 제거할 때는 removeChild() 메서드를 사용한다. 이 메서드는 제거할 노드 하나만 매개변수로 받는데 제거된 노드는 함수 값으로 반환된다.
이들 네가지 메서드는 모두 특정 노드의 자식에서만 동작하므로 parentNode 프로퍼티에 해당하는 부모 노드를 정확히 알아야 한다.
기타 메서드
cloneNode() 메서드는 자신을 호출한 노드의 복제본을 생성한다. cloneNode() 메서드는 매개변수를 하나 받는데 이는 자손 노드까지 복제할지 나타내는 불리언으로 true를 넘기면 자손 노드 전체를 복제하며 false를 넘기면 해당 노드 하나만 복제한다.복제된 노드는 appendChild()나 insertBefore(), replaceChild()를 통해 문서에 추가하기 전에는 트리 안에 존재하지 않는다.
10.1.2 Document 타입
자바스크립트는 문서 노드를 Document 타입으로 표현한다. 브라우저에서 전체 HTML 페이지를 표현하는 문서 객체는 HTMLDocument의 인스턴스이며 HTMLDocument는 Document를 상속한다. document 객체는 window의 프로퍼티이므로 전역에서 접근할 수 있다. Document 노드에는 다음 특징이 있다.
- nodeName은 "#document"이다.
- nodeValue는 null이다
- parentNode는 null이다
- ownerDocument는 null이다
- 자식 노드로 DocumentType(최대 1개) Element(최대 1개), Processing Instruction, Comment를 가질 수 있다.
Document 타입은 HTML 페이지 또는 XML 기반 문서를 표현하며 가장 자주 쓰이는 용도는 document 객체를 통한 HTMLDocument의 인스턴스이다.
Document의 자식 노드
DOM 명세에서는 Document 노드가 자식으로 DocumentType, Element, ProcessingInstruction, Comment를 가질 수 있다고 명시하는데 그중 두 가지 자식 노드에는 단축 표기도 있다. 첫 번째는 documentElement 프로퍼티인데 이는 항상 HTML 페이지의 <html> 요소를 가리킨다. childNodes 목록에는 항상 document 요소가 있지만 documentElement 프로퍼티는 해당 요소에 더 빨리 더 직접적으로 접근한다.
document 객체는 HTMLDocument 의 인스턴스이므로 <body> 요소를 직접적으로 가리키는 body 프로퍼티를 갖는다. 주요 브라우저는 모두 document.documentElement와 document.body를 둘 다 지원한다. Document가 가질 수 있는 또다른 자식 노드는 DocumentType이다. <!DOCTYPE> 태그는 문서의 다른 부분과는 별도의 엔티티로 간주하며 포함된 정보는 doctype 프로퍼티(브라우저에서는 document.doctype)를 통해 접근할 수 있지만 브라우저마다 document.doctype을 달리 지원하므로 유용하게 쓰기 어렵다.
<html> 요소 밖에 있는 주석은 기술적으로는 문서의 자식 노드이지만 브라우저마다 다르게 처리한다.
문서정보
document 객체는 HTMLDocument의 인스턴스이므로 표준 Document 객체에는 현재 불러드린 웹 페이지에 대한 프로퍼티를 갖는다. title 프로퍼티는 브라우저 창 또는 탭의 제목인 <title> 요소 텍스트가 들어 있다. 이 프로퍼티로 현재 페이지 제목을 읽을 수 있고 설정도 가능한데 title 프로퍼티의 값을 바꿔도 <title> 요소는 변함이 없다.
요소 위치
DOM 관련해서 가장 자주 하는 일은 특정 요소나 요소 그룹에 대한 참조를 얻는 일인데 document 객체에는 getElementById()와 getElementsByTagName() 두가지 메서드를 제공한다. getElementById() 메서드는 찾으려는 요소 ID를 매개변수로 받고 해당 요소를 찾아 반환하며 그런 ID 요소가 존재하지 않으면 null을 반환한다.
getElementByTagName() 메서드는 요소의 태그 이름을 매개변수로 받고 해당하는 요소가 담긴 NodeList를 반환한다.
var images = document.getElementByTagName("img"); HTMLCollection 객체는 images 변수에 저장되고 객체에 담긴 요소 숫자는 length 프로퍼티에 저장된다. HTMLCollection 객체에는 namedItem() 메서드도 있는데 이 메서드는 name 속성을 통해 컬렉션 데이터에 대한 참조를 얻는다. HTMLCollection 객체에서는 대괄호 표기법에 숫자형 색인과 문자형 색인을 모두 쓸수 있는데 숫자형 색인을 쓰면 이면에서 item()을 호출하고 문자열 색인을 쓰면 namedItem()을 호출한다.
세번째 메서드는 HTMLDocument 타입에만 정의된 getElementByName()으로 name 속성 값이 주어진 문자열에 일치하는 요소를 반환한다. getElementByTagName()와 마찬가지로 getElementByName() 메서드 역시 HTMLCollection을 반환한다. name() 메서드는 항상 첫 번째 버튼만 가져오는데 name 속성이 모두 같기 때문이다.
특별한 컬렉션
document.form - <form> 요소를 모두 가져온다. document.getElementsByTagName("form")과 같다
document.images - <img> 요소를 모두 가져온다. document.getElementsByTagName("img")와 같다.
document.links - href 속성이 있는 <a> 요소를 모두 가져온다.
문서에 쓰기
웹페이지에 출력을 직접 조작하는 기능을 담당하는 메서드는 write(). writeIn(), open(), close() 네 가지다. write(), writeIn() 메서드는 문자열을 매개변수로 받는데 write()는 넘겨 받은 텍스트를 그대로 추가하고, writeIn()은 줄바꿈 문자(\n)를 마지막에 추가한다.
10.1.3 Element 타입
Element 타입은 XML/HTML 요소를 표현하며 이를 통해 태그 이름이나 자식, 속성 같은 정보에 접근 가능하다.
nodeName은 요소의 태그 이름이다.
nodeValue는 null이다.
parentNode는 Document 또는 Element이다.
자식 노드로 Element나 Text, Comment, ProcessingInstruction, CDATA Section, EntityRefernce를 가질수 있다.
요소의 태그 이름은 nodeName 프로퍼티나 tagName 프로퍼티로 얻을수 있고 두 프로퍼티는 같은 값을 반환하는데 후자가 더 직관적이다.
HTML에서 tagName을 사용하면 태그 이름은 항상 대문자로 반환되므로 element.tagName.toLowerCase()를 사용하는 것이 안전하다
HTML 요소
HTML요소는 모두 HTMLElement 타입을 통해 표현된다. HTMLElement는 Element를 직접적으로 상속하며 몇가지 프로퍼티가 추가되는데 각 프로퍼티는 모든 HTML 요소에서 사용가능한 표준 속성중 하나를 나타낸다.
title - 요소에 대한 추가 정보, 일반적으로 툴팁으로 표현된다.
lang - 요소 콘텐츠의 언어 코드
dir - 언어의 표기 방향
className - 요소의 CSS 클래스인 class 속성을 나타냄, class가 ECMAScript의 예약어이기 때문에 class라고 부르지 못함
각 프로퍼티는 속성 값을 읽는 용도로도, 값을 설정하는 용도로도 사용한다.
속성얻기
속성에 대한 DOM 메서드는 getAttribute(), setAttribute(), removeAttribute() 이다.
getAttribute()에는 속성 이름을 그대로 써야 하고 주어진 속성이 존재하지 않으면 항상 null을 반환한다. getAttribute() 메서드는 HTML 언어에 공식적으로 포함되지 않는 커스텀 속성의 값을 가져오는 데도 쓸 수 있다.
요소 속성은 모두 DOM 요소 객체의 프로퍼티를 통해서도 접근할 수 있다. HTMLElement에 정의된 다섯 가지 프로퍼티는 해당 속성과 직접 연결되며, 그 외에도 브라우저에서 인식하는(커스텀이 아닌) 속성은 모두 객체 프로퍼티로 추가된다.
두번째 속성은 onclick 같은 이벤트 핸들러 속성인데 요소의 onclick 속성은 자바스크립트 코드이며 getAttribute()는 해당 코드 문자열을 반환한다. 반면 onclick 프로퍼티는 이벤트 처리 프로퍼티가 자신에게 할당된 함수에 접근할 수 있기 때문에 자바스크립트 함수를 반환하고 해당 속성이 없을 때는 null을 반환한다.
이런 차이로 개발자들은 DOM을 다룰 때 객체 프로퍼티를 사용하고 getAttribute() 메서드는 주로 커스텀 속성의 값을 가져올 때 사용한다.
속성 설정
getAttribute()의 형제 메서드인 setAttribute()는 속성 이름과 설정할 값 두 가지를 매개변수로 받는다. 속성이 존재하면 setAttribute()는 해당 속성의 값을 교체하며 존재하지 않을 때는 속성을 새로 생성하고 값을 설정한다. setAttribute() 메서드는 HTML 속성과 커스텀 속성을 같은 방식으로 다룬다. 속성은 모두 프로퍼티이므로 프로퍼티에 직접 할당하는 것은 속성 값을 설정하는것과 마찬가지다.
커스텀 프로퍼티를 추가하면 대부분의 브라우저에서 요소 속성이 되지 않지만 인터넷 익스플로러에서는 가능하다.
removeAttribute() 메서드는 속성의 값만 지우는 것이 아니라 요소에서 속성을 완전히 제거한다.
attributes 프로퍼티
Element 타입은 DOM 노드 타입 중에서 attribute 프로퍼티를 갖는 유일한 타입이다. attribute 프로퍼티에는 "살아있는" 컬렉션(NodeList와 비슷한) NamedNodeMap이 저장된다. 요소의 속성은 모두 Attr 노드로 표현되며 각 Attr 노드는 NameNodeMap객체에 저장된다.
removeNamedItem(name) - nodeName 프로퍼티가 name인 노드를 목록에서 제거한다.
setNamedItem(node) - node를 목록에 추가하고 nodeName 프로퍼티에 따라 색인한다
item(pos) - 인덱스가 pos인 노드를 반환한다.
attributes 프로퍼티 안의 각 노드는 nodeName이 속성 이름이며 nodeValue는 속성 값이다.
element.attributes.getNamedItem("id").nodeValueelement.attributes["id"].nodeValue;
removeNamedItem() 메서드는 요소의 removeAttribute() 메서드와 마찬가지로 주어진 이름의 속성을 제거한다.
setNamedItem() 메서드는 속성 노드를 넘겨 요소에 새 속성을 추가하는 메서드인데 속성 메서드보다는 getAttribute(). removeAttribute(), setAttribute() 메서드가 더 많이 쓰인다.
요소 생성
document.ceateElement() 메서드를 통해 새 요소를 생성할 수 있다. 이 메서드는 생성할 요소의 태그 이름 하나만 매개변수로 받는다. createElement() 메서드는 새 요소를 생성하고 ownerDocument 프로퍼티를 설정한다.
인터넷 익스플로러7 및 이전 버전에서 동적으로 요소를 생성할 때 발생하는 문제점은 다음과 같다.
- 동적으로 생성한 <input> 요소는 폼의 reset() 메서드로 리셋되지 않는다.
- 동적으로 생성한 <button> 요소에 타입 속성 "reset"이 있어도 이 버튼은 폼을 리셋하지 못한다.
- 동적으로 생성한 라디오 버튼은 같은 name 속성의 라디오 버튼과 연결되지 않는다.
인터넷 익스플로러7 및 이전 버전의 이런 문제는 createElement()에 완전한 HTML 태그를 넘겨서 해결 가능하다
요소의 자식
요소는 자식 요소나 자손 요소를 가질 수 있으며 그 숫자에는 제한이 없다. 특정 태그 이름의 자식 노드나 자손 요소를 가져올 때는 getElementByTagName() 메서드도 사용한다. 이 메서드를 요소에서 호출하면 document에서 호출한 것과 똑같이 동작하지만 해당 요소에서 검색을 시작한다는 점만 다르며 따라서 자손 요소만 반환한다.
10.1.4 Text 타입
Text 노드는 Text 타입으로 표현된다. 이 노드는 평범한 텍스트가 포함되고 글자 그대로 사용되며 이스케이프된 HTML 문자는 포함할 수 있지만 HTML 코드는 포함할 수 없다.
- nodeName은 "#text"이다.
- nodeValue는 노드에 포함된 텍스트이다
- parentNode는 Element 이다.
- 자식 노드를 가질 수 없다.
Text 노드에 포함된 텍스트는 nodeValue 프로퍼티나 data 프로퍼티로 가져올 수 있으며 두 프로퍼티에는 같은 값이 저장되고 nodeValue나 data 둘 중 하나를 바꾸면 노드에 반영된다.
- deleteData(offset, count) - offset부터 count 만큼 삭제한다.
- insetDate(offset, text) - offset 위치에 text를 삽입한다.
- replaceData(offset, count, text) - offset부터 (offset + count)까지의 텍스트를 text로 교체한다.
- splitText(offset) - offset 위치를 기준으로 텍스트 노드를 둘로 나눈다.
- substringData(offset, count) - offset 위치부터 (offset + count) 까지의 텍스트를 꺼낸다.
이들 메서드 외에도 length 프로퍼티도 지원되며 노드의 글자 개수를 반환한다. 이값은 nodeValue.length나 data.length와 같다.
텍스트 노드 생성
새 텍스트 노드를 생성할 때는 document.createTextNode() 메서드를 사용한다. 이 메서드는 매개변수로 삽입할 텍스트를 받는다. 새 텍스트 노드를 생성하면 ownerDocument 프로퍼티가 설정되지만 문서 트리에 삽입하기 전에는 브라우저 창에 표시되지 않는다. 텍스트 토드를 다른 텍스트 노드의 형제로 추가하면 두 텍스트 노드는 사이의 공백이 없는것으로 표시된다.
텍스트 노드 통일
형제 텍스트 노드를 하나로 합치는 메서드로 normalize()가 있고 Node 타입에 존재하므로 모든 노드에서 사용가능하다. 노드에서 normalize()를 호출하면 자식 노드를 텍스트 노드 하나로 병합하며 합쳐진 텍스트 노드의 nodeValue는 각 텍스트 노드의 nodeValue 프로퍼티를 하나로 합친 값과 같다. 브라우저가 문서를 파싱하면 형제 텍스트 노드는 생성되지 않고 DOM을 조작할 때만 생긴다.
텍스트 노드 분할
Text 타입에는 normalize() 의 반대 역할을 하는 splitText() 메서드가 있다. 이 메서드는 주어진 오프셋을 기준으로 텍스트 노드를 둘로 나눈다. 이 메서드가 반환하는 새 텍스트 노드의 parentNode는 원래 텍스트 노드의 parentNode와 같다. 텍스트 노드 분할은 텍스트 노드에서 데이터를 추출하는 DOM 파싱 테크닉에서 가장 자주 쓰인다.
10.1.5 Comment 타입
주석은 DOM에서 Comment 타입으로 표현된다.
- nodeName은 "#comment"이다.
- nodeValue는 주석 콘텐츠이다
- parentNode는 Document 또는 Element이다.
- 자식 노드는 가질 수 없다.
Commenet 타입은 Text 타입과 같은 원형을 상속하므로 Text 타입에 있는 문자열 메서드를 대부분 갖고 있는데 splitText()는 예외다. 또한 Text 타입과 마찬가지로 nodeValue나 data 프로퍼티로 주석의 콘텐츠를 가져올 수 있다.
10.1.6 CDATASection 타입
CDATA 섹션은 XML 기반 문서 전용이며 CDATASection 타입으로 표현된다. Comment와 마찬가지로 CDATASection 타입 역시 Text 타입과 같은 원형을 상속하므로 splitText()를 제외한 문자열 메서드를 모두 가진다. CDATASection 노드에는 다음 특징이 있다.
- nodeName은 "#cdata-section"이다.
- nodeValue는 CDATA 섹션의 콘텐츠이다.
- parentNode는 Document 또는 Element이다.
- 자식 노드는 가질 수 없다.
CDATA 섹션은 XML 문서에서만 유효하므로 대부분의 브라우저에서 CDATA 섹션을 부정확한 Comment 나 Element 로 잘못 파싱한다.
10.1.7 DocumentType 타입
DocumentType 타입은 자주 쓰이지 않으며 이를 지원하는 웹 브라우저는 파이어폭스와 사파리, 오페라 뿐이다.
- nodeName은 독타입 이름이다.
- nodeValue는 null이다.
- parentNode는 Document이다.
- 자식 노드는 가질 수 없다.
10.1.8 DocumentFragment 타입
DocumentFragment 타입은 마크업에 표현되지 않는 유일한 노드 타입이다. DOM에서는 문서 버퍼를 노드를 가지며 조작할 수 있을 뿐이고 그 외 복잡한 기능은 전부 제거된 "경량화된" 문서로 정의한다.
- nodeName은 "#document-fragment"이다.
- nodeValue는 null이다.
- parentNode는 null이다.
- 자식노드로 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference를 가질수 있다.
문서 버퍼는 document.createDocumentFragment() 메서드로 생성하고 콘텐츠는 appendChild(), insetBefore()로 문서에 추가한다.
10.1.9 Attr 타입
요소의 속성은 DOM에서 Attr 타입으로 표현된다. Attr 타입 생성자와 프로토타입에 접근할 수 있는 브라우저는 인터넷 익스플로러 버전 8 이후 브라우저이고 기술적으로 속성은 요소의 attributes 프로퍼티 안에 존재하는 노드이다.
- nodeName은 속성이름이다.
- nodeValud는 속성 값이다.
- parentNode는 null이다.
- HTML에서는 자식노드를 가질 수 없다.
- XML에서는 자식 노드로 Text, EntityReference를 가질 수 있다.
Attribute 노드를 직접 참조하는 경우는 드물며 개발자들은 보통 getAttribute(), setAttribute(), removeAttribute()를 더 선호한다.
Attr 객체에는 세 가지 프로퍼티가 있는데 name은 속성 이름이며 nodeName과 같다. value는 속성 값이고 nodeValue와 같다. specified는 해당 속성이 코드에 명시되었는지 기본 값인지 나타내는 불리언이다.
새 attribute 노드를 생성할 때는 document.createAttribute()에 속성 이름을 넘겨 호출한다.
10.2 DOM 다루기
10.2.1 동적 스크립트
동적 스크립트에는 외부 파일을 불러오거나 텍스트를 직접 삽입하는 두 가지 방법이 있다. 동적으로 외부 파일을 불러오는 과정은 <scrtipt> 요소를 사용하는 것이고 직접 삽입하는 방법은 인라인 스크립트이다.
10.2.2 동적 스타일
css 스타일을 HTML 페이지에 삽입하는 요소는 두 가지이다. <link> 요소는 외부 CSS 파일을 불러올 때 사용하고 <style> 요소는 인라인 스타일에 사용한다. DOM 코드로 생성하는 link 요소가 제대로 동작하려면 body가 아니라 <head> 요소에 추가해야 한다.
스타일을 정의하는 다른 방법은 <style> 요소로 인라인 CSS 를 사용하는 것이 있는데 인터넷 익스플로러는 <style> 노드를 특별 취급하여 자식 노드에 대한 접근을 허용하지 않기 때문에 styleSheet를 써야한다. 이 프로퍼티에는 cssText라는 프로퍼티가 존재하며 이를 통해 css 코드를 설정할 수 있다.
10.2.3 테이블 조작
<table> 요소는 DOM 코어 메서드로 생성하기 어렵기 때문에 공식화할 수 있게끔 몇가지 프로퍼티와 메서드를 추가했다.
<table> 요소에 추가된 내용
- tBodies - <tbody> 요소의 HTMLCollection이다.
- tBoot - <tfoot> 요소를 가리키는 포인터이다.
- tHead - <thead> 요소를 가리키는 포인터이다.
- rows - 테이블의 모든 행에 대한 HTMLCollection 이다.
- createThead() - <thead> 요소를 생성해 테이블에 삽입하고 그 참조를 반환한다.
- createTFoot() - <tfoot> 요소를 생성해 테이블에 삽입하고 그 참조를 반환한다.
- createCaption() - <caption> 요소를 생성해 테이블에 삽입하고 그 참조를 반환한다.
- deleteTHead() - <thead> 요소를 삭제한다.
- deleteTFoot() - <tfoot> 요소를 삭제한다.
- deleteCaption() - <caption> 요소를 삭제한다.
- deleteRow() - 주어진 위치의 행을 삭제한다.
- insertRow(pos) - rows 컬렉션에서 주어진 위치에 행을 삽입한다.
<tbody> 요소에 추가된 내용
- deleteRow(pos) - 주어진 위치의 행을 삭제한다.
- insertRow(pos) - rows 컬렉션에서 주어진 위치에 행을 삽입하고 그에 대한 참조를 반환한다.
<tr> 요소에 추가된 내용
- deleteCell(pos) - 주어진 위치의 셀을 삭제한다.
- insertCell(pos) - cells 컬렉션의 주어진 위치에 셀을 삽입하고 새 셀에 대한 참조를 반환한다.
10.2.4 노드리스트 사용
NodeList 객체와 이와 관련된 NamedNodeMap, HTMLCollection을 이해하면 DOM을 전체적으로 이해하는데 큰 도움이 된다. 문서 구조가 바뀔 때마다 컬렉션도 업데이트되므로 항상 정확한 정보를 반환한다는 뜻으로 NodeList 객체는 해당 객체에 접근할 때마다 수행되는 쿼리라고 말할수 있다.
문서 스크립팅
2014. 11. 26. 17:05 나홀로스터디/JS 완벽가이드
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
15.1 동적인 문서 내용
15.2 Document의 프로퍼티
15.3 레거시 DOM : Document 객체의 집합
15.4 W3C DOM의 개요
15.5 문서순회
15.6 문서 내 엘리먼트 찾기
15.7 문서 수정하기
15.8 문서에 새로운 내용 추가하기
클라이언트 측 자바스크립트는 정적인 HTML문서를 대화식 웹 애플리케이션으로 만들기 위해 존재한다.
모든 웹 브라우저 창(또는 프레임)은 HTML 문서를 화면에 나타내고 Window 객체는 이 창을 표현하기 위한 객체이며 여기에는 Document 객체를 참조하는 document 프로퍼티가 있다.
Document Object Model(DOM)은 문서를 구성하는 객체에 어떻게 접근할 것인가를 정의하는 API다.
15.1 동적인 문서 내용
Document 객체에 있는 write() 메서드는 두가지 방법으로 사용할 수 있는데 첫 번째 방법은 현재 파싱되고 있는 문서에 HTML을 출력하기 위해 스크립트 안에서 이 메서드를 사용하는 것이다. 하지만 현재 문서에 HTML을 출력하기 위해 write()를 사용하는 것은 이 문서가 파싱되는 동안에만 가능하기 때문에 document.write()를 <script> 태그에 있는 최상위 레벨의 코드 안에서만 호출할 수 있다.
다른 창이나 프레임에 완전히 새로운 문서를 생성하기 위해 (Document 객체의 open()과 close() 메서드와 함께) 이 write() 메서드를 사용할 수 있다. 일반적으로 문서는 이벤트 처리기 안에서 절대 자신에 대해 write()를 호출해서는 안된다.
write() 메서드는 두 개 이상의 전달인자를 받을 수 있다.
Document 객체는 writeIn() 메서드를 지원한다. 이 메서드는 전달인자를 출력한 후 끝에 줄바꿈 문자를 붙여 넣는다는 점만 제외하면 write() 메서드와 동일하다.
15.2 Document의 프로퍼티
bgColor
문서의 배경색이다. 이 프로퍼티는 <body> 태그의 bgcolor(권장하지 않는 프로퍼티) 어트리뷰트다.
cookie
자바스크립트 프로그램이 HTTP 쿠키를 읽거나 쓸 수 있게 해주는 특수한 프로퍼티다.
domain
이 프로퍼티는 같은 인터넷 도메인 안에 있는 서로 신용하는 웹 서버의 웹 페이지들끼리 서로 정보를 주고받을 때 동일 출처 정책을 완화할 수 있게 해준다.
lastModified
문서가 수정된 날자를 저장한 문자열이다.
location
URL 프로퍼티와 동의어인데 지금은 제외되었다.
referrer
웹 브라우저를 현재 페이지로 연결시켜준 링크가 있는 문서의 URL이다.
title
현재 문서의 <title>과 </title> 태그 사이에 있는 텍스트다.
URL
문서가 위치한 주소가 어디인지 나타내는 문자열이다. 이 프로퍼티의 값은 서버 리다이렉트(redirect)가 발생한 경우를 제외하면 Window 객체의 location.href 프로퍼티와 같다.
15.3 레거시 DOM : Document 객체의 집합
배열값을 가지는 Document 객체의 집합 프로퍼티들은 레거시(legacy) DOM의 심장부다.
anchors[]
문서 내의 앵커들을 표현하는 Anchor 객체의 배열이다. (앵커란 문서 내에서 이름이 붙여진 위치, <a>태그에 href 대신 name 어트리뷰트를 적어서 생성한다) Anchor 객체의 name 프로퍼티 값은 태그에 있는 name 어트리뷰트의 값이다.
applets[]
문서 내의 자바 애플릿을 표현하는 Applet 객체의 배열이다.
forms[]
문서 내의 <form> 원소를 표현하는 Form 객체의 배열이다. 각 Form 객체에는 폼 내에 포함되어 있는 폼 원소들을 표현하는 집합 프로퍼티인 elements[ ]가 있다. Form 객체는 폼이 제출되기 전에 onsubmit 이벤트 처리기를 호출한다.
imgaes[]
문서 내의 <img> 원소를 표현하는 Image 객체의 배열이다. Image 객체의 src 프로퍼티는 읽고 쓸수 있는 프로퍼티이고, 어떤 URL을 이 프로퍼티에 할당하면 브라우저가 새로운 이미지를 읽어 들여 화면에 표시한다.
links[]
문서 내의 하이퍼텍스트 링크를 표현하는 Link 객체의 배열이다. 하이퍼텍스트 링크는 <a> 태그와, 경우에 따라서는 클라이언트 측 이미지 맵에 있는 <area> 태그를 통해 생성된다. Link 객체의 href 프로퍼티는 <a> 태그의 href 어트리뷰트에 해당하고 이 어트리뷰트의 값은 링크의 URL이다. 또한 Link 객체는 protocol, hostname, pathname 같은 프로퍼티를 통해 URL의 다양한 컴포넌트를 사용할 수 있게 한다.
이 프로퍼티들의 원소 각각은 문서의 소스코드에 나타나는 순서대로 저장된다.
레거시 DOM의 집합에 속하는객체들을 사용해 스크립팅 할 수는 있찌만 이를 사용하여 문서의 구조를 변경할 수는 없다는 사실을 이해하는 것이 중요하다.
15.3.1 Document 객체 이름 짓기
번호로 인덱싱되는 Document 객체의 집합에서 생기는 문제점은 위치 기반의 인덱스가 잘못 사용되기 쉽다는 것이다. 이를 해결하기 위한 안정적인 방법은 문서 내의 중요한 원소에 이름을 부여한 후 이런 원소에 접근할 때는 각 원소에 부여된 이름을 사용하는 것이다.
<form name="f1"><input type="button" value="Push Me"></form>
document.forms[0]; // 문서 내의 위치를 통해 폼을 참조 document.forms.f1; // 프로퍼티로 이름을 통해 폼을 참조 document.forms["f1"] // 배열 인덱스로 이름을 통해 폼을 참조
<form>이나 <img>, <applet>(<a> 태그에는 해당되지 않는다)의 name 어트리뷰트를 설정하는 것은 각각에 해당하는 Form이나 Image, Applet 객체(Link나 Anchor 객체에는 해당되지 않는다)를 Document 객체의 프로퍼티로서 접근할 수 있게 해준다.
document.f1
만약 한 문서에서 두 원소의 name 어트리뷰트 값이 같으면 프로퍼티는 두 원소에 대한 참조를 가지는 배열이 된다. 일반적으로 HTML 폼에서 서로 관련된 라디오 버튼의 이름이나 체크박스의 이름은 같다. 이렇게 하면 이 이름은 라디오 버튼과 체크 박스들을 가지는 Form 객체의 프로퍼티가 되고, 이 프로퍼티의 값은 다양한 라디오 버튼이나 체크 박스 객체들에 대한 참조를 가진 배열이 된다.
15.3.2 Document 객체에 대한 이벤트 처리기
사용자와 정보를 주고받기 위해서는 HTML문서나 이 문서 내의 원소들이 사용자 이벤트에 반응할 수 있어야 한다.
document.links와 같이 객체 집합을 통해 접근되는 Document 객체에는 HTML 태그의 어트리뷰트에 해당하는 프로퍼티가 있다.
HTML에서 이벤트 처리기는 이벤트 처리기 어트리뷰트에 자바스크립트 코드 문자열을 할당하는 작업을 통해 정의된다. 하지만 자바스크립트에서는 이벤트 처리기 프로퍼티에 함수를 할당하는 작업을 통해 이벤트 처리기를 정의한다.
15.4 W3C DOM의 개요
15.4.1 문서를 트리로 표현
HTML 문서의 중첩된 태그는 DOM에서 트리로 표현되는 계층적 구조이다. HTML 문서의 트리 표현은 <body>와 <p> 같은 HTML 태그와 원소를 나타내는 노드, 텍스트의 문자열을 표현하는 노드를 가진다.
15.4.2 노드
Node 인터페이스에는 트리를 순회하거나 조작하기 위한 프로퍼티와 메서드가 정의되어 있다. Node 객체의 childeNodes 프로퍼티는 자기 자식들의 목록을 반환하고 firstChild와 lastChild, nextSibling, previousSibling, parentNode는 노드로 구성된 트리를 순회하기 위한 수단을 제공한다. appendChild()와 removeChild(), replaceChilde(), insertBefore() 같은 메서드는 여러분이 문서 트리에 노드를 삽입하거나 제거할 수 있게 해준다.
15.4.2.1 노드의 타입
문서를 나타내는 트리의 여러 노드는 각 노드의 특정한 하위 인터페이스를 통해 표현된다. 모든 Node 객체에는 노드가 어떤 타입에 속하는지를 나타내는 nodeType 프로퍼티가 정의되어 있다. DOM 트리의 최상위에 있는 노드는 Document 객체다. 이 객체의 documentElement 프로퍼티는 문서의 최상위 원소를 표현하는 Element 객체를 참조하는데 HTML 문서에서는 문서 내에 명시적이거나 비명시적으로 적혀있는 <html> 태그가 이에 해당한다.
DOM 트리에는 Document 원소가 단 한개만 존재한다. 트리 내의 대다수 노드들은 <html> 이나 <i> 같은 태그를 표현하는 Element 객체와 텍스트의 문자열을 표현하는 Text 객체다. 문서를 분석하는 파서가 문서에 있는 주석을 유지하고 있다면 이 주석은 Comment 객체를 통해 DOM 트리상에 표현된다.
15.4.2.2 어트리뷰트
Element 인터페이스에 있는 getAttribute()와 setAttribute(), removeAttribute() 메서드를 사용하여 원소의 어트리뷰트 값을 읽거나 설정, 삭제할수 있다. HTML 태그의 표준 어트리뷰트는 각 태그를 표현하는 Element 객체의 프로퍼티로도 존재한다.
어트리뷰트를 사용하여 작업을 하는 다른 방법은 어트리뷰트와 그 값을 표현하는 Attr 객체를 반환해주는 getAttributeNode() 라는 메서드를 사용하는 것이다. (이 방법을 사용하는 이유는 Attr 인터페이스에 어트리뷰트의 값이 문서상에 리터럴로 기술되어 있는지 혹은 기본값인지 판단할 수 있게 해주는 specified라는 프로퍼티가 정의되어 있기 때문이다.)
하지만 Attr 객체는 원소의 childNodes[] 배열에는 나타나지 않고 Element나 Text 노드처럼 문서 트리 상에 직접 나타나는 것도 아니라는 사실을 유의하라.
15.4.3 DOM HTML API
DOM 표준은 XML이나 HTML과 함께 사용하려는 목적으로 만들어졌다.
HTMLDocument 인터페이스에는 W3C 표준화이전에 만들어진 브라우저들이 지원했던 다양한 프로퍼티와 메서드가 정의되어 있고 id와 style, title, lang, dir, className 프로퍼티가 정의되어 있다. ('class'는 자바스크립트의 예약어이기 때문에 HTML의 class 어트리뷰트가 자바스크립트에서는 className이 되었다.) HTML 태그는 여섯가지 어트리뷰트들 이외에 다른 어트리뷰트는 추가할 수 없다.
DOM 표준은 스크립트 작성자의 편의를 도모하기 위해 HTML 어트리뷰트에 대한 프로퍼티를 정의하고 있다는 점을 유념하라. 어트리뷰트 값을 얻어내거나 설정하는 일반적인 방법은 Element 객체의 getAttribute() 와 setAtrribute() 메서드를 사용하는 것이고 HTML 표준이 아닌 어트리뷰트를 사용하여 작업할 때는 이 메서드를 사용해야 한다.
15.4.3.1 HTML 작명법
HTML은 대소문자를 구분하지 않지만 자바스크립트는 대소문자를 구분한다. HTML에 특화된 인터페이스의 프로퍼티 이름은 소문자로 시작하고 프로퍼티 이름이 여러 개의 단어로 이루어졌다면 두 번째 단어부터는 대문자로 시작한다.
15.4.4 DOM 레벨과 기능
DOM 표준에는 두 가지 버전(혹은 레벨)이 있다.
DOM 레벨 1은 1998년 10월에 표준화 되었고 여기엔 Node와 Element, Attr, Document 같은 코어 DOM 인터페이스들이 정의되어 있고 HTML에 특화된 다양한 인터페이스들도 정의되어 있다. DOM 레벨 2는 2000년 11월에 표준화 되었고 이 DOM은 코어 인터페이스에 몇가지를 수정하는것 외에도 문서 이벤트와 CSS 스타일시트에 대해서 작업할수 있는 추가적인 도구도 제공한다. 그러나 마이크로소프트는 DOM event 모듈을 구현하지 않으며 레거시 DOM, W3C DOM, IE DOM은 서로 다른 방법으로 이벤트를 처리한다.
15.4.5 DOM 인증
현재 브라우저의 수가 너무 많아졌고 표준 지원 범위도 급격하게 빨리 변화하고 있어 이 책에서 어떤 브라우저가 어떤 DOM 기능을 지원하는지 명확한 정보를 알려주기 어렵다. 따라서 웹 브라우저가 DOM을 얼마나 잘 구현하고 있는지 판단하려면 지원 여부를 확인하는 것이 필요하다.
15.4.5.1 인터넷 익스플로러에서 DOM 인증
IE는 Node 인터페이스가 정의하는 node 타입의 상수를 지원하지 않는다. 문서 내의 각 노드에는 자신이 어떤 타입인가를 나타내는 nodeType 이라는 프로퍼티가 있다는 사실을 기억하라.
15.4.6 언어에 독립적인 DOM 인터페이스
이 책은 DOM API의 자바스크립트 구현에 대해 설명하지만 구현의 객체 프로퍼티는 일반적으로 다른 언어에 있는 get/set 메서드의 쌍에 매핑된다. DOM API의 자바스크립트 구현에서 또 다른 중요한 점은 특정 DOM 객체가 자바스크립트 배열처럼 작동한다는 것이다.
DOM 객체에 namedItem() 메서드가 있다면 메서드에 문자열을 전달하는 것은 객체의 배열 인덱스로 문자열을 사용하는 것과 같다. 다음 코드는 모두 폼 원소에 접근하는 동일한 방법이다.
var f = document.forms.namedItem["myform"]; var g = document.forms["myform"]; var h = document.forms.myform;
NodeList의 원소에 접근하기 위해 배열 표현법을 사용할 수는 있지만, NodeList가 단지 배열과 유사한 객체이며 실제 Array는 아니라는 점을 반드시 기억해야 한다. DOM의 구현은 어떤 클래스를 정의하든지 상관이 없지만 다양한 DOM 인터페이스의 메서드와 프로퍼티는 반드시 정의해야 한다.
15.5 문서순회
DOM은 HTML문서를 Node 객체의 트리로 표현한다. 트리구조를 사용하여 가장 많이 이루어지는 작업은 트리의 각 노드를 차례대로 검사하면서 트리를 순회하는 것이다.
15.6 문서 내 엘리먼트 찾기
Document 객체는 모든 DOM 트리의 최상위 노드이지만 트리에 있는 HTML 엘리먼트는 표현하지 않는다. document.documentElement 프로퍼티는 문서의 최상위 엘리먼트인 <html> 태그를 참조하고 document.body 프로퍼티는 <body> 태그를 참조하는데 이 태그는 자신의 부모인 <html> 태그보다 유용하게 사용된다.
특정 타입의 HTML 엘리먼트 목록을 얻기 위해 getElementsByTagName()을 사용할수 있는데 html 태그는 대소문자를 구분하지 않기 때문에 전달되는 문자열도 대소문자가 구분되지 않는다는 점을 명심하라.
getElementByTagName()은 엘리먼트들의 배열을 반환하는 데 반해 getElementById() 메서드는 단지 id 어트리뷰트에 매칭되는 단일 엘리먼트만 반환한다.
HTML 문서의 HTMLDocument 객체에는 getElementByName() 메서드도 정의되어 있는데 이것은 엘리먼트 name 어트리뷰트를 조사하며 name 어트리뷰트는 문서 내에서 유일한 값을 가지지 않을 수도 있기 때문에 엘리먼트들의 배열을 반환한다.
클래스나 태그 이름을 통해 엘리먼트를 선택할 수 있게 해주는 getElements() 메서드에는 주어진 HTML 엘리먼트가 주어진 클래스의 멤버인지 검사하는 isMember() 메서드가 포함되어 있다.
15.7 문서 수정하기
코어 DOM API의 진정한 힘은 자바스크립트를 사용하여 문서를 동적으로 수정할 수 있다는데 있다. Text 노드 내에 있는 텍스트에는 appendData(), inserData(), deletetData(), replaceData() 메서드를 사용하여 텍스트를 덧붙이거나 새 텍스트를 추가할 수 있고 기존 텍스트를 삭제하거나 교체할 수 있다.
15.7.1 어트리뷰트 수정하기
element.setAttribute() 메서드는 텍스트 교체와 부모 바꾸기, 노드 재배열하기를 통해 문서를 수정하는것 외에도 문서의 엘리먼트에 있는 어트리뷰트를 설정하여 문서를 다양하게 변형할 수 있다.
15.7.2 DocumentFragment를 사용하여 작업하기
DocumentFragment는 문서 내에서 실제로 나타나지는 않고 노드의 집합을 저장하고 저장된 노드들의 임시 저장소 역할을 담당한다. 또한 DocumentFragment에 저장된 노드들은 DocumentFragment를 통해 마치 단일 객체인 것처럼 조작할 수 있다. DocumentFragment가 문서에 삽입되면 (Node 객체의 appendChild()나 insertBefore(), replaceChild() 메서드 중 하나를 사용하여) 그때부터는 DocumentFragment는 자신의 노드들로 대체된다.
15.8 문서에 새로운 내용 추가하기
Document.createElemnet()와 Document.createTextNode() 메서드는 새로운 Element와 Text 노드를 생성하고 이렇게 생성한 노드는 Node.appendChild(), Node.insertBefoe(), Node.replaceChild() 메서드로 문서에 추가한다.
15.8.1 노드를 생성할 때 편리하게 사용할 수 있는 메서드
테이블을 생성하기 위해 Element를 생성하고 이것의 어트리뷰트를 설정한 후 Text 노드를 생성하고 이 Text 노드를 Element에 추가하고 이것을 부모 Element에 추가하는 과정은 복잡했다. 이것은 make()라는 함수를 통해 할수 있는데 이 이름으로 Element를 생성하고 이 객체에 대한 어트리뷰트를 설정한 후 자식들을 추가한다.
15.8.2 innerHTML 프로퍼티
HTMLElement 노드의 innerHTML을 W3C에서 공식적으로 DOM의 일부분으로 승인한 적은 없지만 현대의 모든 브라우저가 지원하는 중요하고도 강력한 프로퍼티다. HTML 엘리먼트에 대해 이 프로퍼티 값을 요청했을 때 얻는것은 그 엘리먼트 자식을 표현하는 HTML 텍스트 문자열이다. 대체로 HTML 문서를 HTML 텍스트 문자열로 기술하는 것이 createElement()와 appendChild()의 호출을 나열하는 것보다 훨씬 간편하고 간단하다.
웹 브라우저는 HTML 파싱 능력이 뛰어나다. += 연산자를 사용하여 아주 적은 양의 텍스트를 innerHTML 프로퍼티에 추가하는 것은 직렬화 과정과 파싱 과정을 모두 필요로 하기 때문에 그다지 효율적이지 않다.
15.9 예: 동적으로 생성되는 목차
문서 내에서 사용자가 선택한 텍스트가 무엇인지 알아내는 기능은 표준화가 진행되진 않았지만 현재 모든 브라우저에서 기능을 제공하고 있다. Window와 Document 객체의 getSelection() 메서드가 <input>이나 <textarea> 내에 있다면 선택된 텍스트를 반환하지 않고 브라우저별 호환성 문제가 있다.
'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글
| 쿠키와 클라이언트 측 지속성 (0) | 2014.12.23 |
|---|---|
| CSS와 DHTML (0) | 2014.12.15 |
| 웹 브라우저와 자바스크립트 (0) | 2014.11.18 |
| 함수 (0) | 2014.10.27 |
| 객체와 배열 (0) | 2014.10.20 |
클라이언트 감지
2014. 11. 20. 11:15 나홀로스터디/JS For Web Dev
이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
9.1 기능 탐지 사용
9.2 브라우저 탐지의 역사
9.3 어떤 타입의 탐지를 사용할 것인가
클라이언트 탐지는 웹 개발에서 가장 논란이 많은 주제이지만 개발 전략에서 빼놓을 수 없는 중요 파트이다.
9.1 기능 탐지
클라이언트 탐지 중에서 가장 널리 쓰이는 방법은 '기능탐지'라는 방법인데 이것은 어떤 브라우저를 사용 중인지에는 관심이 없고 어떤 기능이 지원되는지에 주목한다. 기능 탐지에서 매우 중요한 두가지 개념이 있는데 같은 결과를 얻을 수 있는 가장 일반적인 방법을 제일 먼저 테스트해야 한다는 것이고, 두 번째로 중요한 개념은 사용하려는 기능을 정확히 테스트해야 한다는 것이다.
9.1.1 안전한 기능 탐지
기능 탐지는 단순히 원하는 기능이 존재하는지만이 아니라 그 기능이 정확히 동작함을 확힌할 수 있을 때 가장 효과적이다. 함수의 존재여부를 확인하기 위해 typeof 를 써야 하지만 일부 브라우저에서는 정확한 연산자를 반환하지 않을수 있으므로 브라우저와 객체를 가리지 않고 함수의 존재 여부를 확인하려면 isHostMethod() 함수를 써야한다.
// 피터 마이콕스가 개발
function isHostMethod(object, property){ var t = typeof object[property]; return t == 'function' || (!! (t == 'object' && object[property])) || t == 'unknown'; }result = isHostMethod(xhr, "open"); // true result = isHostMethod(xhr, "foo"); // false
9.1.2 기능 탐지는 브라우저 탐지가 아니다
특정 기능이나 기능 집합을 탐지할 때 어떤 브라우저에서 실행 중인지 알 필요는 없다. 애플리케이션에서 특정 브라우저 기능이 필요하다면 기능 탐지를 반복하기보다는 몇가지 기능을 묶어서 브라우저 그룹을 만드는 방법이 적절하다.
9.2 쿽스 탐지
쿽스탐지는 브라우저의 특정 동작방식을 찾아내려는 것이다. 쿽스 탐지는 보통 짧은 코드를 실행하고 기능이 정확히 동작하는지 확인한다. 쿽스 탐지는 코드를 실행해야 하므로 직접적인 영향이 있는 버그만 테스트하고 가능한 스크립트 첫 부분에서 테스트해서 이를 배제하는 편이 좋다.
9.3 브라우저 탐지
브라우저 탐지는 사용자 에이전트 문자열을 통해 어떤 브라우저에서 실행중인지 확인한다. 사용자 에이전트 문자열은 HTTP 요청을 보낼 때마다 받는 응답 헤더에 포함되어 있으며 자바스크립트에서는 navigator.userAgent를 통해 접근한다. 서버에서는 사용자 에이전트 문자열을 보고 어떤 브라우저를 사용 중인지 확인하고 그에 맞게 반응하도록 프로그램 하는 일이 일반적이며 문제도 없지만 브라우저 탐지는 기능 탐지나 쿽스 탐지로 해결되지 않을때만 사용하는 수단으로 여겨진다.
사용자 에이전트 문자열에서 가장 심한 논란거리는 브라우저가 사용자 에이전트 문자열에 잘못된, 또는 착각을 유도하는 정보를 넣어서 서버를 속이는 소위 '위장'의 역사다
9.3.1 역사
명세는 추가적으로 사용자 에이전트 문자열을 토큰/제품 버전의 목록 형태로 만들길 요구하지만 현실에서 사용자 에이언트 문자열은 그리 단순하지 않다
초기 브라우저
첫번째 웹 브라우저인 모자이크는 1993년 NCSA(국립 슈퍼컴퓨터 애플리케이션 센터)에서 만들어졌다. 운영체제와 플랫폼에 따라 매우 다르긴 했지만 모자이크 사용자 에이전트 문자열은 매우 단순해서 다음과 같은 형태였다
Mosaic/0.9
넷스케이프 커뮤니케이션즈에서 웹 브라우저 개발을 처음 시작했을 때 그 코드 네임은 모질라("모자이크 킬러")였다.
Mozilla/Version [Language] (Platform; Encryption)
넷스케이프 내비게이터3과 인터넷 익스플로러3
페이지를 인터넷 익스플로러에서 보면 브라우저를 판단할 수 없어서 페이지가 깨지곤 했으므로 마이크로소프트는 사용자 에이전트 문자열을 넷스케이프 사용자 에이전트 문자열과 호환되게 만들기로 결정했다.
Mozilla/2.0 (compatible; MSIE Version; Operating System)
넷스케이프 커뮤니케이터4와 인터넷 익스플로러 4-8
사용자 에이전트 문자열을 업데이트하여 형식을 자주 바꾼 것은 과거에 사용하던 브라우저 탐지 스크립트와의 호환성을 유지하면서도 새 스크립트에는 다른 정보를 제공하기 위함이다.
게코
게코가 처음 개발되던 당시에는 이후 넷스케이프6이 된 범용 모질라 브라우저의 일부분이었다. 넷스케이프6을 위해 만들어진 명세에는 미래 버전에서 사용자 에이전트 문자열을 어떻게 만들어야 하는지 정의하는 내용이 들어있다.
Mozilla/MozillaVersion (Platform; Encryption; OS-or-CPU; Language; PrereleaseVersion) Gecko/GeckoVertion ApplicationProduct/ApplicationProductVersion
웹킷
애플은 2003년 사파리라는 웹 브라우저를 발표했다. 사파리의 렌더링 엔진은 웹킷인데 웹킷은 리눅스 기반 웹 브라우저인 컨터러의 엔더링 엔진 KHTML에서 분기하면서 시작했고 몇 년이 지난 후 웹킷은 독자적인 오픈 소스 프로젝트가 되었고 렌더링 엔진 개발에 초점을 맞추었다.
사파리는 인기 브라우저와 호환된다고 판단할만한 정보를 사용자 에이전트 문자열에 제공하가 위해 사용자 에이전트 문자열 형식을 만들었고, 모든 웹킷 기반 브라우저는 게코 기반 브라우저와 마찬가지로 자신을 모질라 5.0이라 칭한다.
컨커러
KDE 리눅스 데스크톱 환경에 따라오는 컨커러 브라우저는 오픈 소스 렌더링 엔진인 KHTML을 렌더링 엔진으로 사용한다. 호환성을 위해 컨커러 사용자 에이전트 문자열 형식을 인터넷 익스플로러와 비슷하게 만들기로 정했다.
Mozilla/5.0 (compatible; Konqueror/Version; OS-or-CPU)
크롬
구글의 크롬 웹 브라우저는 렌더링 엔진으로 웹킷을 사용하지만 자바스크립트 엔진은 독자적으로 개발했다. 크롬의 사용자 에이전트 문자열에는 웹킷이 들어가는 모든 정보와 함께 크롬 버전도 포함된다.
오페라
오페라의 기본 자용자 에이전트 문자열은 최신 브라우저 중에서는 가장 논리적이어서 이름과 버전을 정확히 표시한다.
IOS와 안드로이드
모바일 운영체제인 iOS와 안드로이드의 기본 웹 브라우저는 모두 웹킷이므로 데스크톱과 같은 기본 사용자 에이전트 문자열 형식을 공유한다.
사용자 에이전트 문자열을 가지고 특정 브라우저인지 판단하는 것은 대단히 복잡한 문제이다.
렌더링 엔진 식별
렌더링 엔진을 정확히 식별하려면 정확한 순서로 테스트해야 한다. 브라우저의 비일관성 때문에 테스트 순서가 틀리면 부정확한 결과를 얻게 된다.
브라우저 확인
렌더링 엔진만으로 자바스크립트 기능에 대해 알 수 없을때가 있다. 애플의 사파리 브라우저와 구글의 크롬 브라우저는 모두 웹킷 렌더링 앤진을 쓰지만 자바스크립트 엔진은 서로 다르다. 오페라와 인터넷 익스플로러의 경우 browser 객체에 저장된 값은 engine 객체에 저장된 값과 같다.
플랫폼 감지
여러 플랫폼에서 동작하도록 만들어진 브라우저는 플랫폼별로 다른 문제가 있을 수 있다.
렌더링 엔진과는 달리 플랫폼 정보는 일반적으로 매우 제한적이며 운영체제나 버전 정보를 쉽게 얻기는 힘들다.
윈도 운영체제 식별
플랫폼이 윈도일 경우 사용자 에이전트 문자열에서 운영체제 정보를 더 얻을 수 있다. XP 이전의 윈도는 가정용과 비즈니스용 두 가지 버전이 있었는데 가정용 버전은 윈도라고 불렀고 버전은 95, 98, ME가 있다. 비즈니스 버전은 윈도 NT와 윈도2000이 있다. 윈도 XP는 두 버전을 윈도 NT에서 발전한 공통 코드로 통합했다. 윈도 비스타는 윈도 XP를 기반으로 만들어졌다.
모바일 장치 식별
주요 브라우저는 모두 모바일 버전이 있고 다른 장치에서 동작하는 버전도 있으므로 이를 구분할 수 있어야 한다. 모바일 장치 식별의 첫 단계는 모든 모바일 장치가 해당하는 프로퍼티를 추가하는 것이다.
iOS 장치 탐지는 문자열 "iPhone", "iPod", "iPad" 만 검색되므로 정규 표현식을 써서 사용자 에이전트 문자열에 iOS 버전이 들어 있는지 확인한다.
안드로이드 운영체제는 문자열 "안드로이드"를 검색하기만 하면 되고 버전 번호는 바로 뒤에 있다.
노키아 N 시리즈 스마트폰도 웹킷을 이용하고 사용자 에이전트 문자열에 "Safari"가 들어있긴 하지만 실제 사파리 브라우저는 아니다. 이 스마트폰은 사용자 에이전트 문자열 "NokiaN"만 체크해도 된다.
마지막 주요 모바일 장치 플랫폼은 포켓 PC와 스마트폰용 윈도 모바일(이전에는 윈도CE라고 불린)이다. 이 장치들은 윈도 플랫폼에 속하므로 윈도 운영체제와 비슷한 값을 반환한다.
게임 시스템 식별
Wii 브라우저는 오페라 커스텀 버전이므로 Wii는 단순히 문자열 "Wii"를 테스트 하는 것으로 충분하다. 플레이스테이션에서는 정규 표현식을 써서 사용자 에이전트 문자열을 테스트하되 대소문자를 가리지 않게 했다.
브라우저 탐지는 클라이언트 탐지에서 가장 마지막 옵션으로 생각해야 한다. 가능하다면 기능 탐지나 쿽스 탐지를 먼저 시도해야 하고 다음과 같은 상황에 사용하는것이 알맞다.
- 같은 브라우저의 기능이 플랫폼별로 다를 때
- (사용자 통계 등의) 정보 수집 목적으로 정확히 어떤 브라우저인지 알아야 할때
기능탐지 - 특정 브라우저 기능을 사용하기 전에 먼저 테스트하는 이 접근법에서는 개발자가 브라우저 타입이나 버전에 신경 쓰지 않고 단순히 원하는 기능이 존재하는지만 알면된다. 기능탐지로는 특정 브라우저나 버전을 정확히 알수 없다.
브라우저 탐지 - 사용자 에이전트 문자열을 통해 브라우저를 식별한다. 자용자 에이전트 문자열에는 브라우저에 관한 정보가 매우 많은데 브라우저, 플랫폼, 운영체제, 브라우저 버전 등이 이에 속한다. 브라우저 탐지는 어려운 작업이지만 사용자 에이전트 문자열을 통해 모바일장치나 게임 시스템을 포함한 모든 브라우저에서 렌더링 엔진과 플랫폼을 파악할 수 있다.
by 허클베리밋