문서 객체 가져오기(getElementById() )

개발개발/자바스크립트 2012. 8. 27. 14:39
<script type="text/javascript"> window.onload = function () { // 문서 객체를 가져옵니다. var header1 = document.getElementById('header_1'); // id 속성이 header_1 인 태그를 가져와서 header1 에 저장 var header2 = document.getElementById('header_2'); // id 속성이 header_2 인 태그를 가져와서 header2 에 저장 // 문서 객체의 속성을 변경합니다. header1.innerHTML = 'with getElementById()'; //Header 대신 with getElementById() 로 변경 header2.innerHTML = 'with getElementById()'; //Header 대신 with getElementById() 로 변경 }; </script> <h1 id="header_1">Header</h1> <h1 id="header_2">Header</h1>

 

 

with getElementById()

with getElementById()

'개발개발 > 자바스크립트' 카테고리의 다른 글

문서 객체의 스타일  (0) 2012.08.27
문서 객체 가져오기(getElementByName())  (0) 2012.08.27
문서 객체의 속성(setAttribute  (0) 2012.08.27
문서 객체 연결  (0) 2012.08.27
Navigator 속성 보기  (0) 2012.08.27
Posted by 공돌공돌
,

문서 객체의 속성(setAttribute

개발개발/자바스크립트 2012. 8. 27. 14:38
<script type="text/javascript"> window.onload = function () { var img = document.createElement('img'); img.setAttribute('src', 'kkola.jpg'); img.setAttribute('width', 500); img.setAttribute('height', 350); img.setAttribute('data-property', 350); // img.setAttribute()이 // <img src = "winter.jpg" width = "500" height="350" data-property="350"> // 와 같은 결과를 나타낸다 document.body.appendChild(img); // 노드 연결 }; </script>

 

'개발개발 > 자바스크립트' 카테고리의 다른 글

문서 객체 가져오기(getElementByName())  (0) 2012.08.27
문서 객체 가져오기(getElementById() )  (0) 2012.08.27
문서 객체 연결  (0) 2012.08.27
Navigator 속성 보기  (0) 2012.08.27
location 객체 속성 보기  (0) 2012.08.27
Posted by 공돌공돌
,

문서 객체 연결

개발개발/자바스크립트 2012. 8. 27. 14:36

   <script type="text/javascript">
        window.onload = function () {
            var header = document.createElement('h1');
            //문서 객체 header 생성
            var textNode = document.createTextNode('Hello DOM');
            // 문서객체 hello dom 생성

            header.appendChild(textNode);
            // header 문서 객체에 textnode 문서 객체 노드 연결
            document.body.appendChild(header);
            // body 문서 객체에 header 문서객체 추가
        };
    </script>

 

Hello DOM

'개발개발 > 자바스크립트' 카테고리의 다른 글

문서 객체 가져오기(getElementById() )  (0) 2012.08.27
문서 객체의 속성(setAttribute  (0) 2012.08.27
Navigator 속성 보기  (0) 2012.08.27
location 객체 속성 보기  (0) 2012.08.27
screen 객체  (0) 2012.08.27
Posted by 공돌공돌
,

티스토리툴바