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()
. 문자열을 숫자로 바꿔줌
