JavaScript(요소가져오기)

HTML 요소에 접근하기(해당 요소객체 가져오기)

1. 아이디로 접근하기

    <h1>HTML 요소에 접근하기(해당 요소객체 가져오기)</h1>

    <h3>1)아이디로 접근하기</h3>

    <div class="area" id="area1"></div>
    <button onclick="accessId();">아이디로 접근버튼</button>

    <script>
        function accessId(){
            var area1 = document.getElementById("area1");

            console.log(area1);
            console.dir(area1); //j)어떤요소들이 들어있는지 확인할때

            //선택된 요소에 속성들에 접근해서 값을 가져온다거나 변경 가능
            //속성에 접근하고자 한다면 -> 선택된요소.접근하고자하는 속성명
            area1.innerHTML += "아이디로 접근성공! <br>";

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

 

1-1. 아이디로 접근하기

<div class="area" id="area2" style="background-color: red;"></div>
    <button onclick="accessId2();">아이디로 접근2</button>

    <script>
        function accessId2(){
            var area2 = document.getElementById("area2");

            console.log(area2.style.backgroundColor); //j)어떠한 요소를 가지고 있는지

            if(area2.style.backgroundColor == "red"){
                area2.style.backgroundColor="pink";
            }else{
                area2.style.backgroundColor = "red";
            }
        }
    </script>

---

2. 태그명으로 접근하기

    <h3>2)태그명으로 접근하기</h3>

    <!-- ul>li{목록$}*5 -->
    <ul>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
        <li>목록4</li>
        <li>목록5</li>
    </ul>

    <button onclick="accessTag();">태그로접근버튼</button>

    <script>
        function accessTag(){
            //태그명으로 요서에 접근
            //document.getElementByTagName("태그명");
            //태그는 중복이 가능하기 때문에 배열에 담겨서 반환된다 ( [] )
            var list = document.getElementsByTagName("li"); //[li요소객체,li요소객체,,,]

            console.log(list);
            console.log(list.length); //배열의 크기

            list[0].innerHTML="안녕하세요";
            list[3].innerHTML="반갑습니다";

            for(var i=0; i<list.length; i++){
                list[i].innerHTML="안녕하세요"+(i+1);
            }
        }
    </script>

---

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

<h3>3)name속성값으로 접근하기</h3>
    <form action="">
        <fieldset>
            <legend>취미</legend>
            <input type="checkbox" name="hobby" id="sing" value="sing">
            <label for="sing">노래부르기</label>

            <input type="checkbox" name="hobby" id="game" value="game">
            <label for="game">게임하기</label>

            <input type="checkbox" name="hobby" id="walk" value="walk">
            <label for="walk">산책하기</label>
        </fieldset>
    </form>

    <div class="area" id="area3"></div>
    <button onclick="accessName();">이름으로접근버튼</button>

    <script>
        function accessName(){
            //document.getElementsByName("name속성값")
            var hobby = document.getElementsByName("hobby");

            console.log(hobby);
            var checkedoption="";
            for(var i=0; i<hobby.length; i++){
                if(hobby[i].checked){
                    // console.log(hobby[i].value);
                    checkedoption+=hobby[i].value+"<br>";
                }
            }

            var div3 = document.getElementById("area3");
            div3.innerHTML=checkedoption;
            //한줄표현
            //document.getElementById("area3").innerHTML=checkedoption;
        }
    </script>

---

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

   <h3>4)클래스명으로 접근하기</h3>
    <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(){
            //class 속성으로 요소 가져오기
            //document.getElementByClassName("class속성값")->배열의 형태로 변환
            var arr = document.getElementsByClassName("test");
            console.log(arr);

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

---

5. 원하는 요소 자유자재로 가져오기(선택자 활용)

<h3>5)내가 원하는 요소 자유자재로 가져오기(선택자 활용)</h3>

    <div id="test1">테스트입니다.</div>
    <div class="test">
        <h2>안녕</h2>
        <h2>잘가</h2>
    </div>
    <span>안녕하세요</span>
    <h2>수고하셨습니다.</h2>

    <button onclick="accessSelector();">클릭</button>
    <script>
        function accessSelector(){
            //선택자를 이용해서 요소를 가져오고자 할때
            //document.querySelector("선택자"); -> 선택된 요소 하나만 반환
            //document.querySelectorAll("선택자"); -> 선택죈 요소객체들을 배열에 담아서 반환

            var divEl=document.querySelector("#test1"); //div요소객체
            var h2El=document.querySelectorAll(".test>h2") //[h2요소객체,h2요소객체]
            var spanEl=document.querySelector(".test+span") //spen요소객체
            console.log(divEl);
            console.log(h2El);
            console.log(h2El[0].innerHTML);
            console.log(h2El[1].innerHTML);
            console.log(spanEl);
        }
    </script>