31일차 - 자바스크립트 forEach

밀레·2022년 11월 7일

목록 보기

87/135

1. HTML

<body>
    <ul>
        <li class="cate">네비게이션</li>
        <li class="cate">네비게이션</li>
        <li class="cate">네비게이션</li>
        <li class="cate">네비게이션</li>
        <li class="cate">네비게이션</li>
    </ul>
</body>

자바스크립트가 제대로 들어왔나 검수하기 (body에 classList로 클래스 삽입)

2. 자바스크립트

2-1. querySelectorAll

getElementsByClassName('cate') // 정확도 떨어짐
querySelectorAll('ul .cate') // 추천

2-2. li.cate의 두번째 < li >에 'Naver' 삽입 (방법 둘)

document.querySelectorAll('ul .cate')[ 1 ].innerHTML = 'Naver'
데이터 객체로 처리 [배열]
더 DB에 가깝게 잡아냄
document.getElementsByClassName('cate').item( 2 ).innerHTML = '다음'
HTML 객체로 처리 (아이템)
"나는 객체야! array가 아니라고~"
태그로 잡아냄

3. 배열 생성해 < li >들에 삽입 (방법 셋)

(A) for-in 문 (배열 전용 for문)

"naviDATA 배열에서 하나씩 하나씩 빼다가 i 에 넣겠다"
＋
".cate의 i 번째 < li >에.innerHTML = naviDATA[ i ] 삽입" ( querySelectorAll )

(B) for 문 (모든 다중 객체용 구문)

"초기값 0 ; i가 배열 갯수보다 작은 조건 ; 동안 증가하겠다"
＋
".cate의 i 번째 < li >에.innerHTML = naviDATA[ i ] 삽입" ( getElementsByClassName )

(C) forEach ★★ (배열/객체 다 직접 받음)

매개인자 ( 배열array , 순번index )

방법1) naviDATA.forEach( function( 배열el, 순번index )){

	document.getElementsByClassName('.cate').item(index).innerHTML = el
    <!-- ".cate의 index번째 < li >에.innerHTML = el(각각의 cate) 배열 삽입 -->

}

<script>

  const naviDATA = ['네이버', '다음', '구글', '네이트', '11번가'];

  // forEach = 배열 & 객체 다 직접 받음!
              			 //array, 순번
  naviDATA.forEach(function( el, index ){
      document.getElementsByClassName('.cate').item(index).innerHTML = el;
      												// el = 각각의 cate객체
  })   
    
</script>

방법2) querySelectorAll('.cate').forEach( function( 배열el, 순번index ){

	el.innerHTML = naviDATA[ index ];
    <!-- "el(각각의 .cate).innerHTML에 = naviDATA[ index ] 덮어씌움" -->

}

<script>

   const naviDATA = ['네이버', '다음', '구글', '네이트', '11번가'];

    document.querySelectorAll('.cate').forEach(function( el, index ){
        el.innerHTML = naviDATA[index];
    })
    
</script>

4. 실습

이렇게 만들기 (2단 배열)

HTML

    <ul>
        <li class="cate">네비게이션</li>
        <li class="cate">네비게이션</li>
        <li class="cate">네비게이션</li>
        <li class="cate">네비게이션</li>
        <li class="cate">네비게이션</li>
    </ul>

자바스크립트

<script>
  window.onload = function(){

      let naviDB = [
          ['네이버', 'https://www.naver.com/'], 
          ['다음', 'https://www.daum.net/'], 
          ['구글', 'https://www.google.co.kr/'], 
          ['네이트', 'https://www.nate.com/'], 
          ['11번가', 'https://www.11st.co.kr/main']
      ];

      let naviData = '';
      
  // "querySelectorAll로 .cate 잡아.forEach하라(=배열el 생성해 < li >들에 삽입하라)
      document.querySelectorAll('.cate').forEach(function( el, index ){
      // "el(각각의 li.cate)에 innerHTML하라 = <a href="${링크}">${구글}</a> 덮어씌움"
          el.innerHTML = `<a href="${naviDB[index][1]}">${naviDB[index][0]}</a>`;
      })
  }
</script>