ドキュメントオブジェクトモデル(DOM:Documentオブジェクトモデル)

ドキュメントオブジェクトまたは同じhtmlドキュメントのタグをJavaScriptで使用可能なオブジェクト(object)として作成する場合は、ドキュメントオブジェクトと呼ばれます.
ドキュメントオブジェクトモデル「ドキュメントオブジェクトの識別方法」
DOMは、WebブラウザがHTMLページを認識する方法を示す.
より詳細には、ドキュメントオブジェクトに関連するオブジェクトの集合です.

document.createElement('태그이름')
document.createTextNode('텍스트')
태그.appendChild('텍스트')
document.body.appendChild('태그이름')

window.onload = function(){
  //1. 문서 객체 생성
  var header = document.createElement('p');
  var b = document.createElement('b');
  var textNode = document.createTextNode('Hello DOM');
  
  var ul = document.createElement('ul');
  var li1 = document.createElement('li');
  var li2 = document.createElement('li');
  var li3 = document.createElement('li');
  var btn = document.createElement('button');
  
  var liText1 = document.createTextNode('li 1');
  var liText2 = document.createTextNode('li 2');
  var liText3 = document.createTextNode('li 3');
  var btnName = document.createTextNode('버튼');
  
  //2. 노드(요소/텍스트)를 연결.
  header.appendChild(b);
  b.appendChild(textNode);

  li1.appendChild(liText1);
  li2.appendChild(liText2);
  li3.appendChild(liText3);
  ul.appendChild(li1);
  ul.appendChild(li2);
  ul.appendChild(li3);
	
  btn.appendChild(btnName);

  //3. body 문서 객체에 header 문서 객체를 추가.
  document.body.appendChild(header);
  document.body.appendChild(ul);
  document.body.appendChild(btn);
};

Reference

https://blog.naver.com/magnking/220972680805
https://jsfiddle.net/41r8gcjw/38/
ウィキペディア