01.21.

자바스크립트 & 제이쿼리

플래시에서는 무비클립을 컨트롤

JS, JQuery에서는 DIV를 컨트롤

어떤 언어든 움직임을 준다는 것은 속성을 바꾸는 것

제이쿼리는 자바스크립트를 보다 더 쓰기 쉽도록 구문을 함수로 모아둔 것

if, for, 변수 선언 등은 똑같은 형식

JS-DOM(Java Script Document Object Model)

도큐먼트 안에 있는 오브젝트를 움직이게 해줌*

JS-BOM(Java Script Browser Object Model)

브라우저 안에 있는 오브젝트를 움직이게 해줌

노드 : 문서 안에 존재하는 모든 문자 하나하나, 모든 요소

자바스크립트란 곧 함수놀음

id를 주로 활용

노드타입 중 텍스트노드 : 엘레먼트 요소-1, src, href같은 속성-2, 이미지나 동영상-3

개체 접근

1. getElementsByTagName

태그네임을 이용해 노드에 접근하는 명령어

    <script>
        window.onload=function(){
            var divs=window.document.getElementsByTagName("div");
            alert("div 요소의 총개수:"+divs.length);
           
            for(var i=0; i<divs.length; i++){
                var div=divs.item(i);
                div.style.border="solid 4px red";
               
               
            }
        }
    </script>

    <script>       
        window.onload=function(){
            var divs=document.getElementsByTagName("div");
            var div2=divs.item(2);
            var div2Child=div2.getElementsByTagName("div");
            for(i=0; i<div2Child.length; i++){
                div2Child[i].style.border="solid 4px red";
            }
        }
    </script>

2. getElementsByClassName

클래스네임을 이용해 노드에 접근하는 명령어
    <script>
        window.onload=function(){
            var targets=document.getElementsByClassName("content_data");
            for(var i=0; i<targets.length; i++){
                targets[i].style.border="solid 4px red";
            }
        }
    </script>

3. getElementByIdName

ID네임을 이용해 노드에 접근하는 명령어 가장 많이 사용

    <script>
        window.onload=function(){
            var header=document.getElementById("header");
            header.style.border="solid 4px red";
        }
    </script>

4. childNodes, firstChild, lastChild

자식노드, 첫번째자식노드, 마지막자식노드에 접근하는 명령어

* 크롬이나 파이어폭스는 개행(엔터친것)문자까지 자식노드로 취급하지만 익스플로러는 그렇지 않음을 유의

    <script>
        window.onload=function(){
            var page=document.getElementById("sample_page");
            var nodes=page.childNodes;
            alert("page의 자식노드수는:"+nodes.length);
            for(var i=0; i<nodes.length; i++){
                var node=nodes[i];
                if(node.nodeType==1){
                    node.style.border="solid 4px red";
                }
            }
            var firstChild=page.firstChild;
            firstChild.style.color="red";
           
            var lastChild=page.lastChild;
            lastChild.style.color="red";
        }

    </script>

5. parentNode

부모노드에 접근하는 명령어

     <script>
        window.onload=function(){
            var header=document.getElementById("header");
            header.parentNode.style.border="solid 4px red";
           
            var data1=document.getElementById("data_1");
            data1.parentNode.style.border="solid 4px red";
        }
    </script>

6. previousSibling, nextSibling

형제노드에 접근하는 명령어

    <script>
        window.onload=function(){
            var content=document.getElementById("content");
            content.nextSibling.nextSibling.style.border="solid 4px red";
        }
    </script>