JavaScript 04. 요소 가져오기 (접근하기)

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

 

 아이디를 이용해서 요소 가져오기  : document.getElementById("아이디명")

-아이디로 접근해서 버튼 클릭시 div 의 속성값 변경하기 

 <style>
        .area{
            border:1px solid black;
            width:300px;
            height: 100px;
        }
    </style>
    <div id="area1" class="area"></div>
    <button onclick="accessId();">아이디로 접근</button>
    <script>
        function accessId(){
          
            const area1 = document.getElementById("area1");        
            // 선택한 요소의 속성값 가져오거나 변경 가능
            area1.innerHTML += "아이디로 접근 성공! <br>"; //복합연산자 사용해서 기존값에 더하기

            area1.style.backgroundColor ="green";
            area1.style.color = "white";
            area1.style.width = "200px";
            area1.style.height = "200px";
              
        }
    </script>

- 조건문이용해서 속성값 변경

<div id="area2" class="area" style="background-color: red;"></div>
    <button onclick="changeColor();">클릭</button>

    <script>
        function changeColor(){
            const area2 = document.getElementById("area2");
            if(area2.style.backgroundColor == "red"){
                area2.style.backgroundColor = "gold";
            } else{
                area2.style.backgroundColor = "red";
            }
        }
    </script>

> 조건문을 이용해서 red 색상이면 gold로 , red가 아니면 red로 변경하도록 함 

 

---

 태그명을 이용해서 요소가져오기 : document.getElementsByTagName("태그명")

<ul>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
        <li>목록4</li>
        <li>목록5</li>
    </ul>
    <button onclick="accessTagName();">태그명으로 접근</button>
    <script>
        function accessTagName(){  
            const list = document.getElementsByTagName("li"); // [li요소객체,li요소객체,...]

            console.log(list, typeof(list));
            console.log("배열의 크기 (선택된 li요소 갯수) ;", list.length);
            console.log(list[0]);
          
            list[0].innerHTML = "배고파";  // 인덱스까지 접근해서 요소객체에 실행해야됨
            
            let blueColor = 50;
            for(let i=0;i<list.length;i++){
                list[i].innerHTML = "배고파";
                list[i].style.backgroundColor = "rgb(30,30,"+ blueColor + ")";
                blueColor += 50;
            }
        }

    </script>

  > 반환값이 [배열]에 담겨 있기 때문에 바로 .innerHTML과 같은 함수 사용할 수 없음
   ( 인덱스에 접근해서 사용)

• 목록1
• 목록2
• 목록3
• 목록4
• 목록5

---

 name 속성값을 이용해서 요소 가져오기 

 <form action="test.do">
        <fieldset>
            <legend>취미</legend>
            <input type="checkbox" name="hobby" value="game" id="game">
            <label for="game">게임</label>
            
            <input type="checkbox" name="hobby" value="movie" id="movie">
            <label for="movie">영화</label>
            
            <input type="checkbox" name="hobby" value="reading" id="reading">
            <label for="reading">독서</label>
            
            <input type="checkbox" name="hobby" value="sports" id="sports">
            <label for="sports">운동</label>
        </fieldset>
    </form>
    <br>
    <div id="area3" class="area"></div>
    <button onclick="accessName();">name으로 접근</button>
    <script>
        function accessName(){
  
            const hobby = document.getElementsByName("hobby");// [input요소 객체,input요소객체,..];
            const area3 = document.getElementById("area3");
            
            area3.innerHTML = ""; //초기화
           
            for(let i=0;i<hobby.length;i++){
                if(hobby[i].checked){
                    area3.innerHTML += hobby[i].value + "<br>";
                }
            }
        }
    </script>

> 선택된 요소들이 담겨있는 배열이 반환되기 떄문에 각 인덱스에 접근한후,
    조건문으로 checked된 value값을 출력  

취미

게임 영화 독서 운동

---

클래스를 이용해서 요소가져오기 : document.getElementsByClassName("class속성값") 
  >  배열로 반환 

  <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();">class로 접근</button>
    
    <script>
        function accessClass(){
            const arr = document.getElementsByClassName("test"); //[div,p,ul,pre]

            for(let i=0;i<arr.length;i++){
                console.log(arr[i]);
                arr[i].innerHTML= "집에가고싶다"
           }
        }
    </script>

> 배열에 담긴 div, p,ul,pre요소의 텍스트를 변경 하기

---

 선택자를 활용해서 요소 가져오기(내가 원하는 요소를 자유롭게 선택)

: document.querySelector("선택자") - 선택된요소객체 하나만 반환
   document.querySelectorAll("선택자") - 선택된 요소객체들이 담겨있는 배열 반환

  <div id="test1">테스트입니다.</div>
    <div class="test2">
        <h2>안녕</h2>
        <h2>디지몬</h2>
        <span>ㅋㅋㅋ</span>
    </div>
    <span>ㅎㅎㅎ</span>
    <h2>바이</h2>
    <button onclick="accessSelector();">선택자로 접근</button>
    
    <script>
        function accessSelector(){
          
            const divEl = document.querySelector("#test1");// div 요소객체
	        const h2El = document.querySelectorAll(".test>h2"); //[h2요소객체,h2요소객체]
            const spanEl = document.querySelector(".test+span"); //동위선택자 span요소 객체

            console.log(divEl.innerHTML);
           
            for(let i=0;i<h2El.length; i++){
                console.log(h2El[i].innerHTML);
            }
            console.log(spanEl.innerHTML);
        }
    </script>

> 에밋(Emmet)문법 이용해서 요소선택 가능 

테스트입니다.

안녕

디지몬

ㅋㅋㅋ

ㅎㅎㅎ

바이