바스키아
요소 추가하기 about HTMLElement (feat. appendChild()) 본문
HTML은 사실 공부할필요가 거의 없다고 느꼈는데 아니였다.... 모든지 무시할건 없구나...
사실 이글을 쓰는건 browser 에 이벤트 발생시 요소를 추가하는 일이 생겼는데 선임이 appendChile()메소드를 사용하여 문제를 해결해 나갔다...
HTMLElement.appendChile(너어줄것.domElement); 이런식으로 말이다...
그래서 뭔지가 몰라서 풀어보려고한다.
이그림을보면 HTMLElement 는 거의 HTML의 모든 Element를 가지고 있는 것을 보고있다. 그리고 위 그림을 보면 밑에 그림처럼 관계가 보일것이다.
모든 엘리먼트는 HTMLElement의 자식이다. 따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다. 동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고 있는데 이것은 엘리먼트의 성격에 따라서 달라진다. HTMLElement는 Element의 자식이고 Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 관계를 DOM Tree라고 한다.
아! 이제 다 알거같지만 사실 모르겠다 더파보자.
ts타입의 인덱스를 파고파고 Node를 보면
interface Node extends EventTarget {
...
...
...
appendChild<T extends Node>(newChild: T): T;
...
...
}요넘이 보인다.
위에 그림과 같은 관계를 DOM Tree 라고 부르고 요소간의 상호관계가 있는걸 Tree형태로 표현을 해서 그런가보다.
써봐야지 알거 아닌가..
|
1
2
3
4
5
6
7
8
|
<body>
<script>
var jbBtn = document.createElement( 'button' );
var jbBtnText = document.createTextNode( 'Click' );
jbBtn.appendChild( jbBtnText );
document.body.appendChild( jbBtn );
</script>
</body>
|
3번째 줄에서 button 엘리먼트를 만들어버린다.. --> <button> </button> 을 만들어버린거와 다름없다.
4번째 줄에서 'Click' 이라는 문자열을 만들어버린다.
appendChild()를 이용해
5번째 줄에 버튼에 텍스트 넣어버리고
6번째 body에다가 넣어버린다.
ts파일의 appendChild에대한 주석이 다음과 같다.
/**
*Returns a copy of node. If deep is true, the copy also includes the node's descendants.
*/
-->노드의 자식에 카피뜬걸 포함시켜버린다... 즉 요소 추가하겠다는 말이네!!
*반대로 요소를 제거할시에는... removeChild()를 사용하면된다.
앞으로 또 이번프로젝트 외에도 써먹을곳이 있을거같다 분명.