로이데스트 :: getElementById, getElementsByTagName, innerHTML, document.write, console.log

getElementById, getElementsByTagName, innerHTML, document.write, console.log - id/tag찾기, 내용변경, 내용/콘솔출력

2014. 1. 26. 04:58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="ex_js_syntax">
<p id=text1>hello~</p>
<i>thank you</i><br />
<script type="text/javascript" language="javascript">
/* id 찾아서 내용 바꾸기*/
document.getElementById("text1").innerHTML="안녕하세요";
/* body에 내용 출력 */
document.write("반갑습니다.");
/* <i> 내용 변수로 담기 */
var text2 = document.getElementsByTagName("i")[0];
/* <i> 내용 있는지 판별 */
if(!text2){
/* 내용 없으면 콘솔에 로그 브라우저 F12*/
console.log(text2);
}
else{
/* <i> 내용 있으면 내용변경 */
text2.innerHTML="감사합니다.";
}
</script>
</div>
</body>
</html>

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

위 소스 예제 보기

getElementById - 해당 id 요소에 접근합니다.

getElementsByTagName - 해당 태그 요소에 접근합니다.

innerHTML - HTML의 내용을 변경합니다.

document.write - 내용을 body부분에서 출력합니다.

form이벤트 onfocus, onblur, onchange, onsubmit - 포커스얻을시, 포커스잃을시, 교체시, 폼보낼시 (1)	2014.01.29
String, Number, escape, unescape - 문자열 변환, 숫자 변환, 엔코딩, 디코딩 (0)	2014.01.29
eval, isNaN, parseInt, parseFloat - 수계산, 숫자판별, 정수변환, 실수변환 (0)	2014.01.29
alert, confirm, prompt - 알림창, 확인창, 질문창 (0)	2014.01.26
js기본문법 (0)	2014.01.25