DOM 구조

https://wit.nts-corp.com/2019/02/14/5522
아주 잘 정리되어 있다 DOM에 대해서 이글을 보고 이해해버렸다.

children

document.body.children 으로 body안의 자식들을 확인 할 수 있다.
그중에 1번째 자식의 정보를 확인하려면.
document.body.children[1]으로 접근이 가능하다. children이 배열로 리턴되기 때문이다.
자식 element를 이렇게 찾을 수 있다.

부모 엘리먼트도 조회가 가능하다. 만약 내가 가진 정보가 자식이고 그 자식 element가 let divAny = document.body.children[2]에 할당 되었다고 생각해보자. 그렇다면 divAny의 부모에 접근하기 위해서는 divAny.parentElement로 접근이 가능하다. 그렇다면 부모의 정보가 나올것이다.

그리고 element를 생성하는법을 보자.

createElement()

document.createElement('div') 를 입력하면, div element가 만들어진다. 말그대로 create element 이고 괄호안에 무슨 태그를 만들지 적으면 되는것이다.

이렇게 생성된 div는 어디에도 포함되어있지 않다. 만들기만 하고 자리를 찾아서 그 자리에 할당을 하지 않았기 때문이다.

할당을 하기 이전에, 좀 더 편하게 어느 변수에 생성된 div를 담아보자.
let creatDiv = document.createElement('div');
이렇게 변수에 담아두고나서 DOM상에 어느 한 지점을 정하고 그것을 append()하면 된다.

append()

document.body.append(creatDiv);
// body에 creatDiv를 추가(삽입)하라는 것.

textContent

Div 태그를 만들었으니 내용도 넣어볼 수 있다.
내용을 넣는 방법은 textContent를 사용하는 것이다.
그리고 원하는 장소에 Div를 새로 삽입하거나 내용을 넣기위해서는, 원하는 container를 찾을 수 있어야한다.

DOM element 찾는 방법.

자바스크립트 DOM 에서는 기본적인 3가지 방법이 있다.

1. getElementsByTagName
2. getElementsByClassName 로 찾기
3. getElementById 로 찾기

getElementsByTagName

document.getElementsByTagName("div");

getElementsByTagName

document.getElementsByClassName("browsers");

getElementsByTagName

document.getElementsById("wrap");

append() & appendChild()

Document.createDocumentFragment()

DOM을 오늘 처음 접하고 처음 만드는 함수이다. 복잡해보이지만, 재미있는것같다.

var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

/* 
<li>Firefox</li>
<li>Chrome</li>
<li>Opera</li>
<li>Safari</li>
<li>Internet Explorer</li> 
*/