[자바스크립트] parentNode 와 children 을 이용한 부모/자식 객체 접근

 

<ul>
<li id="tab_1" class="on" onclick="tabClick(1);">가</li>
<li id="tab_2" onclick="tabClick(2);">나</li>
<li id="tab_3" onclick="tabClick(3);">다</li>
<li id="tab_4" onclick="tabClick(4);">라</li>
</ul>

 

가,나,다,라 를 각각 클릭할때 클릭한 탭은 활성화 시키고 그렇지 않은 나머지 탭은 비활성화 시키기 위해서 통상 다음과 같은 javascript 메소드를 작성합니다.

 

<script type="text/javascript">
function tabClick(n)
{
    var i;
    for (i = 1; i < 5; i++) document.getElementById('tab_'+i).className = '';
    document.getElementById('tab_'+n).className = 'on';
}
</script>

 

매우 간단합니다.

그런데 ul 안을 보면 id를 모두 지정해 주었고 tabClick 메소드에서는 탭의 갯수를 미리 지정해 주었습니다.

나무랄데 없이 깔끔합니다.

 

위와 같이 동작하는 탭을 더 심플하게 처리하면서 유연한 방법이 있습니다.

각각의 태그들, 즉 엘리먼트는 객체로서 접근이 가능합니다.

 

 

 

ID지정없이 부모/자식 객체를 이용한 접근

이 것은 위와 완전히 동일한 동작을 하지만 비교할 수 없을 만큼 유연하며 효율적인 접근입니다.

 

<ul>
<li class="on" onclick="tabClick(this);">가</li>
<li onclick="tabClick(this);">나</li>
<li onclick="tabClick(this);">다</li>
<li onclick="tabClick(this);">라</li>
</ul>

 

<script type="text/javascript">
function checkElement(obj)
{
    var i;
    var tabNum = obj.parentNode.children.length; // 클릭이벤트가 발생한 객체의 부모에 속한 자식 갯수

    for (i = 0; i < tabNum; i++) obj.parentNode.children[i].className = '';
    obj.className = 'on';
}
</script>

 

응용문제

 

<div>
   <span onclick="alert(this.innerHTML);">ABC</span>

   <span onclick="alert(this.parentNode.children[0].innerHTML);">DEF</span>

   <span onclick="alert(this.children[1].innerHTML);"><i>G</i><i>H</i><i>I</i></span>
</div>

 

1) ABC 를 클릭하면 alert 에 뭐라고 뜰까요? ABC

2) DEF 를 클릭하면 alert 에 뭐라고 뜰까요? ABC

3) GHI 를 클릭하면 alert 에 뭐라고 뜰까요? H