[JS] Live collection, Static collection 📑

Live collection은 DOM의 실시간 변경사항에 따라 언제든지 바뀔 수 있고,
Static collection은 DOM의 실시간 변경사항에 따라 바뀌지 않습니다.

 

DOM API(querySelectorAll, getElementsByClassName, getElementsByTagName)를 통해 Element list를 가져올 수 있습니다.

 

'querySelectorAll' method는 'NodeList' 형태로 element list가 반환되고 'Static collection'입니다.

'getElementsByClassName', 'getElementsByTagName' method는 'HTMLCollection' 형태로 element list가 반환되며 'Live collection'입니다.

 

Static collection은 DOM의 실시간 변화에 상관없이 현재의 값을 유지합니다. (querySelectorAll method로 가져온 element list)

Live collection은 DOM이 실시간으로 변함에 따라 현재의 값이 변경됩니다.

 

아래의 예제를 통해 쉽게 이해가 가능합니다.

// Static collection
const itemsByQuerySelector = document.querySelectorAll('li.element')
console.log(`itemsByQuerySelector`, itemsByQuerySelector) // NodeList[...], length: 2

// Live collection
const itemsByClassName = document.getElementsByClassName('element')
console.log(`itemsByClassName`, itemsByClassName) // HTMLCollection[...], length: 2
const itemsByTagName = document.getElementsByTagName('li')
console.log(`itemsByTagName`, itemsByTagName) // HTMLCollection[...], length: 2

console.log('---')

// Create element for append to stack
const elementToAppend = document.createElement('li')
elementToAppend.className = 'element added'
elementToAppend.innerText = 'Item 3'
const stackTarget = document.querySelector('.stack') // Append target
stackTarget.append(elementToAppend)

// After logging
console.log(`itemsByQuerySelector`, itemsByQuerySelector) // NodeList[...], length: 2 
console.log(`itemsByClassName`, itemsByClassName) // HTMLCollection[...], length: 3
console.log(`itemsByTagName`, itemsByTagName) // HTMLCollection[...], length: 3

Step 1 - 'Item 3' 추가 전

// Log result
itemsByQuerySelector NodeList(2) [li.element, li.element]
itemsByClassName HTMLCollection(2) [li.element, li.element]
itemsByTagName HTMLCollection(2) [li.element, li.element]

Step 2 - 'Item 3' 추가 후

// Log result
itemsByQuerySelector NodeList(2) [li.element, li.element]
itemsByClassName HTMLCollection(3) [li.element, li.element, li.element.added]
itemsByTagName HTMLCollection(3) [li.element, li.element, li.element.added]

위 예제와 같이 'Selector 조건'에 해당하는 DOM에 대해 변경이 일어났을 경우 'Live collection(itemsByClassName, itemsByTagName)'은 변경점을 그대로 반영합니다.

하지만 'Static collection(itemsByQuerySelector)'은 method를 실행시킨 시점 그대로의 값을 가지고 있습니다.

 

얼핏 보면 Live collection이 DOM의 변화를 반영해주기 때문에 무조건 좋아 보일 수 있지만 DOM에 변경이 일어날 때 'Selector 조건'을 충족하지 못할 경우 Live collection에서 사라집니다. (앞서 Live collection에 자동적으로 추가된 것과 같이)

 

그러하여 리스트의 item들을 지속적으로 참조할 경우가 있을 때 getElementsByTagName를 사용하여 기본 조건(tag name)을 통해 가져와 DOM의 변화에 상관없이 참조하여 사용할 수 있을 것이라 생각합니다. tag 자체가 변경되는 경우는 거의 없을 정도로 흔하지 않으니까요!

 

결론은 이런 특성을 알고 Selector를 사용하면 예기치 않은 경우를 방지하고, 더욱 최적화된 코드를 작성할 수 있을 것이라고 생각합니다.

 

Source

GitHub - SungeunP/live-collection_static-collection: Live collection과 Static collection의 특성을 테스트