[JavaScript] data-xxxxx 속성과 NodeList 반복 주의점

 

 

data-xxxxx 속성

data-xxxxx 속성은 개발자가 목적에 따라 값을 자유롭게 값을 설정할 수 있는 특별한 겂이다. 주로 스크립트(이벤트 리스너)에서 사용하기 위한 파라미터를 삽입하기 위한 속성이다. 'xxxxx' 부분은 알파벳 소문자, 하이픈 밑줄 등의 문자를 사용하여 자유롭게 명명할 수 있다. 사용자 정의 데이터 속성이라고도 한다.

<a href="http://www.naver.com" data-ex="0110">네이버</a>
<a href="http://www.google.com" data-ex="0113">구글</a>

 

 

HTMLCollection/NodeList 반복 처리 주의점

getElementsByTagName/getElementsByName/getElementsByClassName 메소드는 반환값으로서 HTMLCollection 또는 NodeList 객체를 반환한다. 이 객체들은 살아있는(Live) 객체이다. 살아있다는 것은 객체가 문서 트리를 참조하고 있어 문서 트리로의 변경이 있으면 HTMLCollection/NodeList 객체에도 실시간으로 반영된다.

 

다음의 예시 코드는 무한루프가 되는 잘못된 예시이다. li 요소 노드들을 모두 가져오는 li 는 새롭게 생성되어지고 있기 때문에 li.length 가 다시 새롭게 갱신되어 for문이 끝나지 않게 된다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var second = document.getElementById('second');
    var li = document.getElementsByTagName('li');

    for(var i=0; i<li.length; i++) {
        var item = li.item(i);
        var new_li = document.createElement('li');
        var new_text = document.createTextNode(item.textContent);

        new_li.appendChild(new_text);
        second.appendChild(new_li);
    }
}, false);

 

따라서 for문의 조건식을 다음과 같이 바꾸면 루한루프를 방지할 수 있다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    var second = document.getElementById('second');
    var li = document.getElementsByTagName('li');

    for(var i=0, len=li.length; i<len; i++) {
        var item = li.item(i);
        var new_li = document.createElement('li');
        var new_text = document.createTextNode(item.textContent);

        new_li.appendChild(new_text);
        second.appendChild(new_li);
    }
}, false);