[JS] 요소 가져오기

요소 가져오기

• html 요소에 접근하기 (해당 요소객체 가져오기)
• 특정 요소의 값을 가지고 온다거나 변경하고자 할때는 먼저 해당 요소객체를 가지고와서, 변수에 저장하는 과정이 필요하다

1. ID로 가져오기 (getElementById)

• document.getElementById("아이디명");
• 가져온 요소의 속성들에 접근해서 값을 가져온다거나 변경 가능
• 속성에 접근하고자 한다면 => 선택된 요소.접근하고자하는 속성명
• 속성에 접근해서 스타일을 변경하면 인라인방식으로 스타일이 부여됨 (가장 먼저 실행됨)

<div id="area2" class="area" style="background-color: red;"></div>
    <button onclick="accessId2();">클릭마다 색상변경</button>

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

            console.log(area2.style.backgroundColor);

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

2. 태그명으로 접근하기 (getElementsByTagName)

• document.getElementsByTagName("태그명")
• 주의사항 : element 에 ‘s' 가 붙음
• 선택된 여러개의 요소객체들은 배열에 담겨서 반환
  • 자바스크립트에서의 배열은 []로 표현
  • 인덱스 순서는 0부터 시작, 작성 순서와 같음

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

            console.log(list);
            console.log("배열의 크기(선택된 li의 갯수) : "+list.length);
					
            // 배열 값 바꾸고자 하면
            //list[1].innerHTML = "안녕하세요";

            let blueColor = 50;

            for(let i =0; i<list.length; i++){
                list[i].innerHTML = "안녕하세요"+(i+1);

                list[i].style.backgroundColor = `rgb(130 , 220, ${blueColor})`;
                blueColor += 50;
            }
        }
		</script>

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

• document.getElementsByName("name속성값")
• 선택된 요소객체들이 배열에 담겨서 반환

<form action="test.do">
    <input type="checkbox" name="hobby" value="game" id="game"><label for="game">게임</label>
    <input type="checkbox" name="hobby" value="music" id="music"><label for="music">음악</label>
    <input type="checkbox" name="hobby" value="hiking" id="hiking"><label for="hiking">등산</label>

    <button type="button" onclick="accessName();">name으로 접근</button>
    //form태그 안에 있으면 기본 타입이 submit, 버튼 타입으로 변경해줘야함
</form>

<script>
        function accessName(){
         
            const hobby = document.getElementsByName("hobby"); // 길이 3

            let checkboxItem = "";

            for(let i =0; i<hobby.length; i++){
                if(hobby[i].checked){
                    checkboxItem += hobby[i].value +"<br>";
                }
            }
            document.getElementById("area3").innerHTML = checkboxItem;
        }
    </script>

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

• documents.getElementsByClassName("class속성값");
• 선택한 요소들을 객체배열로 담아서 반환

<div class="test"></div>
<p class="test"></p>
<pre class="test test1"></pre>

    <button onclick="accessClass();">class로 접근</button>

    <script>
        function accessClass(){

            const arr = document.getElementsByClassName("test");
						//클래스명에 test가 포함되어 있으면 모두 가져옴

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

5. querySelector

• css 선택자를 활용하여 html 요소를 선택해오는 함수 (반환값이 한개)
  • 좀 더 세밀하게 요소를 가져올 수 있음 (체크된 상태의 값 등등)
• querySelectorAll : 반환값이 여러개

const element = document.querySelector("#myElement");