HTML DOM의 전형적인 실제 사용 예

1. 특정 태그의 값을 읽어오거나 변경하기

    1. 인터넷 익스플로어 - 비표준 방법

        <div id ="div1">div의 콘텐츠</div>

        <script>

            document.all.div1.innerText = "새로운 텍스트";  // document.all, innerText 비표준(호환성 문제가 생김)

        </script>

 

    2. 표준방법 - 문제점 : 자식노드에 공백문자가 포함되어 있다면 의도한 대로 동작하지 않을 수 있음.

       var divel = document.detElementById("div1");

 

       // 텍스트를 읽을때

       var divContent = divel.firstChild.nodeVal!ue;

       

       // 텍스트를 변경할 때

       divel.firstChild.nodeVal!ue = "새로운 텍스트";

 

    3.  표준방법 - 파이어폭스와 인터넷익스플로러에서 노드의 텍스트 값을 얻는 데 사용하는 크로스 브라우저 호환 스크립트

        var divContent = (document.getElementById('div1').textContent)?

                                     document.getElementById('div1').textContent :

                                     document.getElementById('div1').innerText;

         (조건?참:거짓) 연산자를 이용하여 textContent 속성이 있는지 여부를 물은후 속성이 있을땐 textContent를 없을시 innerText를

                              이용한다. 파이어폭스에는 innerText와 textContent 속성이 모두 존재함.

  

2. 특정 태그가 품은 내부 HTML을 직접 써서 화면 업데이트하기

    특정 태그 안에 HTML 문자열을 적용하여 화면을 업데이트 하고 싶다면 innerHTML 속성을 사용할 수 있음.

       document.getElementById("div1").innerHTML = "<a href ='#'><b>동적으로 생성된 링크</b></a>";

 

3. 드롭다운 리스트 상자에 아이템을 추가, 삭제하거나 내용 변경하기

    가끔 드롭다운 리스트에 아이템을 동적으로 추가해야 하는 경우, option 노드를 만들어서 select 노드에 자식 노드로

    동적으로 추가함.

       var selectEl = document.getElementById("sidoSelect");     //select 노드 선택

       var optionEl =document.createElement("option");           //option 노드를 동적으로 생성

       optionEl.value = "추가할 값";

       optionEl.appendChild(document.createTextNode("텍스트값"));    // 생성된 option 노드에 텍스트 추가

       select El.appendChild(optionEl);                                             // select 노드에 option 노드를 자식 노드로 추가

 

       <select id ="sidoSelect"></select>

 

4. 이미지 변경

    동적으로 이미지를 추가하거나 기존 이미지의 소스를 변경해야 하는 경우, img 엘리먼트의 src 속성을 이용하여 이미지를

    동적으로 변경 할 수 있음.

       var img = document.createElement("img");

       img.src = "이미지 경로";            // 생성된 img 노드의 src 속성을 이용하여 이미지를 변경

       var holder = document.getElementById("imgPlaceHolder");

       holder.appendChild(img);

 

       <div id = "imgPlaceHolder"></div>

 

5. 체크 상자의 선택 상태를 읽거나 변경하기

     document.getElementById("체크상자id").checked = true or false;             //true는 체크상태, false 선택해제

 

6. 엘리먼트에 특정 css 클래스 지정하기

    엘리먼트의 css 클래스를 동적으로 변경해야 할 경우 className 속성을 이용할 수 있음.

    서로 다른 display 속성을 갖는 css 클래스를 이용하여 div 엘리먼트를 감추거나 보이게 하는 전환 작업에도 사용 될 수 있음.

       document.getElementById("div id").className = 적용할 css이름;

 

7. 화면의 특정 영역을 동적으로 숨기거나 보이기

    특정 div 레이어를 감추거나 보여줘야 하는 경우 style.display를 이용

      document.getElementById("div id").style.display =" " or "none";            // " " : 엘리먼트 표시, "none" : 엘리먼트 감춤

 

8. 텍스트 링크를 동적으로 변경하기

    링크를 동적으로 변경하기 위해서 a 노드를 얻은 뒤 href 속성을 변경하여 링크를 동적으로 변경할 수 있음.

      document.getElementById("링크 id").href = "변경 될 링크";      // a 엘리먼트의 href 속성을 변경하면 링크를 동적으로 변경 함

이 게시물을..


태초에 나는 개그이야기를 만들었다.
내말을 믿고 나를 따르면 천당,
내말을 믿지않고 나를 따르지 않으면 지옥,
나는 하늘나라(우주)에 사느니라.

그럼 난 외계인?