출처 : http://er1ca.tistory.com/8
#1. 용어
아래의 용어들은 일반적으로 문서 객체 모델과 XML 문서에서 사용하는 용어들이다.
1. 조상
족보에서 처럼, 조상(Ancestor)이란 현재 엘리먼트의 부모 등 윗 노드 들을 가리킨다.
2. 어트리뷰트
어트리뷰트(Attribute)란 어떤 엘리먼트에 대해 추가적인 정보를 담고 있는 프로퍼티다.
<p class = "test">
: <p>엘리먼트는 class 어트리뷰트를 갖고 있으며, 이 class 어트리뷰트에는 test라는 값이 담겨있다.
3. 자식
모든 엘리먼트는 임의 개수의 노드를 포함할 수 있다.
(이렇게 포함되어 있는 노드는 각각 부모 엘리먼트의 자식(Child)이 된다.)
<ul>
<li id = "everywhere">...</li>
<li class = "test">...</li>
<li class = "test">...</li>
</ul>
: <li>들 은 <ul>엘리먼트의 자식노드이다.
4. 문서
XML 문서는 루트(root)노드 또는 문서(document) 엘리먼트라고 불리는 단 하나의 엘리먼트로 이루어져 있으며, 이 엘리먼트에는 XML 문서의 모든 내용들이 담겨져 있다.
<html>
<head>....</head>
<body>
....
</body>
</html>
: <html>이 문서 엘리먼트이다.
5. 자손
어떤 엘리먼트의 자손(Descentdant)이라 하면, 그 엘리먼트의 자식노드 들이 포함된다.
<body>
<h1>...</h1>
<p>...</p>
<ul>
<li id = "everywhere">...</li>
<li class = "test">...</li>
<li class = "test">...</li>
</ul>
</body>
: <body>엘리먼트의 자손에는 <h1>,<p>,<ul>,<li> 엘리먼트 그리고 모든 엘리먼트 내 모든 테스트 노드들이 전부 포함된다.
6. 엘리먼트
엘리먼트(Element)는 어트리뷰트나 다른 노드들을 담고 있는 컨테이너다.
HTML 문서에서 가장 주요하게 가장 눈에띄는 요소는 바로 HTML의 엘리먼트들 이다.
: <html>,<head>,<title>,<body>,<h1>,<p>,<ul>,<li> 태그는 모두 엘리먼트이다.
7. 노드
노드(Node)란 DOM 표현에서 쓰이는 공통적인 단위다.
엘리먼트, 어트리뷰트, 주석, 문서, 텍스트 노드 들은 모두 노드이며, 따라서 일반적인 노드 프로퍼티들(ex. nodeType, nodeName, nodeValue)을 갖는다.
8. 부모
부모(Parent)란 현재 노드를 포함하고 있는 엘리먼트를 가리키는 용어다.
9. 형제
형제(Sibling) 노드란 현재 노드와 같은 부모 노드에 속한 자식 노드를 말한다.
previousSibling과 nextSibling을 말할때 쓰인다.
10. 텍스트 노드
텍스트 노드(Text Node)란 오직 텍스트만을 담고 있는 특별한 노드다. 여기서 텍스트란, 눈에 보이는 텍스트는 물론 모든 형태의 공백 문자까지 다 포함한다.
#2. 전역 변수
자바스크립트 코드의 전역 유효범위에는 전역 변수가 존재하는데, 이들은 보다 편리하게 DOM 연산을 할 수있게 도와준다.
1. document
현재 활성화된 HTML DOM 문서, 즉 브라우저에서 보이는 문서가 담겨 있다.
document.getElementById("body")
//ID가 'body'인 엘리먼트를 찾는다.
2. HTMLElement
이 변수는 모든 HTML DOM 엘리먼트의 상위 클래스 객체다.
모든 HTML DOM 엘리먼트는 HTMLElement 엘리먼트의 프로토타입을 확장해서 얻어진다.
이 상위 클래스는 모질라 기반의 브라우저나 오페라에서 기본적으로 사용 가능하다. IE나 사파리에는 이 상위 클래스를 추가해야 한다. hasClass 함수를 추가하면 어떤 엘리먼트가 지정된 클래스인지 확인 할 수 있다.
HTMLElement.prototype.hasClass = function( class ) {
return new RegExp("(^|\\s)"+class+"(\\s|$)").test(this.className);
};
: 전역 HTMLElement 상위 클래스에 새 함수를 연결하기
#3. DOM 탐색
다음의 프로퍼티들은 DOM 엘리먼트들의 일부로서, DOM문서를 탐색하는데 쓰일 수 있다.
1. body
전역 HTML,DOM 문서(document 변수)에 있는 이 프로퍼티는 HTML의 <body>엘리먼트를 직접 가리킨다. (문서에는 오직 하나의 body만 있어야 한다.)
document.body.style.margin = "0px";
: <body>의 바깥 여백 속성을 바꾼다.
2. childNodes
모든 자식 노드들에 대한 배열을 담고있다. (엘리먼트, 텍스트 노드, 주석 등이 포함) 이 프로퍼티는 읽기 전용이다.
var c = document.body.childNodes;
for( var i = 0; i < c.length ; i ++)
{
if(c[i].nodeType == 1)
c[i].style.border = "1px solid red";
}
3. documentElement
모든 DOM노드가 갖고 있는 프로퍼티이며, 문서의 루트 엘리먼트를 참조하는 역할을 한다.
(HTML 문서의 경우 이 프로퍼티는 항상 <html>엘리먼트를 가리킨다.)
4. firstChild
현재 엘리먼트의 첫 번째 자식노드를 가리킨다.
var e= document.getElementById("body");
while(e.firstChild)
e.removeChlid(e.fistChild);
5. getElementById(elemID)
문서 내에 지정된 ID를 가진 엘리먼트를 찾아낼 수 있는 함수다. 이 함수는 오직 문서 엘리먼트에서만 사용 가능하다.
document.getElementById("body");
//ID가 body인 엘리먼트를 찾는다.
document.getElemnetByID("notice").styledisplay = 'none';
//ID가 notice인 엘리먼트를 숨긴다.
6. getElementsByTagName(tagName)
현재 엘리먼트로부터 시작하여 지정된 태그 이름을 갖는 모든 자손 엘리먼트를 찾는다.
7. lastChild
현재 엘리먼트의 마지막 자식 노드를 가리킨다.
var n = document.createElement("div");
n.innerHTML = "Thanks for visiting!";
document.body.insertBefore(n, document.body.lastChild);
//<body>의 마지막 엘리먼트 바로 앞에 새로운 엘리먼트를 삽입한다.
8. nextSibling
현재 엘리먼트의 다음 형제 노드를 가리킨다.
9. parentNode
모든 DOM노드에서 parentNode는 현재 엘리먼트를 포함하고 있는 상위 노드를 가리킨다.
document.getElementById("cancel").onclick = function(){
this.parentNode.stayle.display = 'none';
};
10. previousSibling
현재 엘리먼트의 이전 형제 노드를 가리킨다.
var cur = this.previousSibling;
while(char != null){
cur.style.display = 'none';
cur = this.previousSibling;
}
#4. 노드 정보
대부분의 DOM 엘리먼트에는 아래의 프로퍼티들로 엘리먼트 정보에 쉽게 접근 할 수 있다.
1. innerText
현재 엘리먼트 내부의 모든 텍스트를 포함하는 문자열을 반환한다.
2. nodeName
엘리먼트 이름을 대문자로 저장하고 있는 프로퍼티이다.
3. nodeType
노드 타입에 대응하는 숫자를 담고 있다.
* 엘리먼트 노드 : 1 or document.ELEMENT_NODE
* 텍스트 노드 : 3 or document.TEXT_NODE
* 문서 노드 : 9 or document.DOCUMENT_NODE
4. nodeValue
텍스트 노드 내부에 담겨있는 텍스트에 접근 하는 프로퍼티이다.
#5. 어트리뷰트
대부분의 어트리뷰트들은 이를 갖고있는 엘리먼트에서 프로퍼티의 형태로 사용 가능하다.
1. className
이 프로퍼티를 사용하면 DOM 엘리먼트에 클래스를 추가하거나 제거할 수 있다.
2. getAttribute(attrName)
DOM 엘리먼트에 포함된 어트리뷰트 값에 접근하는 함수이다.
어트리뷰트 들은 사용자가 HTML 문서에 직접 적어둔 값으로 초기화 된다.
이 함수는 얻어내려는 어트리뷰트의 이름을 파라미터로 갖는다.
3. removeAttribute(attrName)
어떤 엘리먼트에서 어떤 어트리뷰트를 완전히 제거하려할 때 사용된다.
4. setAttribute(attrName, attrValue)
DOM 엘리먼트에 포함된 어트리뷰트의 값을 설정하는 용도로 사용된다.
var a = document.createElement("a");
#6. DOM 변경
다음에 나열되는 모든 프로퍼티와 함수들은 DOM을 조작하는 용도로 사용할 수 있다.
1. appendChild(nodeToAppend)
이 함수는 현재 엘리먼트에 자식 노드를 추가한다.
var ul = document.createElement("ul");
document.body.appendChild(ul);
//새로운 <ul> 엘리먼트를 body의 맨 끝에 추가한다.
2. cloneNode(true|false)
기존 노드를 복제하는 함수이다.
var ul = document.getElementByTagName("ul")[0];
ul.parentNode.appendChild(ul.cloneNode(true));
//ul노드를 복제한 후 기돈 노드 밑에 추가한다.
3. createElement(tagName)
DOM 구조에 새로운 엘리먼트를 생성하는 주요 함수다.
4. createElementNS(namespace, tagName)
이 함수는 엘리먼트에 대한 네임스페이스를 지정할 수있는 기능도 제공한다.
var p = document.createElementNS("http://www.w3.org/1999/xhtml","p");
//xhtml과 호환되는 <p> 엘리먼트를 생성한다.
5. createTextNode(textString)
이 함수는 DOM 문서에 삽입될 새로운 텍스트 문자열을 생성하는 데 사용할 수 있다.
var h = document.createElement("h1");
6. innerHTML
HTML DOM에만 특화된 프로퍼티로, DOM 엘리먼트의 HTML 내용물을 문자열 형태로 접근하거나 조작하는 용도로 쓰인다.
var t = document.getElementsByTagName("textarea")[0];
7. insertBefore(nodeToInsert, nodeToInsertBefore)
이 함수를 사용하면 DOM 노드를 문서의 어디에라도 삽입할 수 있다.
8. removeChild(nodeToRemove)
이 함수는 DOM문서에서 노드를 삭제하는데 사용된다.
9. replaceChild(nodeToInsert, nodeToReplace)
이 함수는 어떤 노드를 삭제하고 그 위치에 다른 노드를 삽입하는 일련의 과정에 사용된다.
var a = document.getElementsByTagName("a");
while(a.length){
var s = document.createElement("strong");
s.appendChild(document.createTextNode(a[i].href));
a[i].replaceChild(s,a[i]);
//기존의 <a>를 새로운 <strong>엘리먼트로 교체한다.
}
: <a>엘리먼트를 <strong> 엘리먼트로 교체하되, <strong> 내부에는 기존의 <a>에 본래 연결되어 있던 URL이 담기게 하는 예다.
'Stupid Computer > 4. JavaScript' 카테고리의 다른 글
| [자바스크립트] Code-assist ( Aptana Plugin설치 ) (0) | 2014.03.28 |
|---|---|
| [자바스크립트 개발환경 구축] 이클립스- jQuery 플러그인 설치하기 (0) | 2014.03.28 |
| [json/json.h] json reference file ! json 사용법 ! (0) | 2014.03.25 |
| [자바스크립트] 자바스크립트 라이브러리 정리( 최근 인기있는것들 ) (0) | 2014.03.25 |
| [자바스크립트] 공부 사이트 ! 자바스크립트 강좌 JASKO (0) | 2014.03.25 |
| [자바스크립트] Cordova 란 ? (0) | 2014.03.20 |
| [자바스크립트] 화면, 페이지 전환! 페이지 돌아오기 ! (0) | 2014.03.20 |
| [자바스크립트]div태그와 span태그 비교/ innerHTML예제 (0) | 2014.03.20 |
| [자바스크립트] \n, <br>   줄바꾸기 정리 ! (0) | 2014.03.20 |
| [자바스크립트] 한글 깨짐현상 고치기~ js파일 내에서 한글 사용~ (0) | 2014.03.20 |