이 블로그는 방문자 통계를 위해 티스토리 기본 기능과 Woopra를 사용합니다. 원하지 않으신다면 사용하시는 웹 브라우저에 내장된 DNT 헤더를 켜고, JavaScript를 끄셔도 무방합니다.
이 블로그 방문자의 약 60%는 네이버 검색을 사용하십니다. 을 이용하시면 더 유용한 정보를 쉽게 얻게 되실 수도 있습니다. [mediatoday]
« 2018/12 »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
블로그 이미지
제가 주제인 블로그... 그냥 주제 없는 블로그입니다. 전공 분야나 예전 관심 분야 등등에 관한 글이 우선입니다만, 두어 문단을 넘길 만한 글이라면 대강 정리해 기록합니다. 학부생입니다. 트위터에서 볼 수 있습니다. http://aurynj.net/ 어­리


"블로그에 새로운 글감을 찾았다."
라기보다는 그냥 가내수공업으로 JS로 이것저것 만드는 도중에 함수를 만들고 있다.

최근에 JS를 새로 익히면서 DOM 따위는 순식간에 이해했지만(이미 XML을 충분히 배운 덕분에),
역시 골치를 썩이는 건 이 함수 놈들.
표준 함수들은 그나마 용법이 잘 정리되어 있지만...
사용자가 만들어서 널리 쓰이는 함수들 때문에 헷갈리기 일쑤다.
확장 함수 이름을 다 똑같이 쓰다 보니 표준 함수인지 헷갈리기 시작하면 2시간 삽질은 기본이다.

그래서 나는 표준 함수 말고 일단 확장 함수들을 정리할 생각이다.
이 글을 읽는 사람이 DOM, 노드 구조 등에 관한 기본 지식이 있는 초보 개발자라고 가정하고,
상세한 설명은 하지 않겠다.


첫 번째 대상은 insertAfter()이다.
이 자식은 표준 함수인 insertBefore()와 비슷하다. insertBefore()의 일반적인 용법은,
"부모 노드".insertBefore("삽입 대상", "대상을 이 앞에 넣을 위치");
이렇다. 이와 비슷하게 insertAfter()는 이런 용법으로 쓰일 목적으로 만들어진다.
insertAfter("삽입 대상", "대상을 이 뒤에 넣을 위치");

insertAfter() 함수는 웹 사이트에 이미 널리 알려져 있는 확장 함수라서,
이와 같은 소스를 찾기 쉽다.
function insertAfter(newNode, referenceNode) {
    document.body.insertBefore(newNode, referenceNode.nextSibling);
}
그리고 나는 이 때문에 "여기 삽질 1시간 추가요!"를 불렀다.

알다시피 위 함수는 insertBefore()를 사용한다.
대상 노드 뒤에 끼워야 하기 때문에, 이 때 대상 노드의 뒤 노드를 찾아 앞에 끼우는 것이다.
그러나 내가 위 함수의 문제를 발견한 까닭은, 내가 마지막 노드 뒤에 끼우려 했기 때문이다.
마지막 노드에는 다음 형제 노드(.nextSibling)가 없다.
그럼 위 명령 자체가 성립이 안 되고 작동도 당연히 불가능하다.

따라서 위치 참조 노드가 마지막 노드인지 알아보고,
마지막 노드인 경우에는 노드를 뒤에 추가(append)해야 한다.
function insertAfter(newNode, referenceNode) {
    refParentNode = referenceNode.parentNode;
    if (referenceNode != refParentNode.lastChild)
        refParentNode.insertBefore(newNode, referenceNode.nextSibling);
    else
        refParentNode.appendChild(newNode);
}

보다시피 참조된 노드가 마지막 노드가 아니라면 위의 경우를 그냥 적용하면 된다.