javascript: dom 객체

javascript: dom 객체

2021. 1. 4. 11:36ㆍ프론트엔드/JavaScript

DOM객체

: Document Object Model, Document의 내용, 구조, 스타일등을 수정,추가,삭제할수 있도록 제공되는 객체

Core Dom : 모든 문서 형식을 위한 표준 모델

XML DOM: XML 문서을 위한 표준 모델

HTML DOM : HTML 문서를 위한 표준 모델

선택자

직접선택자

     window.onload=function(){
         var hTit=document.getElementsByTagName("h1")[0];
         hTit.style.color="green";
         
         //var pText=document.getElementsByTagName("p")[0]; 둘다 사용 가능
         //pText.style.backgroundColor="pink";
         var pText=document.querySelector("p");
         pText.style["background-color"]="pink";
         
         //var cText=document.getElementsByClassName("cText")[0];
         //cText.style.fontSize="30px";
         var cText=document.querySelector(".cText"); 
         cText.style["font-size"]="50px";
         
         //var idText=document.getElementById("idText");
         //idText.style.backgroundColor="orange";
         var idText=document.querySelector("#idText");
         idText.style["backgroundColor"]="orange";
         
         //form은 변수 선언 없이 사용 가능
         document.myForm.uId.style.backgroundColor="#ccc";
     }

문서객체 만들기

텍스트 노드를 갖는 문서 객체

- document.creatElement(tagName) : 문서 객체를 생성하는 명령어

- document.creatTextNode('문자열') : 텍스트 노드 생성

- 객체.appendChild(Node) : 객체에 노드 연결

    <script>
        window.onload = function() { //dom 구조를 다 읽은 후 스크립트 실행시키는 명령어
            //태그 생성
            var hTit = document.createElement("h1");

            //텍스트 생성
            var hText = document.createTextNode("dom객체");

            //내용물 삽입
            hTit.appendChild(hText);

            //body의 자식으로 hTit 넣기
            document.body.appendChild(hTit);
        }
    </script>

텍스트 노드를 갖지 않는 문서객체

        window.onload = function() {
            var img = document.createElement("img");

            //이미지 태그 속성값 생성, 두가지 다 사용 가능

            //img.src="images/bul_tit.png";
            //img.alt="장식이미지";

            img.setAttribute("src", "images/bul_tit.png");
            img.setAttribute("alt", "이미지속성");

            document.body.appendChild(img);
        }

innerHTML

        window.onload=function(){
            var hTit=document.createElement("h1");
            hTit.innerHTML="hello";
            
            document.body.appendChild(hTit);
        }

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>68-digital-clock</title>
    <script>
        function myDigit() {
            var today = new Date();

            var hours = today.getHours();
            var m = today.getMinutes();
            var sec = today.getSeconds();

            //console.log(hours, m, sec);

            var myclock = document.querySelector("#myClock");
            myclock.innerHTML = hours + "시" + m + "분" + sec + "초";
        }
        setInterval("myDigit()", 1000);
    </script>
</head>

<body onload="myDigit();">
    <!--   body 다 읽고 나면 함수 호출-->
    <div id="myClock"></div>
</body></html>

'프론트엔드 > JavaScript' 카테고리의 다른 글

javascript: 정규표현식 (0)	2021.01.11
javascript: event (0)	2021.01.07
javascript: 브라우저 객체 (0)	2020.12.31
javascript: 문자열객체 (0)	2020.12.31
javascript: 객체(배열객체, 숫자객체), 실습- 요일 구하기, 달력 만들기 (0)	2020.12.30

코딩하지아