Diff for "DomScripting" - BioHackersNet

Differences between revisions 7 and 8

[DOM] Scripting. JeremyKeith 저서, 부제 WebDesign with JavaScript and the [DOM], 번역판 제목 DOM 스크립트

주요내용

Node (nodeType)

element (1)
attribute (2)
text (3)

꼭 알아야할 핵심 기본기

단계적 기능 축소 (Graceful degration) : 스크립트를 사용하지 않더라도 동작 가능한 웹문서 만들기
스크립트 분리 (Unobtrusive JavaScript) : 웹 문서 구조에서 동작 분리하기
하위 호환성 (Backwards compatibility) : 구 웹 브라우저에서도 동작 가능하도록 확인하기

위 내용을 준수한 팝업 윈도우 스크립트 (a tag에 class="popup"을 적은 후)

   1 function popUp(winURL) {
   2     window.open(winURL, 'Pop-up window', 'width=320, height=480');
   3     return false;
   4 } 
   5 
   6 window.onload = function() {
   7     if (!document.getElementsByTagName) return false;
   8     var links = document.getElementsByTagName('a');
   9     for (var i=0; i<links.length; i++) {
  10         if (links[i].className == "popup") {
  11             links[i].onclick = function() {
  12                 return popUp(this.getAttribute('href'));
  13             }
  14         }    
  15     }

[DOM] core and HTML-DOM

document.getElementsByTagName("form")
document.forms

element.getAttribute("src")
element.src

element.setAttribute("src", a)
element.src = a

노드 메쏘드들

getElementById
getElementsByTagName
getAttribute
setAttribute
createElement
appendChild
createTextNode
insertBefore (ex, parentElement.insertBefore(newElement, targetElement) )

노드 속성들

nodeValue
firstChild
lastChild
parentNode
nextSibling
style ( style.color, style.fontFamily... )

직접 구현하는 insertAfter

   1 function insertAfter(newElement, targetElement) {
   2     var parent = targetElement.parentNode;
   3     if (parent.lastChild == targetElement) {
   4         parent.appendChild(newElement);
   5     } else {
   6         parent.insertBefore(newElement, targetElement.nextSibling);
   7     }
   8 }

accesskey 사용 (from http://www.clagnut.com/blog/193/ )

1 : Home
2 : 본문으로 바로가기
4 : 검색페이지
9 : 연락처
0 : 접근성 문서

[CSS]와 [DOM]

외부 CSS 파일은 DOM으로 그 정보를 볼 수 없다.
element.className += " intro";

CSS class 추가하기

   1 function addClass(element, value) {
   2     if (!element.className) {
   3         element.className = value;    
   4     } else {
   5     newClassName = element.className;
   6     newClassName+= " ";
   7     newClassName+= value;
   8     element.className = newClassName;
   9     }
  10 }

CategoryBookComputer

-  ⇤ ← Revision 7 as of 2008-03-23 11:40:25 → 
  Size: 2409
  Editor: 218
  Comment:
+   ← Revision 8 as of 2008-03-23 12:02:46 → ⇥
  Size: 2878
  Editor: 218
  Comment:
-Deletions are marked like this.
+Additions are marked like this.
 Line 69:
+ * style ( style.color, style.fontFamily... )
-Line 88:
+Line 89:
+[CSS]와 [DOM]
 * 외부 CSS 파일은 DOM으로 그 정보를 볼 수 없다.
 * element.className += " intro";

CSS class 추가하기
{{{#!java
function addClass(element, value) {
    if (!element.className) {
        element.className = value;    
    } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
    }
}
}}}