lastElementChild 프로퍼티

<table border="1"> 
        <tr> 
            <th>번호</th> 
            <th>제목</th> 
            <th>작성자</th> 
        </tr> 
        <tr> 
            <td></td> 
            <td></td> 
            <td></td> 
        </tr> 
  </table>

테이블의 객체 정보를 table 변수에 얻고 table.lastElementChild.firstElement 프로퍼티의 값을 찍어보면 어떤 엘리먼트가 담길까? 코드만 보면 td가 나올 것 같지만 크롬 브라우저에서 개발자 모드를 켜고 확인해보면 생각과 다르다.

 

 

tbody 태그가 추가되어 있어 console.log로 찍어보면 다음과 같은 결과가 나온다.

 

 

td 태그에 텍스트를 넣는 것이기 때문에 구하려고 했던 태그가 아니다. tbody를 고려해서 td 태그를 얻어야 한다. 다음과 같이 해도 되고, 

var tbody = section.querySelector("table tbody");
var td = tbody.lastElementChild.firstElementChild;

 

아래처럼 해도 된다. 의도한 결과값이 안 나왔을 때 엘리먼트 노드를 제대로 얻었는지 콘솔에 찍어보고 개발자 도구를 통해 미처 파악하지 못한 부분이 있는지 확인하자.

var table = section.querySelector("table");
var td = table.querySelector("tr:last-child>td:first-child");