doctype

1. 노드 프로퍼티

- nodeName
   nodeName 프로퍼티는 특정 노드의 이름을 포함한 문자열을 반환한다.

   name = node.nodeName

   특정 노드가 요소 노드이면 nodeName 프로퍼티는 그 요소의 이름을 반환한다.
   이 경우 tagName 프로퍼티와 같은 값을 가진다.
   텍스트 노드이면 nodeName 프로퍼티는 “#text” 라는 문자열을 반환한다.
   읽기 전용이고 값을 바꾸거나 변경할 수 없다.

- nodeType
   nodeType 프로퍼티는 특정 노드의 형식을 지정하는 정수 값을 반환한다.

   integer = node.nodeType

   경우에 따라 열 두가지의 값이 반환된다.
   각 숫자는 nodeType에 해당하는 노드의 종류를 알려준다.

1. ELEMENT_NODE
2. ATTRIBUTE_NODE
3. TEXT_NODE
4. CDATA_SECTION_NODE
5. ENTITY_REFERENCE_NODE
6. ENTITY_NODE
7. PROCESSING_INSTRUCTION_NODE
8. COMMENT_NODE
9. DOCUMENT_NODE
10. DOCUMENT_TYPE_NODE
11. DOCUMENT_FRAGMENT_NODE
12. NOTATION_NODE

   웹 문서 내에 요소들과 속성 그리고 텍스트 노드를 찾아내는 것이 가장 자주 사용하는 방법이기 때문에
   12가지 중에 처음 세 가지는 매우 중요하다.
   nodeType 프로퍼티도 읽기 전용.

- noteValue
   nodeValue 프로퍼티는 특정 노드의 값을 문자열로 반환한다.

   value = node.nodeValue

   만약 노드의 종류가 속성 노드이면 속성 값을,
   텍스트 노드이면 텍스트 내용을,
   요소 노드이면 빈(null) 값을 반환한다.

   nodeValue 프로퍼티는 읽고 쓰기가 가능하다.
   빈 값이면 값을 설정 할 수 없다.

   nodeValue 프로퍼티를 이용하는 것은 텍스트 노드 값을 설정하는데 가장 간단한 방법.

2. 노드 내부 구조 보기

- childNodes
   childNodes 프로퍼티는 특정 요소 노드의 자식 노드를 배열 값으로 반환.

   nodeList = node.childNodes

   nodeList에는 node의  자식 노드들이 배열로 저장되어 있는데, nodeList의 각 값들은 객체다.
   일반적으로 nodeType, nodeName, nodeValue 같은 노드 프로퍼티로 구성되어있다.
   텍스트 노드와 속성 노드는 자식 노드가 없다. 이런 경우 childNodes는  빈 값을 포함한 배열이 반환된다.
   노드 내에 자식 노드가 있는지 확인하려면 hasChildNodes 메소드를 사용하면 된다.

- firstChild
   firstChild 프로퍼티는 지정 요소 노드의 첫 번째 자식 노드를 반환한다. 읽기전용.

   reference = node.firstChild

- lastChild
   lastChild 프로퍼티는 지정 요소 노드의 마지막 자식 노드를 반환.

   reference = node.lastChild

- nextSibling
   nextSibling 프로퍼티는 지정 노드의 다음 노드를 반환한다. 읽기 전용.

   reference = node.nextSibling

   지정 노드 뒤에 따라오는 노드가 없으면 nextSibling 프로퍼티는 빈 값을 반환한다.

- parentNode
   parentNode 프로퍼티는 지정 노드의 부모 노드를 반환. 읽기 전용.

   reference = node.parentNode

   자식 노드를 가질 수 있는 노드는 요소 노드밖에 없기 때문에 반환되는 노드는 항상 요소 노드이다.
   예외적인 경우는 부모가 없는 최상위 노드인 document 밖에 없다.
   이 경우 parentNode 는 빈 값을 반환한다.

- previousSibling
   previousSibling 프로퍼티는 지정 노드의 앞의 노드를 반환.

   reference = node.previousSibling

   지정 노드 앞의 노드가 없다면 previousSibling 프로퍼티는 빈 값을 반환.
   역시 읽기 전용.

1. 노드 만들기

- createElement
   createElement 메소드는 특정 태그 내에 포함된 새로운 요소 노드를 만들 때 사용. 새로 만들어진 요소를 반환.

    reference = document.createElement( element )

    이 메소드는 만들려고 하는 태그 명을 인수로 가진다.

    var para = document.createElement( “p” );

    일단 createElement로 만들어진 요소는 바로 문서 내에 추가할 수 있는 것이 아니다.
    이것을 실제로 추가하려면 appendChild 나 insertBefore 메소드 혹은 replaceChild 등을 사용한다.

    var para = document.createElement( “p” );
    document.body.appendChild( para );

- createTextNode
   createTextNode 메소드는 특정 텍스트를 포함하는 새 텍스트 노드를 만든다. 새로 만들어진 텍스트 노드를 반환.

    reference = document.createTextNode( text )

    이 메소드는 만들어질 텍스트 문자열을 인수로 가진다.

    var msg = document.createTextNode( “Hello, JS World” );

    createTextNode 도 createElement 와 마찬가지로 바로 문서 내에 추가할 수 있는 것이 아니다.
    실제로 추가하려면 마찬가지의 방법을 사용한다.

2. 노드 복사

- cloneNode
   cloneNode 메소드는 특정 노드를 복사할 수 있다. 새로 복사된 노드를 반환해 준다.

   reference = node.cloneNode( deep )

   이 메소드는 참이냐 거짓이냐 하는 불린 값을 인수로 가진다.
   새로 만들어진 노드가 복사한 노드와 같은 형태를 띠고 있는지 여부를 확인하는 것이다.

   reference = node.cloneNode( true )
   reference = node.cloneNode( false )

   인수의 값이 참이면 새로 만든 노드는 복사한 노드와 같은 자식을 갖는 것이다.
   인수의 값이 거짓이면 자식 노드가 없다.
   노드가 요소 노드인 경우 원래 요소 내 모든 텍스트 노드가 복사되지 않았다는 것으로 속성만 복사된 것이다.

3. 노드 추가

- appendChild
   appendChild 메소드는 요소 노드에 새 자식 노드를 추가한다.

   reference = element.appendChild( newChild )

   새로운 자식 노드는 추가된 요소의 제일 마지막 자식 요소가 된다. 새로 추가된 노드를 반환하게 된다.

   var para = document.createElement( “p” );
   var msg = document.createTextNode( “Hello world” );
   para.appendChild( msg );

   새로 만든 요소를 작업하는 것처럼 appendChild는 문서 내에 있는 요소를 옮기는 데 사용할 수 있다.

- insertBefore
   insertBefore 메소드는 특정 요소의 자식 노드 앞에 새로운 노드를 추가하는 데 주로 사용한다.

   reference = element.insertBefore( newNode, targetNode )

   새 노드인 newNode를 targetNode라는 노드 앞에 추가하게 된다.
   targetNode는 요소의 자식 노드여야 한다.
   targetNode가 정의되어 있지 않으면 newNode는 요소의 자식 노드 끝에 추가된다.
   이 경우, appendChild와 똑같은 결과를 수행한다.

   insertBefore 메소드는 문서 구조에 새 노드를 추가하기 위해 createElement와 createTextNode와 자주 사용된다.
   추가하는 노드가 자식 노드를 가지고 있으면 이 자식 노드들도 targetNode의 앞에 함께 추가된다.

   insertBefore는 새로 만든 노드를 추가하는 기능뿐 아니라 기존 노드를 문서 내에서 이동하는 기능도 수행한다.

4. 노드 삭제

- removeChild
   removeChild는 특정 부모 노드에서 자식 노드를 제거하는 메소드.

   reference = element.removeChild( node )

   삭제한 노드를 반환해 준다.
   또한 removeChild 를 통해 제거하면 노드에 포함된 모든 자식 노드도 함께 제거된다.

5. 노드 바꾸기

- replaceChild
   replaceChild 메소드는 특정 부모 노드 아래 자식 노드를 다른 노드로 교체할 때 사용한다.
   이미 문서 구조 내에 있는 노드에만 동작한다.

   reference = element.replaceChild( newChild, oldchild )

   여기서 oldChild 노드는 요소의 자식 노드여야 한다.
   이 메소드는 변경된 노드를 반환해준다.

   새 노드가 자식 노드를 가지고 있으면 모두 함께 추가된다.

6. 노드 값 변경

- setAttribute
   setAttribute 메소드를 이용하면 특정 요소 노드의 기존 속성 값을 바꾸거나 새롭게 추가할 수 있다.

   element.setAttribute( attributeName, attributeValue )

   속성 이름과 속성 값은 문자열로 적으면 된다.
   기존 요소에 속성이 이미 존재하면 새로운 값으로 변경되고, 없으면 새로운 속성이 추가된다.

   문서 구조 안에 속해 있지 않은 요소에도 속성 노드를 추가할 수 있지만 요소 노드에만 사용할 수 있다.
   setAttribute 는 속성 값을 얻어오는 getAttribute 와 함께 쓰인다.

7. 노드 찾기

- getAttribute
   getAttribute 메소드는 지정 요소의 속성 노드의 이름에 해당하는 값을 찾아서 반환한다.

   attributeValue = element.getAttribute( attributeName )

   속성 이름은 문자열로 지정할 수 있고 속성 값 역시 문자열로 반환한다.
   지정한 이름에 해당하는 속성 노드가 없을 경우, 빈 문자열이 반환된다.

- getElementById
   getElementById 는 특정 id 속성을 가진 요소를 찾는데 사용하는 가장 일반적인 메소드.

   element = document.getElementById( ID )

   특정 id의 요소 노드를 반환한다.
   요소가 없으면 빈 값(null)을 반환한다.
   이미 만들어진 문서 객체만 사용할 수 있다.

   getElementById 를 통해 반환된 요소 노드는 객체이며,
   nodeName, nodeType, parentNode, childNodes 같은 프로퍼티를 모두 가지고 있다.

   문서 내에서 id는 여러 개가 중복되어 선언되면 안되고 오로지 한 개만 있어야 한다.
   만약 중복되는 여러 개의 id가 있으면 예측할 수 없는 방식으로 동작한다.  

- getElementsByTagName
   getElementsByTagName 메소드는 특정 태그 명에 해당하는 모든 요소들을 찾는다.

   elements = document.getElementsByTagName( tagName )

   이 메소드는 찾아낸 요소들을 목록 형태로 반환한다. 이 목록들을 배열로 사용할 수 있다.
   배열 내에 있는 각 요소들은 객체이고,
   nodeName, nodeType, parentNode, childNodes 같은 프로퍼티를 이용해 사용할 수 있다.

- hasChildNodes
   hasChildNodes 는 특정 요소에 자식 노드가 있는지 여부를 확인하는데 사용하는 메소드.

   booleanValue = element.hasChildNodes

   결과는 true 또는 false 로 전달된다.
   각 요소의 자식 노드가 있는지 여부만 확인해준다. 그 자체를 반환해주지는 않는다.

1. object.getAttribute(attribute)

String - 속성값의 이름을 검색함.

<p title=”Hello World” /> 이라는 녀석이 있다면 <p> 요소의 title 속성을 얻기 위해서는
getElementByTagName과 함께 사용하여야 한다.

var paras = document.getElementByTagName(“p”);
var title_txt = paras.getAttribute(“title”);

alert(title_txt); 해본다면 Hello World 가 출력되는걸 확인할 수 있다.

2. object.setAttribute(attribute, value)

Attr – 새로운 속성값을 추가함.

이 메서드는 특정 속성 노드의 값을 바꿀 수 있다. 
attribute는 바꾸고 싶은 속성이고 value는 바꿀 값을 넣어주면 된다.

var paras = document.getElementByTagName(“p”);
var title_txt = paras.setAttribute(“p”, “Hello JavaScript World”);

alert(title_txt); 해본다면 Hello JavaScript World 로 변경되어 출력되는걸 확인할 수 있다.

* 메서드에 get 이 붙어있다면 “값을 가져온다” 라고, set 이 붙어있다면 “값을 변경하여 넣어준다” 정도로 이해하면 편할 듯.

1. document.getElementById(String elementId)

NodeList – ID가 element에 의해 주어지는 요소를 반환함.

<img src=”image.jpg” id=”myImg” />
document.getElementById(“myImg”);

이런식으로 찾아서 사용할 수 있다. Id는 다른 Id와 이름이 겹치면 안된다.

2. document.getElementByTagName(String tagname)

NodeList – 주어진 이름을 갖는 모든 요소들의 NodeList를 그것들이 도큐먼트 트리 안에서 표현되는 순서로 반환함.

<img src=”img0.jpg />
<img src=”img1.jpg />
<img src=”img2.jpg />

document.getElementByTagName(“img”);

이런 식으로 사용된다. 태그이름은 여러번 사용될 수 있으므로 배열에 저장된다.

document.getElementByTagName(“img”)[0];
document.getElementByTagName(“img”)[1];
document.getElementByTagName(“img”)[2];

이렇게 사용될 수 있지만 좀 더 타이핑 하는 수고를 줄이고자 한다면

var img_arr = document.getElementByTagName(“img”);
img_arr[0] // img0
img_arr[1] // img1
img_arr[2] // img2

을 사용할 수 있다.

루트 엘리먼트를 찾으려면 document.documentElement; 를 사용하면 <html> 태그를 가져온다.

3. document.getElementByTagNameNS(String namespaceURI, String localName)

NodeList – 주어진 이름과 네임스페이스 URI를 갖는 모든 요소들의 NodeList를 그것들이 도큐먼트 트리 안에서 표현되는 순서로 반환함.

특정 이름공간속에 속한 요소를 찾아내어 반환. 이라고 하는데 거의 사용되지 않는듯..
책을 찾아봐도 딱히 설명도 없고……-_-;; 요놈은 그냥 패스.