반응형
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 내용이 변하는 것은 아니다.
제목을 다이나믹하게 바꾸는 코드는 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 |
| putty의 다양한 기능을 활용해봅시다. (3) | 2007.06.19 |
| opener (3) | 2007.06.19 |
| autorun.inf (2) | 2007.06.19 |