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" >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" >
앙드레 가뇽</span>은 캐나다의 세계적인 피아니스트겸 작곡가로 이번 앨범은 그 동안 발표되었던 여러 음반에서 발췌해서만든 것이다._crabz.
<BUTTON >outerText</BUTTON>
<BUTTON >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 내용이 변하는 것은 아니다.
'프로그래밍 > Javascript' 카테고리의 다른 글
| 체크박스 전체 선택 (0) | 2009.02.11 |
|---|---|
| 체크박스 선택 유무 check (0) | 2009.02.11 |
| 라디오 박스 체크하는 자바스크립트 (0) | 2009.02.11 |
| [예제] 위에서 아래로 내려와서 출렁이는 레이어 (0) | 2009.02.11 |
| Style Sheet 속성 (0) | 2009.02.11 |