||<<ISBN(1590595335)>>||||<<ISBN(8960770035,N)>>||

http://domscripting.com

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

관련포스트
 * [[http://channy.creation.net/blog/?p=431|DOM 스크립트 출간 이벤트]]

== 주요내용 ==
Node (nodeType)
 1. element (1)
 1. attribute (2)
 1. text (3)

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

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

{{{#!java
function popUp(winURL) {
    window.open(winURL, 'Pop-up window', 'width=320, height=480');
    return false;
} 

window.onload = function() {
    if (!document.getElementsByTagName) return false;
    var links = document.getElementsByTagName('a');
    for (var i=0; i<links.length; i++) {
        if (links[i].className == "popup") {
            links[i].onclick = function() {
                return popUp(this.getAttribute('href'));
            }
        }    
    }
}}}

[[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
{{{#!java
function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}
}}}

accesskey 사용 (from http://www.clagnut.com/blog/193/ )
 * 1 : Home
 * 2 : 본문으로 바로가기
 * 4 : 검색페이지
 * 9 : 연락처
 * 0 : 접근성 문서

[[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;
    }
}

function styleElementSiblings(tag, theclass) {
    if (!document.getElementsByTagName) return false;
    var elems = document.getElementsByTagName(tag);
    for (var i=0; i < elems.length; i++) {
        var elem = getNextElement(elems[i].nextSibling);
        addClass(elem, theclass);
    }
}
}}}
----
CategoryBookComputer