JAVASCRIPT STEP 36 - AXIS

★ AXIS

• 본인을 기준으로 주변의 요소(부모, 자식, 형제)를 검색하는 도구
• HTML 코드

<h1>Axis</h1>
<input type="button" value="버튼" id="btn">

<hr>

<div>
    할아버지
    <div>
        큰아버지
        <div>사촌</div>
    </div>
    <div>
        아버지
        <div>
            큰형
            <div>조카</div>
        </div>
        <div>
            작은형
        </div>
        <div id = "me" class="">
            나
            <div>큰애</div>
            <div>
                둘째
                <div>손자</div>
            </div>
            <div>막내</div>
        </div>
        <div>
            동생
        </div>
        <div>
            막내동생
            <div>조카</div>
        </div>
    </div>
    <div>
        작은아버지
        <div>사촌</div>
    </div>
</div>

• CSS 코드

<style>
    div {
        border : 1px solid black;
        padding : 10px;
        margin : 10px;
    }
    #me {
        outline : 5px solid black;
    }
    .check {
        background-color: gold;
    }
</style>

• 자식 태그
  
  • me.childNodes : 자식 노드들
  • me.firstChild : 첫번째 자식노드
  • me.lastChild : 마지막 자식노드 

document.getElementById('btn').onclick = function() {

    const me = document.getElementById('me');

    //나로부터 다른 사람 검색
    // me.className = 'check'; 

    //자식 태그
    //- me.childNodes : 자식 노드들
    //- me.firstChild : 첫번째 자식노드
    //- me.lastChild : 마지막 자식노드 

    alert(me.childNodes.length); //7명

}

• 자식 태그들
  • me.children
  • me.firstElementChild
  • me.lastElementChild

alert(me.children.length); //3

me.firstElementChild.className = 'check';		//큰애
me.lastElementChild.className = 'check';		//막내

//전체의 친자식을 찾는법
for(let i=0; i<me.children.length; i++){
    me.children[i].className = 'check';
}

//손자
me.children[1].firstElementChild.className = 'check';
me.children[1].children[0].className = 'check';

• 부모 & 조상 태그
  • me.parentNode
  • me.parentElement

//아버지
me.parentNode.className = 'check';	
me.parentElement.className = 'check';

//할아버지
me.parentNode.parentNode.className = 'check';

//body
me.parentNode.parentNode.parentNode.className = 'check'; 

//html
me.parentNode.parentNode.parentNode.parentNode.className = 'check';

//#document > window.document
console.log(me.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName);

//document의 부모 > window :: BOM 모델에서
//document가 최상위 객체 :: DOBM 모델에서

//형제
//큰형
me.parentElement.firstElementChild.className='check';
//작은형
me.parentElement.children[1].className='check';
//동생
me.parentElement.children[3].className='check';
//막내동생
me.parentElement.lastElementChild.className='check';

• 형제
  • 바로 위의 형제
  • me.previousSibling
  • me.previousElementSibling
  • 바로 밑의 형제
  •  me.nextSibling
  • me.nextElementSibling

//작은형
me.previousElementSibling.className = 'check';
//큰형
me.previousElementSibling.previousElementSibling.className = 'check';

 

■ DOM 트리 구성

• DOM 트리 구성 요소(노드)

//- 태그뿐만 아니라 다른 요소도 포함
//- 구성요소 > 태그, PCDATA, 주석, 엔티티, 선언문, 속성 등..
//1. 태그(1)
//2. 속성(2)
//3. PCDATA(3)
//4. 주석(8)
//5. 선언문(13)

• DOM 트리 구성 노드의 프로퍼티

//1. nodeType > 해당 노드가 어떤 형식 > 열거형(숫자)
//2. nodeName > 태그(태그명), 속성(속성명), PCDATA(#text)
//3. nodeValue > 태그(null), 속성(속성값), PCDATA(문자열)

• 실행 ex)

for(let i=0; i<me.childNodes.length; i++) {
    console.log(me.childNodes[i].nodeType, me.childNodes[i].nodeName, me.childNodes[i].nodeValue);
}

• 실행 결과

실행 결과

 

■ 응용 ex)

• HTML 코드

<h1>테이블</h1>

<table class="tbl" id="tbl1">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<h1>테이블2</h1>

<table class="tbl" id="tbl2">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

• CSS 코드

<style>
    td{
        border : 1px solid gray;
        width : 50px;
        height: 50px;
    }
</style>

• JavaScript

<script>

    // 이벤트 <td> 검색
    // document.getElementsByTagName('td');

    const tbl1 = document.getElementById('tbl1');

    //01029920944
    //<table> <tbody> <tr> <td>
    // alert(tbl1.children[0].children.length);

    for (let i=0; i<tbl1.children[0].children.length; i++) {
        const tr = tbl1.children[0].children[i];

        for (let j=0; j<tr.children.length; j++) {

            //<td>
            tr.children[j].onmousedown = function() {
                event.target.bgColor = 'gold';
            }
        }
    }

    const list = document.querySelectorAll('#tbl1 td');

    alert(list.length);

</script>