[JavaScript] 엘리먼트에 접근하기 (배열&반복문)

1. Element에 접근하기

document.querySelector("#name").value = 'name' 를 id로 갖는엘리먼트의 value 값
document.querySelector('a') = a 태그에 해당하는 첫번째 엘리먼트만 가져옴
document.querySelectorAll('a') = a 태그에 해당하는 모든 엘리먼트 속성에 접근 (해당 엘리먼트를 배열로 가져온다)
=> 반복문과 배열을 사용해 여러 태그에 접근할 수 있다는 장점이 있다. 

 

*기타 접근자 : 역할은 queryselector 와 똑같지만 #,. 같은 구분자 없이 사용 가능하다

.getElementsById('id') 

.getElementsByTagName('tag')

.getElementsByClassName('tag')

 

2. 배열과 반복문

접근하려는 엘리먼트가 여러번 선언되어 있을 때 배열로 가져올 수 있다.

예) a태그를 가진 엘리먼트의 폰트 색상을 '모두' 주황색으로 바꾸고 싶을 때

    <ul>
        <li><a href="#">산딸기</a></li>
        <li><a href="#">청포도</a></li>
        <li>부사</li>
        <li><a href="#">블루베리</a></li>
        <li>찰토마토</li>
    </ul>

<script>

var alist = document.querySelectorAll('a'); <!-- a 태그에 해당하는 속성을 배열에 저장 = 총 3개 값 가진 배열-->

var i = 0;

while(i<alist.length){  <!--반복문 실행-->

  alist[i].style.color="orange";<!--결과: 부사/찰토마토 제외 글자색 주황색으로 변경-->

i=i+1; }
</script>