부모태그, 자식태그 선택 children[i], parentNode, Array.from()

//예시 html
<table>
	<tbody>
		<tr>
    		<td>hello</td>
    	</tr>
	</tbody>
</table>



//children[index] 자식 태그 선택
<script>
	const $table = document.querySelector('table');
    const $tbody = $table.children[0];				//HTMLCollection [tbody]
    const $tr = $table.children[0].children;
	const $td = $table.children[0].children[0].children[0];
    const hello = $table.children[0].children[0].children[0].textContent;
</script>

//parentNode 부모 태그 선택
<script>
	const $td = document.querySelector('td');
    const $tr = $td.parentNode;
    const $table = $tr.parentNode.parentNode; //tbody가 존재하기에 두 번 작성
</script>

위와같이 자식선택자 사용시 리턴값은 배열처럼 보이는 유사 배열 객체(array-like object)를 리턴하는데,,,,

유사배열에 indexOf() 메서드를 사용하기 위해선
배열로 변경해줘야 한다.

<table>
	<tr>
    	<td>1<td>
        <td>2<td>
        <td>3<td>
    </tr>
</table>


<script>
	const $tr = document.querySelector('tr');
    const ArraylikeObj = $tr.children;			//HTMLCollection(6) [td, td, td, td, td, td]
    const $tdArr = Array.from($tr.children);	//(6) [td, td, td, td, td, td]
</script>

리턴되는 값을 보면 차이를 알 수 있다.
배열을 리턴하는 경우 (length)를 표시한다.