● getElementById : 특정 아이디의 요소 노드에 직접 접근할 수 있음.
        document.getElementById("id")

● getElementsByTagName : 특정 태그를 사용하는 요소들을 배열로서 얻어낼 수 있음. getElementById가 하나의 요소를 얻는데 반해, getElementsByName은 여러 요소를 얻게 됨.
        element.getElementsByTagName("tag")

● getAttribute : 요소의 속성 값들을 알 수 있음. 문서 객체를 사용할 수 없음. 각 요소 노드 객체로만 사용 가능함.
        object.getAttribute(속성명)

<p>요소의 title 속성을 얻기 위해서는 getElementsByName과 함께 사용해야 함.
        var paras = document.getElementsByTagName("p");
        for (var i =o; i < paras.length, i++_{
                alert(paras[i].getAttribute("title"));
        }

● setAttribute : 특정 속성 노드의 값을 바꿀 수 있음. getAttribute처럼 메소드도 함수이고 요소 노드에서만 동작함. 다른 점은 인수를 두개 갖는 다는 점인데, 하나는 바꾸고 싶은 속성명이고 , 또 하나는 바꿀 값임.
        object.setAttribute(속성명,변경될값)

● childNodes 프로퍼티 : 문서 내 노드 트리에서 모든 요소의 자식에 대한 정보를 가져올 수 있는 방법임. 요소노드뿐 아니라 모든 형식의 노드를 포함하는 배열을 반환함.
        element.childNodes

● nodeType 프로퍼티 : 정확히 찾으려는 노드를 얻을 수 있음. 하지만 "요소"나 "속성"같은 문자열이 아니라 숫자를 반환해줌.

        node.nodeType
        alert(body_element.nodeType);

        요소노드의 nodeType 값은 1
        속성노드의 nodeType 값은 2
        텍스트노드의 nodeType 값은 3
        * 특정형식의 노드를 지정할 수 있으며, 이 노드에만 영향을 주는 함수를 만들 수 있음.

● nodeValue 프로퍼티 : 텍스트 노드의 값을 바꿀 수 있음. 또한 노드의 값을 가져오거나 설정할 수 있음.
        node.nodeValue

        *주의할 점: 실제 콘텐츠가 어떤 노드에 담겨져 있는지 정확히 파악해야함. 대상이 되는 노드에 있는지, 그 자식이 되는 노드에 있는지를 알아야함.
        alert(description(대상 노드명).childNodes[0].nodeValue);

● firstChild & lastChilde : 배열의 첫번째 자식노드와 마지막 자식노드에 대해 간단히 쓸 수 있는 방법이 있음.
        node.firstchild == node.childNodes[0]
        node.lastChild == node.childNodes[node.childNodes.length-1]

● createElement : 새 요소노드를 만들 수 있음. 하지만 요소노드를 만들었을뿐, 이것이 바로 노드트리에 연결되어 있지는 않다. 연결을 위해선 appendChild가 필요하다.
        document.createElement(nodeName)
        ex) document.createElement("p"); //문서에 p요소 노드를 추가함.

● appendChild : 새로만든 노드를 문서 트리 구조에 추가하는 가장 간단한 방법은 문서에 이미 존재하는 노드에 자식 노드로 추가하는 것이다. appendChild를 통해 새로 만든 노드를 문서에 추가할 수 있다.
        parent.appendChild(child)
        ex) var testdiv = document.getElementById("testdiv");
            var para = document.createElement("p");
            testdiv.appendChild(para);

● createTextNode : 새 텍스트 노드를 만들수 있음.
        document.createTextNode(test)
        ex) document.createTextNode("Hello world");

● nextSlibling : 타겟 요소 뒤에 있는 다음 노드를 지칭하는 프로퍼티





--------------------------------------------------
마크업이란?
마크업 언어는 문서에 포함된 문장, 표, 소리 등과 같은 문서의 내용에 대한 정보가 아니라  그 문장과 그림, 표가 어떻게 배치되고 글자는 어떤 크기와 모양을 가지며 , 들여쓰기와 줄간격, 여백은 어느정도인지에 대한 정보를 의미합니다.
마크업이라는 말자체가 글이나 책다위에서 표시를 하거나 한다는 듯이지요. --> 아마도 기본 코드작성을 의미하는 듯.

* typeof 연산자 : 요소의 속성을 알려줌.


--------------------------------------------------
사용하기 유용한 함수
● addLoadEvent : 멀티 온로드가 가능하도록 하는 함수
        fuction addLoadEvent (func) {
                var oldonload = window.onload;
                if (typeof window.onload != 'function') {
                        window.onload = func;
                } else {
                        window.onload = function() {
                                oldonload();
                        }
                }
        }

        addLoadEvent(firstFunction);
        addLoadEvent(secondFunction);

● insertAfter : 기존에 존재하는 요소 뒤에 새 요소를 삽입할 수 있도록 하는 함수 <-> insertBefore 라는 돔메소드의 반대개념
        function insertAfter(newElement, targetElement) {
                // 타겟 요소의 parentNode프로퍼티를 얻는 parent 변수
                var parent = targetElement.parentNode;
                // 타겟 요소가 부모의 마지막 자식인지 확인하기(타겟요소와 부모의 lastChild프로퍼티를 비교
                if (parent.lastChild == targetElement) {
                        //부모에 새 자식요소를 추가
                        parent.appendChild(newElement);
                } else {
                        //타겟요소뒤에 있는 다음 노드를 타깃으로하여 insertBefore 메소드 사용
                        parent.insertBefore(newElement, targetElement.nextSibling);
                }
        }