ABOUT ME

-

Today
-
Yesterday
-
Total
-


  • innerText, innerHTML ,outerText, outerHTML
    웹&컴퓨팅 2007.06.19 20:53
    innerText, innerHTML

    제목을 다이나믹하게 바꾸는 코드는 document.all.ptitle.innerText에 새로운 내용을 대입함으로서 실제 화면상의 내용도 바뀐 것으로, H1 항목을 ptitle이라는 이름으로 지정하고, 스크립트에서는 ptitle의 innerText 즉, 안쪽의 텍스트를 다른 것으로 지정함으로서 그 내용을 바꾸었다. innerText는 태그로 둘러싸인 안쪽의 텍스트를 의미하는 것으로 만약에 바꾸려는 내용에 HTML 태그들이 포함되어져야 하는 경우에는 innerHTML이라는 속성을 사용해서 다음과 같이 바꾸면 된다.



    document.all.ptitle.innerHTML="CD-Review <EM>Vol.3</EM>"



    ----------------------------------------------------------------------------------

    예제)

    <html>
    <head>
    <title>페이지의 텍스트 변경 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
    </head>

    <body>
    <H1 id=MyH1 style="font-weight: normal" onclick="changeH1();" >MS Dynamic HTML의 세계로 오셨습니다.</H1>
    <br>위의 텍스트를 클릭하십시오.


    <script language=JavaScript>
    function changeH1() {
       var r;
       // 이제, 대체하고 싶은 텍스트를 입력합니다.
       MyH1.innerHTML = "<MARQUEE>안녕하세요? <I>반갑습니다!!</I> _crabz</MARQUEE>";
    }
    </script>

    </body>
    </html>
    ----------------------------------------------------------------------------------





    outerText, outerHTML

    앞서 사용한 속성은 innerText와 innerHTML인데, 왠지 안쪽을 의미하는 inner이외에 바깥쪽을 의미하는 outer라는 것도 사용할 수 있지 않을까라는 생각을 할 수 있는데, outerText와 outerHTML라는 것도 있다. 이런 속성을 사용해서 실제 HTML의 태그 항목 자체도 바꿀 수 있다. 다음의 코드들을 살펴보기로 한다.




    <html>

    <head>

    <title>CD-Letter Vol.3</title>

    </head>

    <body>

    <h1 id=ptitle>CD-Letter Vol.3</h1>

    <h3>Monologue(독백)</h3>

    <h3 class=player>Andre Gagnon(1942-), 피아니스트</h3>

    <hr>

    <span style="color:blue" onclick="this.style.fontSize = '30'">

    앙드레 가뇽</span>은 캐나다의 세계적인 피아니스트겸 작곡가로 이번 앨범은 그 동안 발표되었던 여러 음반에서 발췌해서만든 것이다._crabz.


    <BUTTON onclick="change()">outerText</BUTTON>

    <BUTTON onclick="change2()">outerHTML</BUTTON>

    <script>

    function change() {

    document.all.ptitle.outerText="CD-Review Vol.3";


    }


    function change2() {

    document.all.ptitle.outerHTML=

    "<H2 id=ptitle Style='color:blue'>CD-Review Vol.3</h2>";

    }

    </script>

    </body>

    </html>


    위의 코드를 브라우져로 읽어서 outerText라는 버튼을 누르게 되면 헤딩 레벨1로 지정된 H1의 내용은 없어지고(내용뿐만이 아니라 H1 태그 자체도) "CD-Review Vol.3"이라는 문구가 나타나는 것을 볼 수 있다. 즉 outerText의 속성이 항목 자체를 포함하는 내용을 HTML이 아닌 단순한 텍스트로 바꾸는데 사용되어지는 것을 알 수 있다.

    다시 위의 코드에서 outerHTML이라는 버튼을 누르게 되면 H1 항목이 새로 지정된 H2 항목으로 바뀌는 것을 볼 수 있다. 즉 outerHTML은 현재 문서상의 HTML 항목의 내용을 새로운 HTML 항목으로 바꿀 때 사용한다.

    참고적으로 이러한 속성 값의 변화가 HTML 문서 자체를 변화시키는 것은 아니다. 위의 아무 예제에서나 그 내용이 반영된 상태에서 브라우져의 "HTML 보기"를 실행시켜서 HTML 문서의 내용을 보면 실제 아무것도 달라진 것이 없다. 즉 변화는 문서의 개체 속성이 변하는 것이지 원래 HTML 내용이 변하는 것은 아니다.

    '웹&컴퓨팅' 카테고리의 다른 글

    MySQL에서 지원하는 데이터 타입  (1) 2007.06.19
    스타일 시트(Style Sheets)  (2) 2007.06.19
    innerText, innerHTML ,outerText, outerHTML  (2) 2007.06.19
    putty의 다양한 기능을 활용해봅시다.  (3) 2007.06.19
    opener  (3) 2007.06.19
    autorun.inf  (2) 2007.06.19

    댓글 2

Designed by Tistory.