DNS server, DNS service

A.N.C.H.I.H.O.O.N

innerText, innerHTML ,outerText, outerHTML 본문

웹&컴퓨팅

innerText, innerHTML ,outerText, outerHTML

chihoon, An. (A.K.A 슈퍼스타) x2chi 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의 다양한 기능을 활용해봅시다.  (2) 2007.06.19
opener  (3) 2007.06.19
autorun.inf  (2) 2007.06.19
2 Comments
댓글쓰기 폼