[JavaScript]태그에 접근하는 방법

자바스크립트에서 기본적으로 html페이지에 모든 태그는 객체로 저장되며

그것을 DOM(Document Object Model)이라고 부른다.

문서에 있는 모든 태그를 객체로 보는것

모든 객체화된 태그는 document객체안에 포함되어 있음.

각 객체에 접근하려면 document객체의 메소드(함수)를 이용해서 찾아야함.

[id로 태그 찾기]

<div id="area"></div>

var area = document.getElementById("area");

[class로 태그 찾기]

<span class="a"></span>

<span class="a"></span>

var classEl = document.document.getElementByClassName("area");

classEl[0].innerHTML="출력할 문구";

classEl[1].style.color="green";

for(var i=0; i<classEl.length; i++){

 classEl[i].innerHTML="for문이용";

            classEl[i].style.color="white";

            classEl[i].style.backgroundColor="aqua";

}

        

[tagname로 태그 찾기]

var tagEl = document.getElementsByTagName("p");

tagEl[0].style.fontSize="20pt";

[name 속성으로 태그 불러오기 - input태그]

<label >게임<input type="checkbox" name="hobby" value="게임"></label>

        <label >등산<input type="checkbox" name="hobby" value="등산"></label>

        <label >코딩<input type="checkbox" name="hobby" value="코딩"></label>

        <label >음주<input type="checkbox" name="hobby" value="음주"></label>

        <label >지각<input type="checkbox" name="hobby" value="지각"></label>

        <!-- 버튼 누르면 체크된 항목을 innerHTML로 화면에 출력해줌 -->

        <button onclick="addCheck();">check항목출력</button>

        <div id="print"></div>

    <script>

        //체크박스 체크된 것 버튼누르면 출력하기

        function addCheck(){

            var chs = document.getElementsByName("hobby");

            var print = document.getElementById("print");

            var value="";

            for(var i=0; i<chs.length; i++){

                if(chs[i].checked==true){

                   value+="<h3>"+chs[i].value+"</h3>";

                }

            }

            print.innerHTML=value;

        }

        //체크박스 항상 체크되어있게 설정해놓기

        var checks = document.getElementsByName("hobby");

        console.log(checks);

        for(var i=0; i<checks.length; i++){

            if(checks[i].value=="음주") {checks[i].checked=true;}

            if(checks[i].value=="코딩") {checks[i].checked=true;}

}