23-05-31 T.I.L indexOf로 disply, block / none 활용하기

문제설명

 movie_list.forEach((a) => {
                    const movie_title = a.querySelector("#movie_title").textContent.toLowerCase();

                    if (movie_title.indexOf(search_word) !== -1) {
                        a.setAttribute('display', 'block');
                    }
                    else {
                        a.setAttribute('display','none');
                    }
                })
            }

movie_list는 영화 제목의 리스트다. 이를 querySelector로 영역을 지정하고 textContent / toLowerCase 로 영화제목을 

전부 소문자로 변환시켰다. 그리고 search_word는 검색input의 value다. indexOf는 요소가 변수명에 존재한다면 그 인덱스 번호를 반환하고 없다면 -1을 반환한다. 이를 이용해서 -1이 아니라면 검색 value와 같은 요소가 변수명에 존재한다는 것

그 요소를 setAttribute('display', 'block')으로 속성을 변환시키려 했지만 되지 않았다.

시도

console.log()로 어디에서 값이 이상해졌는지 확인했다. 

if문에 search_word의 값과 !==-1의 true값을 확인했다.

setAttribute()의 문제다. 

해결

setAttribute()에 대한 이해도가 부족했다. setAttribute() 지정된 요소의 속성 값을 설정하고 이미 있는 속성이라면 업데이트해준다. 

 

즉 setAttribute('display', 'block') 의 display는 속성이 아니다.  속성이란 객체 내부의 요소 즉 메모리에 할당된 값을 의미한다. 속성은 이렇게 한 마디로 일축하기 힘들지만 중요한 것은 display는 속성이 아니다.

 

movie_list의 반복함수를 통한 결과 a. 

 

a의 속성 style을 이용해서 해결 할 수 있었다.

 

a.setAttribute("style","display:'block'") 

 

이렇게 수정해서 해결했다.

 

알게된 점

setAttribute()는 속성의 값을 설정한다. CSS와 착각하지 말자.

a.style.display='block'이 훨씬 안정적이고 깔끔하다.(스타일 객체에 엑세스한 방법)