오늘의 요약
(1) HTML 문서
<html>
<head>
<title>DOM</title>
</head>
<body>
<div id="divId">
one
<em>two</em>
three
</div>
</body>
</html>
(2) DOM Tree
HTML
| |
HEAD BODY
| |
TITLE DIV (id="divId")
| |
"DOM" "one" EM "three"
|
"two"
(3) DOM 노드 예 (node의 type, name, value)
1) div(엘리먼트노드) : Node.ELEMENT_NODE, "div", null
2) one(텍스트노드) : Node.TEXT_NODE, "#text", "one"
3) id(속성노드) : Node.ATTRIBUTE_NODE, "id", "divId"
(4) Node 핸들링 속성
1) nodeType
2) nodeName
3) nodeValue
4) firstChild
5) lastChild
6) attributes
7) nextSibling
8) previousSibling
9) parentNode
10) childNodes
11) documentElement
ex) d1.html
(5) Node 핸들링 메소드
1) createTextNode()
2) createElement()
3) createAttribute()
cf) attrFont.value = "color:red"
4) setAttributeNode()
5) appendChild()
6) insertBefore()
7) replaceChild()
8) removeChild()
ex) d2~.html 알게된 개념
JSON(제이슨, JavaScript Object Notation):속성-값쌍 또는키-값쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는개방형 표준 포맷이다.JSON.parse: JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다. 선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있다. JSON값을 Javascript로 변경!JSON.stringfy: JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함한다. 즉, Javascript를 JSON으로 변경!AJAX(Asynchronous Javascript And Xml): 비동기식 자바스크립트와 xml의 약자이며. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다. Ajax는 JavaScript의 라이브러리중 하나이며, Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 초창기에는 XML을 사용했지만, 요즘은 JSON을 훨-씬 더 많이 사용한다.
이벤트 종류
onclick: 클릭시 발생하는 이벤트onmouseenter: 마우스 포인터가 요소 안으로 들어올 때(자식 포함) 발생하는 이벤트onmouseover: 마우스 포인터가 요소 안으로 들어올 때 + 자식 요소 출입시 발생하는 이벤트onmouseout: 마우스 포인터가 요소 밖으로 나갈 때 + 자식 요소 출입 시 발생하는 이벤트onmousemove: 마우스 포인터가 요소 위에서 움직일 때(자식 포함) 발생하는 이벤트onkeydown: 키를 누를 때 발생하는 이벤트onkeyup: 키를 놓을 때 발생하는 이벤트onfocus: 포커스가 갔을 때 발생하는 이벤트onblur: 포커스가 해제됐을 때 발생하는 이벤트
휘발방지