태그 생성 문법과 객체, 배열의 반복문(forEach, for...in, for...of)

 

코딩애플님의 강의를 보다가 유용하게 쓰일 것 같아서 정리해보았다.

(노션에 정리하니까 잘 안들어간다... 그냥 티스토리에 써야지)

 

지금 원하는 작업은 select 태그 안의 option 태그를 싹 갈아치우는 것이 목적이다.

강의에서는 jQuery를 주로 쓰는데, 

jQuery의 append( )를 javascript는 어떤 메서드를 써야 하는지...! 

(앗 그리고 jQuery의 append( ) 기능으로 무한 스크롤을 만들 수 있다고 한다.)

 

바닐라 자바스크립트에 appendChild, innerHTML 이것저것 써서

append 를 대신할 것을 넣어보았는데 잘 되지않았다.

appendChild는 하나의 요소만 추가가 가능하며, DOM string은 추가가 안되더라.

 

 

const div = document.createElement('div');

부모 셀렉터.appendChild(div);  // 이런 식으로 태그를 추가한뒤

div.innerHTML = '내용';               // div태그 안에 내용을 작성한다.

 

 

상품 선택하면, 해당 상품에 따라 알맞는 사이즈표가 나오게 하는 부분은

insertAdjacentHTML를 써서 해결했다.

(모자 선택 시, 사이즈표 X)

(상의 선택 시, 90, 95, ...)

(하의 선택 시, 28, 29, ...)

 

 

---

 

🌳 태그를 생성해주는 문법

• 셀렉트.createElement(추가할 html 태그); 

  →  태그를 생성하는 문법

 

• 부모셀렉트.appendChild(추가할 태그를 담은 변수명); 

  →  부모 태그 안에 자식 태그를 추가해주는 문법

<div id='test'>
  <!-- 여기에 p태그가 추가 됨 -->
</div>

<script>
  const p = document.createElement('p');
  p.innerHTML = 'div 안에 p태그 추가됨';
  document.querySelector('#test').appendChild(p);
</script>


<!-- 결과 -->
<div id='test'>
  <p>div 안에 p태그 추가됨</p>
</div>

 

 

• 셀렉트.insertAdjacentHTML('위치', html string); 

  →  여기서 셀렉트는 부모가 되는 태그를 의미함.(이 셀렉트 안에 자식태그를 추가할 것임)

  →  부모 태그의 안의 원하는 위치에 <p>안녕</p> 형태로 자식 태그를 추가해주는 문법

<div id='test'>
  <!-- 이자리에 p태그 넣어야징 -->  
</div>

<script>
  let template = '<p>id가 test인 div 안에 추가할거임</p>'
  document.querySelector('#test').insertAdjacentHTML('beforeend', template);
</script>

<!-- 결과 -->
<div id='test'>
  <p>id가 test인 div 안에 추가할거임</p>
</div>

 

 

 

 

🌳 배열과 객체를 편리하게 반복해주는 반복문

• 배열.forEach( ); 

→  간단히 배열의 갯수만큼 자료를 반복할 수 있다.

// 과일을 담아둔 배열
let fruits = ['사과', '수박', '딸기', '망고'];
fruits.forEach(() => {
  console.log('과일!'); // '과일!' 이 4번 출력 됨
});



// 콜백함수 안에 파라미터 넣으면 반복문을 돌 때마다
let fruits = ['사과', '수박', '딸기', '망고'];
fruits.forEach((a, b) => {
  console.log(a, b);
});

// 데이터 정수(0부터 1씩 증가함)
// 사과   0
// 수박   1
// 딸기   2
// 망고   3

 

 

• for (let key in 객체 );

→  객체의 속성명(key)에 접근하여 순회하기 위해 사용되는 반복문이다.

→  객체의 key 값에는 직접 접근 가능, but 속성값에 접근하려면 object[key] 해야함.

→  단, for...in문은 순서가 보장 되지 않는다.

→  length 연산자 사용이 불가능하다.

→  속성값은 string이라 연산이 불가능하다.

const me = {
  name: minji,
  age: 26,
}


// 속성 이름을 전부 불러온다.
for(let key in me){
  console.log(key); // name, age 반환
}


// 속성 값을 전부 불러온다.
for(let key in me){
  console.log(me[key]); // minji, 26 반환
}

 

 

• for ( variable of iterable ); 

→  variable : 각 반복에 서로 다른 속성값이 variable에 할당 된다.

→  iterable : 반복되는 열거가능(enumerable)한 속성이 있는 객체.

→ 반복 가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고

      각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

// Array에 대해 반복
let iterable = [10, 20, 30];

for(let value of iterable){
  console.log(value);
}

// 10
// 20
// 30

// String에 대해 반복
let iterable = "hello";

for(let value of iterable){
  console.log(value);
}

// "h"
// "e"
// "l"
// "l"
// "o"

// DOM 컬렉션에 대해 반복
let clickThis = document.querySelectorAll('clickList li');

for(let clickListBox of clickThis){
    clickListBox.addEventListener('click', 클릭하면 벌어질 일에대한 콜백함수);
}

 

 

---

 

✔ 결과 화면

  •  무슨 일인지 모르겠으나 style태그안에 form-hide를 display: none; 하니까 티스토리 블로그의 코드창이 이상해진다.

  •  이 부분은 다시 수정해서 올려봐야겠다. (수정 완료: 어딘가 오탈자가 났었나보다...)      

상품선택

모자 셔츠 바지

 

✔ 코드

<form class="container">
  <h2>상품선택</h2>
  <select class="select-list">
    <option class="hat">모자</option>
    <option class="shirts">셔츠</option>
    <option class="pants">바지</option>
  </select>
  
  <select class="select-list form-hide">
    <!-- 사이즈 데이터 -->
  </select>
</form>



<script>
  let selectList = document.querySelectorAll('.select-list');
  let shirts = document.querySelector('.shirts');
  let pants = document.querySelector('.pants');

  let pantsSize = ['사이즈 선택', 28, 29, 30, 31];
  let shirtsSize = ['사이즈 선택', 90, 95, 100, 105];


  selectList[0].addEventListener('input', function(e){
    e.currentTarget;

    // 셔츠를 선택하면, 셔츠 사이즈표 보여조
    if(this.value == '셔츠'){
      selectList[1].classList.remove('form-hide');
      selectList[1].innerHTML = '';

      shirtsSize.forEach((size) => {
        selectList[1].insertAdjacentHTML('beforeend', '<option>' + size);
      }); 
    }
    

    // 모자 선택하면, 사이즈표 숨겨조
    else if(this.value == '모자'){
      selectList[1].classList.add('form-hide');
    }


    // 바지 선택하면 옵션으로 28, 29, 30 나오게 만들기
    else if(this.value == '바지'){
      selectList[1].classList.remove('form-hide');
      selectList[1].innerHTML = '';

      pantsSize.forEach((size) => { // size는 배열안에 들어있는 데이터임
        selectList[1].insertAdjacentHTML('beforeend', '<option>' + size);
      });
    }
    
  });
</script>

 

 

 

📚 참고 자료

• 코딩애플 JS 강의

• MDN (https://developer.mozilla.org/ko/docs/Web/API/Element)

•https://joooing.tistory.com/entry/Iteration2-for-in%EB%AC%B8-for-of%EB%AC%B8

•https://n-log.tistory.com/39