반응형
1. DOM Level 2 방식의 이벤트 등록

function addEventHandler(obj, eventName, handler) {

    if (document.attachEvent) {

        obj.attachEvent("on" + eventName, handler);

    } else if (document.addEventListener) {

        obj.addEventListener(eventName, handler, false);

    }

}


2. Event 객체의 속성
    - type
        . 발생한 이벤트의 명 : 예)mouseover
    - target (ie 에서는 srcElement)
        . 이벤트가 발생한 객체, 보통 html element

function getActivatedObject(e) {

    var obj;

    if (!e) {

        // IE 옛날 버전은 event 객체를 전달하지 않음

        obj = window.event.srcElement;

    } else if (e.srcElement) {

        // IE는 target 이 아니라 srcElement 로 넘어온다.

        obj = e.srcElement;

    } else {

        obj = e.target;

    }

    return obj;

}


3. setInerval() 과 setTimeout()
    - setTimeout(a, b)
        . a 함수를 b 밀리세컨드 이후에 한 번만 수행
    - clearTimeout() 으로 취소
var alarm = setTimeout(do, 2000);

function do() {
    alert("wake up !!");
    clearTimeout(alarm);
}

    - setInterval(a, b)
        . a 함수를 b 밀리세컨드 이후에 계속 수행
    - clearInterval() 함수로 취소
var alarm = setInterval(do, 2000);
var count = 0;

function do() {
    count++;
    alert("wake up !!");
    if (count == 100) clearInterval(alarm);
}

4. DOM Tree
    - element.nodeName,  element.nodeValue 속성 사용
        . 엔터나 공배도 node 로 인식할 수 있음. 이 경우 nodeName 이 #text 인지 확인

<div id="root">

    <div id="firstParentDiv">첫번째 부모 div

        <div id="firstChildDiv">첫번째 자식 div</div>

        <div id="secondChildDiv">두번째 자식 div</div>

    </div>

</div>

function showTree() {

var firstParent = document.getElementById('firstParentDiv');

var root = firstParent.parentNode;


var firstChild = firstParent.firstChild;

while (firstChild.nodeName == "#text") {

// 첫번째 "첫번째 부모 div" 문자열노드, 두번째 div

alert(firstChild.nodeValue);

firstChild = firstChild.nextSibling;

}

var secondChild = firstChild.nextSibling;

while (secondChild.nodeName == "#text") {

// 처음은 리턴 때문에 null 문자열노드, 두번째 div

alert(secondChild.nodeValue);

secondChild = secondChild.nextSibling;

}

secondChild = firstParent.lastChild;

while (secondChild.nodeName == "#text") {

// 처음은 리턴 때문에 null 문자열노드, 두번째 div

alert(secondChild.nodeValue);

secondChild = secondChild.previousSibling;

}

firstChild = secondChild.previousSibling;

while (firstChild.nodeName == "#text") {

// 처음은 리턴 때문에 null 문자열노드, 두번째 div

alert(firstChild.nodeValue);

firstChild = firstChild.previousSibling;

}


    - document.createElement(), document.createTextNode()
        . createElement() 는 html element 를 생성, createTextNode() 는 문자열을 생성
    - appendChild(), insertBefore()
        . appendChild() 는 맨 마지막에 자식 노드를 추가한다.
        . insertBefore() 는 첫번째 전달인자의 노드를 두번째 전달인자인 노드 앞에 추가 시킨다. 
function addLetter() {
    var currentWordDiv = document.getElementById('currentWord');
    var p = document.createElement('p');
    currentWordDiv.appendChild(p);
    var letterText = document.createTextNode('제목입니다.');
    p.appendChild(letterText);

    - element.childNodes
        . 모든 자식 노드를 배열의 형태로 리턴해준다.
        . 자식 노드가 없을 때는 빈 배열이 넘어온다.

<div id="me"></div>

function getChildNodes() {

    var me = document.getElementById('me');

    alert (me.childNodes.length);


    - element.firstChilde, element.lastChild, element.nextSibling, element.previousSibling, element.parentNode

    - replaceNode(), removeChild(), createAttribute()

5. Node 의 프로퍼티와 메소드
    - data
        . NodeType 이 TextNode 일 경우 데이터를 나타낸다.
    - appendData(), insertData(), deleteData(), replaceData()

6. Node 의 타입
    - Element
        . Node.ELEMENT_NODE   :   1
    - Text
        . Node.TEXT_NODE   :   3
    - Document
        . Node.DOCUMENT_NODE   :   9
    - Comment
        . Node.COMMENT_NODE   :   8
    - DocumentFragment
        . Node.DOCUMENT_FRAGMENT_NODE   :   11
    - Attr
        . Node.ATTRIBUTE_NODE   :   2

    - IE6 에서는 NodeType 이 정의되지 않았으며 다음과 같이 사용할 수 있다.
if (!window.Node) {
    var Node = { ELEMENT_NODE: 1,
                       ATTRIBUTE_NODE: 2,
                       TEXT_MODE: 3
                       COMMENT_NODE: 8,
                       DOCUMENT_NODE: 9,
                       DOCUMENT_FRAGMENT_NODE: 11
    };
}

8. DocumentFrament
    . 문서 내에서 실제로 나타나지는 않고, 노드의 집합을 저장하고 저장된 노드들의 임시 저장소 역할을 담당
    . 한 번에 화면에 그리므로 속도가 빠르다. (element.innerHTML 이나 Document 를 직접 제어하면 느리다.)
function reverse(n) {
    var f = document.createDocumentFrament();
    while(n.lastChild) f.appendChild(n.lastChild);
    n.appendChild(f);
}

9. Element의 위치와 크기
    - offsetLeft , offsetTop
        . 엘리멘트의 X, Y 좌표
    - offsetWidth, offsetHeight
        . 프로퍼티의 가로와 세로 길이
    - 오버플로어가 있는 엘리먼트의 Y 좌표 구하기
function getY(element) {
    var y = 0;
    for (var e=element; e; e=e.offsetParent)
        y += e.offsetTop;

    // 엘리먼트 조상을 따라 올라가다 scrollTop 어트리뷰티가 설정된 것을 찾는다.
    // document.body 에 도달하면 루프를 종료한다.
    for (e=element.parentNode; e && e != document.body; e=e.parentNode)
        if (e.scrollTop) y -= e.scrollTop;    // 스크롤바 값을 뺀다.
    return y;
}

    - z-index
        . 값은 정수값으로 음수, 0 (디폴트), 양수 로 값이 작은 엘리먼트부터 큰 엘리먼트 순서로 그려진다.
        . z-index 에 의해 지정되는 쌓아 올리기 순서는 오직 서로 형제 관계인 엘리먼트들에게만 적용된다.
          (동일한 부모 컨테이너에 속한 엘리먼트)
        . 일부 브라우저는 <iframe> 태그에 적용된 z-index 속성을 무시한다.

    - visibility, display
        . visibility : visible, hidden 값을 가진다. hidden 값을 가져도 문서 구조는 확보된 채 남아있다.
        . display  : block, item, none 값을 가진다. none 값을 가지면 문서 구조의 공간이 없어진다.


9. javascript 함수
    - parseInt()
        . 문자열을 숫자로 바꿔줌


 
반응형
Posted by seungkyua@gmail.com
,