JS | 부모 노드, 자식 노드 선택

<ul>

      <li> <a></a> </li>

      <li> <a></a> </li>

</ul>

- a 의 부모는?  li

- 첫번째 li와 마지막 li는 형제 관계

---

노드 간 부모, 자식을 선택하는 키워드

기능	설명
childNodes	모든 자식 노드 선택 단 , 노드에 생략된 text 도 포함된다
children	모든 자식 노드 선택
parentElement	부모노드 선택
nextElementSibling	다음 형제 노드 선택
previousElementSibling	이전 형제 노드 선택
firstChild	첫번째 자식 노드 선택
lastChild	마지막 자식 노드 선택

 

console.dir(매개값);

해당 키워드로 어떤 속성을 얻을 수 있는지 알려줌!

 

보통 element가 붙은 키워드를 사용

 

html ↓↓↓

    <table >
        <thead>
            <tr>
                <th>이동</th>
                <th>번호</th>
                <th>이름</th>
                <th>내용</th>
                <th>날짜</th>
            </tr>

        </thead>

        <tbody class="table">
        <tr>
            <td><button onclick="down(this)">↓</button><button onclick="">↑</button></td>
            <td>1</td>
            <td>홍길자</td>
            <td>안녕!</td>
            <td>2019-01-01</td>
        </tr>
        <tr>
            <td><button onclick="down(this)">↓</button><button onclick="">↑</button></td>
            <td>2</td>
            <td>이순신</td>
            <td>반가워</td>
            <td>2019-02-01</td>
        </tr>
        <tr>
            <td><button onclick="down(this)">↓</button><button onclick="">↑</button></td>
            <td>3</td>
            <td>이순신</td>
            <td>반가워</td>
            <td>2019-02-01</td>
        </tr>
        <tr>
            <td><button onclick="down(this)">↓</button><button onclick="">↑</button></td>
            <td>4</td>
            <td>이순신</td>
            <td>반가워</td>
            <td>2019-02-01</td>
        </tr>
        <tr>
            <td><button onclick="down(this)">↓</button><button onclick="">↑</button></td>
            <td>5</td>
            <td>이순신</td>
            <td>반가워</td>
            <td>2019-02-01</td>
        </tr>
        </tbody>
    </table>

 

//* 동일한 이벤트 걸어주는 방법!
//방법1 >> 인라인 이벤트로 동일한 이벤트 걸어주기
//방법2 >> 버튼을 배열로 얻어와서 반복을 돌려 이벤트를 걸어주기
function down(x){
            console.log(x); //x는 자기자신 태그 <button onclick="down(this)">↓</button>
            
            //* 부모님을 가리키는 키워드 (부모님 포함한 자기자신까지)
            console.log(x.parentNode); //부모태그 (공백이 있다면, 공백을 선택)
            console.log(x.parentElement); //부모태그 (순수한 태그의 형태만 선택)
            //↑ parentElement 위 키워드를 자주 사용

            //* 해당 키워드로 어떤 속성을 얻을 수 있는지 알려줌
            console.dir(x);

            //* 다음 형제
            console.log(x.parentElement.nextElementSibling); //<td>1</td>
            console.log(x.parentElement.nextElementSibling.nextElementSibling);//<td>홍길자</td>

            //* 이전 형제
            console.log(x.parentElement.previousElementSibling); //null

            console.log(x.parentElement.parentElement.firstElementChild); //tr기준 첫번째 자식태그
            console.log(x.parentElement.parentElement.lastElementChild); //tr기준 마지막번째 자식태그

            console.log(x.parentElement.parentElement.children[2]); //자식들 중 3번째

}

 

insertBefore(삽입노드, 기준노드) : 기준노드 앞에 삽입노드 추가

예제 ) insertBefore을 이용하여 태그를 이동해보기

function down(x){
            var current = x.parentElement.parentElement; //버튼의 부모행 (tr) //현재위치
            var next = current.nextElementSibling; //tr의 다음행 //현재위치의 다음위치

            console.log(current);
            console.log(next);

            if(next == null){
                alert("마지막 행입니다.");
                return; //함수 종료
            }

            //insertBefore는 동작시킬 태그의 부모태그를 얻습니다.
            var table = document.querySelector(".table");
            table.insertBefore(next,current); //current(현재위치)앞에 next(현재위치의 다음꺼)를 넣는다. 

        }
        
        
  function up(x){
            var current = x.parentElement.parentElement;
            var prev = current.previousElementSibling;

            if(prev == null){
                alert("첫번째 행입니다.");
                return;
            }

            var table= document.querySelector(".table");
            table.insertBefore(current,prev);
        }