Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

6/8 javascript DOM 본문

TIS_2016/HTML5_2기

6/8 javascript DOM

moozi 2016. 6. 8. 12:24

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript - Document Object Model(DOM)</title>
    <script>
        window.onload=function(){
            var header=document.createElement("h1");//h1태그 생성
            var textNode=document.createTextNode("안녕");//글자생성
           
            header.appendChild(textNode);//h1태그안에 글자 추가
            document.body.appendChild(header);//body태그에 h1태그추가가
           
            var img=document.createElement("img");//img태그 생성
            img.src="img/pic.jpg";//src속성 추가
            img.width=300;//가로크기
            img.height=300;//세로크기
            document.body.appendChild(img);//body태그에 img태그추가
           
            var img2=document.createElement("img");
            img2.setAttribute("src", "img/pic.jpg");
            img2.setAttribute("width",300);
            img2.setAttribute("height",300);
            document.body.appendChild(img2);
           
//            var h1=document.getElementById("header");
//            h1.innerHTML="javascript";           
            document.getElementById("header").innerHTML="<i>javascript</i>";
           
            var h3=document.getElementsByTagName("h3");//h3태그 찾기.배열리턴
            for(var i=0;i<h3.length;i++){
                h3[i].innerHTML="번호:"+i;
            }
           
        };
    </script>
</head>
<body>
    <h1 id="header"></h1>
    <h3></h3>
    <h3></h3>
</body>
</html>

'TIS_2016 > HTML5_2기' 카테고리의 다른 글

javascript 연습문제05  (0) 2016.06.08
javascript 연습문제04 풀이  (0) 2016.06.08
06/07 예제파일  (0) 2016.06.07
javascript 연습문제 04  (0) 2016.06.07
javascript 연습문제03 풀이  (0) 2016.06.07
'TIS_2016/HTML5_2기' Related Articles more
Comments