Doworld

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 로 전달된다.
   각 요소의 자식 노드가 있는지 여부만 확인해준다. 그 자체를 반환해주지는 않는다.