WEB -DOM APIs

WEB:

DOM APIs

| 시작하기에 앞서,

Dom api는 라이브러리를 쓰는것보다 대체로더 빠르다.라이브러리보다 불편하고 어렵지만, low-level의 dom api를 이해한다면,  라이브러

리나 프레임워크를 사용하면서도 그동작을 이해하고 유추하기 쉽고, 문제해결에도 유리하다. 개인적인 생각으로 이러한 dom과 관련한 개념

들을 탄탄히 학습해 놓는다면, 프레임워크에 의존하는 개발자가 아닌, 유연하게 새로운기술도 쉽게쉽게 습득하는 유연한 개발자가 될것이라 

판단된다.

| DOM api 관련 링크

document. 으로 사용할 수 있는 API들 ->  링크

element. 으로 사용할 수 있는 AP들 ->  링크

| DOM 탐색 APIs

DOM 탐색에 몇 가지 유용한 속성들이다.

• tagName
• textContent
• nodeType

DOM 이동에 유용한 속성들이다.

• childNodes
• firstChild
• firstElementChild
• parentElement
• nextSibling
• nextElementSibling

| DOM 조작 API

삭제, 추가, 이동, 교체를 위해서는 아래 API 사용법을 잘 익혀두면 좋다.

• removeChild()
• appendChild()
• insertBefore()
• cloneNode()
• replaceChild()
• closest() //상위로 올라가면서 근접 엘리먼트 찾기

| DOM 추가 예제

var div=document.createElement("div");
var str=document.createTexNode("ideveloper");
div.appendChild(str);
(추가위치가 되는 대상 엘리먼트).appendChild(div);

$0을 쓰면 크롬 브라우저에서 지원하는 내장기능으로 select한 element를 받아오게 됩니다.