문서객체모델 ( DOM, Document Object Model)

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

문서 객체 모델 ( DOM, Document Object Model)

웹 브라우저가 HTML 페이지를 인식하는 방식

document 객체와 관련된 객체의 집합

html 페이지에 존재하는 태그를 자바스크립트에서 이용할 수 있는 객체로 만드는 것

 

메소드 이름

설명

createElement(tagName)

요소 노드 생성

createTextNode(text)

텍스트 노드 생성

appendChild(node)

객체에 노드를 연결

setAttribute(name, value)

객체의 속성을 지정

getAttribute(name)

객체의 속성을 가져옴

getElementById(id)

태그의 id속성이 id와 일치하는 객체를 가져옴

getElementsByName(name)

태그의 name속성이 name과 일치하는 문서 객체
를 배열로 가져온다

getElementsByTagName(tagName)

tagName과 일치하는 문서 객체를 배열로 가져온다

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

자바스크립트 계산기  (0) 2012.08.29
브라우저 객체 모델 BOM(Browser Object Model)  (0) 2012.08.27
문서 객체의 스타일  (0) 2012.08.27
문서 객체 가져오기(getElementByName())  (0) 2012.08.27
문서 객체 가져오기(getElementById() )  (0) 2012.08.27
Posted by 공돌공돌
,

문서 객체의 스타일

개발개발/자바스크립트 2012. 8. 27. 14:41
<script type="text/javascript">
        window.onload = function () {
            // 문서 객체를 가져옵니다.
            var header = document.getElementById('header');
            // 문서 객체의 스타일을 바꿔줍니다.
            header.style.border = '2px Solid Black';
            header.style.color = 'Orange';
            header.style.fontFamily = 'Helvetica';
            header.style.backgroundColor = 'black';
        };
</script>
<body>
    <h1 id="header">Header</h1>
</body>

    위에 기술한 스타일 외에도 다양한 속성들이 있다 


    문서 객체의 스타일은 css와 속성이름이 약간 다르다


    자바스크립트는 식별자 '-' 를 사용할 수 없으므로 css의 background-color 속성을

     backgroundColor 로 나타낸다

 

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

브라우저 객체 모델 BOM(Browser Object Model)  (0) 2012.08.27
문서객체모델 ( DOM, Document Object Model)  (0) 2012.08.27
문서 객체 가져오기(getElementByName())  (0) 2012.08.27
문서 객체 가져오기(getElementById() )  (0) 2012.08.27
문서 객체의 속성(setAttribute  (0) 2012.08.27
Posted by 공돌공돌
,

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

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

   <script type="text/javascript">
        window.onload = function () {
            var headers = document.getElementsByTagName('h1');
            //변수 headers 는 문서 객체를 가지는 배열이며 html 페이지의 h1 태그가 순서대로 들어감
            for (var i = 0; i < headers.length; i++) {
                // 문서 객체의 속성 변경
                headers[i].innerHTML = 'With getElementsByTagName()';
            }
        };
    </script>

    <body>
    <h1>Header</h1>
    <h1>Header</h1>
    </body>

    getElementByName()는 getElementById() 메서드와 달리 한번에 여러개의 문서 객체를 가져올 수 있다
    getElementByName()는 배열이므로 반복문을 사용할 수 있지만 for in 반복문을 사용하면
    문서 객체 이외의 속성에도 접근하기 때문에 for문 을 사용해야 한다

 

With getElementsByTagName()

With getElementsByTagName()


 

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

문서객체모델 ( DOM, Document Object Model)  (0) 2012.08.27
문서 객체의 스타일  (0) 2012.08.27
문서 객체 가져오기(getElementById() )  (0) 2012.08.27
문서 객체의 속성(setAttribute  (0) 2012.08.27
문서 객체 연결  (0) 2012.08.27
Posted by 공돌공돌
,

티스토리툴바