[Javascript]HtmlElement의 리턴값 그리고 constructor

var what = document.getElementById('tistoryHead');

에서

console.log(what) 시

<div id="tistoryHead>...</div> 가 출력된다.

그리고

console.log(what.constructor.name)시

HTMLDivElement이 출력되는데 이는 객체의 형태를 띄고 있다.

HTML에서의 Div태그의 앨리먼트 라고 굳이 분류하는 이유는

예를 들어 a태그나 input태그는

href나 type과 같은 속성값들이 들어갈 수 있기 때문에 그것을 수용하기 위해서이다.

예시를 보자

var target = getElementById("TagofA")

라고 하면

HTMLAnchorElemnt라는 객체가 생성되고

target의 리턴값은
Id가 TagofA인 a태그 전체가 되는데

HTMLAnchorElement객체의 속성값인 href를 예시로 사용해 보면

target.href = "www.naver.com"으로 입력시

a태그의 href속성이 바뀌게 된다.

constructor는 생성자 함수라고 한다.

정확하겐 몰라도 what이라는 변수에 관한 객체를 추상적으로 생성하는 역할을 하는 것 같다.

그리고 

var whats = document.getElementsByTagName('div'); 시

수많은 div태그들이 유사배열로 출력되는데

console.log(whats.constructor.name)시

HTMLCollection이 출력된다. 이는 복수엘리멘트라고 한다.

다음 lis는 li태그들을 리턴 받는다.

그리고 그 객체는 HTMLCollection이다.

이것을 console.group을 통해서 콘솔 값을 묶을 수 있는데 (('before')는 묶은 폴더 이름 같은 느낌)

console.groupEnd()직전까지의 콘솔 값을 묶는다. (사용하는 이유는 시각적으로 더 잘 보이게 하려고 하려고)

위의 before값은 li태그가 총 세개 after는 총 두 개 이다.

여기서 중요한 점은 객체가 이미 생성되어졌기 때문에

나중에 다시 불러도 같은 로그가 찍힌다는것!

이들은 모두

HTMLElement의 상속받는 것이다.