[JavaScript] 요소에 접근하기

HTML 요소에 접근하기

   : 해당 요소 객체를 가져온다.

 

1. 아이디로 접근하기

   : 선택된 요소의 속성들에 접근하여 속성값을 가져오거나 변경할 수 있다.

  - 선택된 요소.접근할 속성명

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

    <button onclick="accessId();" id="divE1">접근</button>
    <script>
        function accessId(){
            var divE1 = document.getElementById("divE1");

            // 선택된 요소에 속성들에 접근하여 값을 변경
            divE1.innerHTML += "아이디로 접근<br>";

            // 선택된 요소에 스타일 변경
            divE1.style.width = "100px";
            divE1.style.height = "100px";
            divE1.style.backgroundColor = "yellow";
        }
    </script>

 

 

 

2. 태그명으로 접근하기

   : 태그는 중복이 가능하여 배열에 담겨서 반환된다.

  - document.getElementByTagName("태그명");

<ul>
    <li>목록1</li>
    <li>목록2</li>
    <li>목록3</li>
    <li>목록4</li>
    <li>목록5</li>
</ul>
    
    <button onclick="accessTag();">접근</button>
    <script>
        function accessTag(){
            var list = document.getElementsByTagName("li");  // [li요소객체, li요소객체, ...]

            for(var i = 0; i < list.length; i++){
                list[i].innerHTML = "눈치게임" + (i + 1);
            }
        }
    </script>

 

 

 

3. name 속성값으로 접근하기

    : document.hetElementsByName("name속성값");

<form action="">
        <fieldset>
            <legend>취미</legend>
            <input type="checkbox" name="hobby" id="sing" value="sing">
            <label for="sing">노래 부르기</label> 
            <br>
            <input type="checkbox" name="hobby" id="game" value="game">
            <label for="game">게임하기</label>
            <br>
            <input type="checkbox" name="hobby" id="health" value="health">
            <label for="health">운동하기</label>
        </fieldset>
    </form>
    <div class="area" id="divE3"></div>
    <button onclick="accessName();">접근</button>
    <script>
        function accessName(){
            var hobby = document.getElementsByName("hobby");

            var checkedoption = "";  // 초기화
            
            for(var i = 0; i < hobby.length; i++){
                if(hobby[i].checked){
                     checkedoption += hobby[i].value + "<br>";
                }
            }
            var divE3 = document.getElementById("divE3");
            divE3.innerHTML = checkedoption;
        }
    </script>

 

 

 

4. 클래스명으로 접근하기

   : document.getElementsByClassName("class속성값");

<div class="test"></div>
    <p class="test"></p>
    <ul class="test">
        <li></li>
        <li></li>
    </ul>
    <pre class="test test1"></pre>
    <button onclick="accessClass();">접근</button>
    <script>
        function accessClass(){
            var arr = document.getElementsByClassName("test");  // 배열 형태로 반환된다.

            for(var i = 0; i < arr.length; i++){
                console.log(arr[i]);
            }
        }
    </script>