JAVASCRIPT html코드를 가져와 객체로만들고 리스트화하기

먼저 nodeList 와 Array의 차이를 알아보자

 

nodeList

html태그를 불러오기 위해 document.querySelectAll로 가져오면 배열형식으로 값이 반환되는데
이 배열이 nodeList라고 한다 
console.log(document.querySelectorAll('.human'))

 

출력결과를 보자

노란 형광팬 친곳을 펼쳐보면 nodeList가 가지고 있는 함수들이 보인다 forEach등 보이는 함수 안에서만 사용이 가능한 반면 array는 많은 함수를 가지고 있고 범용성이 좋아 querySelectorAll로 가져오게되면 Array로 형변환 해주는것도 좋아보인다.

 

Array

기본적으로 스크립트에서 배열을 만들거나 querySelectorAll로 가져온 nodeList를 Array.from을 이용하여 형변환 할 수 있다.

 

일반적으로 스크립트안에서 Array생성시 코드는 이러하다

        const arr = [
            {name: '이지은', age: 31},
            {name: '홍진호', age: 42},
            {name: '코난', age: 10},
            {name: '나단비', age: 5},
        ]
        스크립트안에서 배열 생성시 자동으로 Array타입이다

 

nodeList를 Array로 변환하고 객채 리스트를 만들어 저장해보자

HTML 코드

    <div id="root">
        <div class="human">
            <div class="name">유재석</div>
            <div class="age">50</div>
        </div>
        <div class="human">
            <div class="name">신동엽</div>
            <div class="age">51</div>
        </div>
        <div class="human">
            <div class="name">강호동</div>
            <div class="age">52</div>
        </div>
    </div>

 

SCRIPT코드

        // 태그를 읽어서 자바스크립트 배열로 변환하고 각각 출력하기
        function convert(humanList) {   // nodeList 는 배열이 아니라 함수가 부족함
            const arg = Array.from(humanList)   // nodeList -> Array
            const t = arg.map(element => {      // Array.map(기존 요소로 새로운 배열 구성)
                const ob = {
                    name: element.querySelector('.name').innerText,
                    age: +element.querySelector('.age').innerText
                }
                return ob
            })
            return t    // 새로운 배열을 반환
        }

        console.log(document.querySelectorAll('.human'))

        const humanList = document.querySelectorAll('.human')
        const humanArray = convert(humanList)

        console.log(humanArray)

 

출력결과

위에서 봤던 nodeList와 달리 많은 함수를 가지고 있으며 맨밑의 코드 예시에서 사용된 map 이란 함수를 확인 할 수 있다

 

내가 forEach같은 간단한 함수만 사용할거 같으면 nodeList에서 Array로 형변환할 필요가 없지만 map이나 많은 함수를 사용하고 싶다면 꼭 Array로 형변환하여 원하는대로 조작하자.