0531_TIL_setAttribute, HTMLCollection

Element.setAttribute()

 

사용방법 :

setAttribute(name, value)

const temp = document.createElement('div');
    temp.setAttribute('class', 'movie-list');
    temp.setAttribute('id', `${index}`);

자바스크립트 상에서 HTML 태그에 id나 class 값을 만들어 줄 수 있다.

 

Element.setAttribute() - Web API | MDN

 

 

유사배열 HTML

아래의 블로그를 보고 참고 했다!

[JavaScript]HTMLCollection과 NodeList 차이점

  let title = document.getElementsByClassName('card-title'); //모든 영화 제목 HTML 가져오기, HTMLCollection

위의 코드를 작성하고

콘솔에 title을 찍어보면

HTMLCollection이라는 배열같이 생겼지만 배열이 아닌 것이 확인된다.

 

그래서!!!!

map, forEach, filter, find 모두 사용할 수 없다...

 

물론 반복문을 돌리기 위해 for of를 사용하면 되지만

과제 필수사항에 배열 메소드를 2가지 이상 사용하는 부분이 있어서

HTMLCollection을 꼼수로 배열로 반환 하는 방법을 찾았다..!

 

function array(x) {
    let array = [];
    for (const a of x) {
      let title = a.innerText.toLowerCase();
      array.push(title);
    }
    return array;
  }

1. 빈 배열 만들기

2. for of를 이용해서 유사배열을 반복시키기

3. 유사배열에서 사용할 부분인 innerText만 변수에 담기

4. 빈 배열에 push로 하나씩 넣어주기

5. push로 채워진 배열 반환하기

 

다행히 내가 필요한 부분은 innerText 뿐이라 해당 방법으로 해결을 하긴 했다..!

조금 조잡한 느낌이 있지만... 기능하는 것에 만족...

 

이게 다.. fetch로 불러온 데이터를 전역변수로 사용하지 못해서 벌어진 일이다...

 

fetch 사용법을 더 검색해 봐야겠다...