網頁元件呈現的方式(DOM)

一行一行的程式碼最後是怎們變成我們看到無論是手機、電腦或是網頁以圖像(GUI,Griphical User Interface)呈現方式的介面呢?

1. HTML標籤
2. javascript innerHTML
3. AJAX

HTML標籤

這是最基礎的方式，舉來來說在HTML文件上直接使用原生HTML標籤(tag)即可

<h1>asd</h1>

javascript innerHTML 

這種方式是單頁式應用程式(single page application, SPA)，vue或是react主要方式

<script>
	document.getElementById('display').innerHTML = "<h1>asd</h1>";
</script>

AJAX

這種方式可以使用網頁瀏覽器原生的XMLHttpRequest或是fetch API，這是AngularJS使用呈現內容的方式，這邊介紹fetch API，另外可以參考兩種網頁瀏覽器原生AJAX的方式

<script>
	fetch('目標連結或數據')
  	  .then(data => data.text())
  	  .then(data => {
     		document.getElementById('display').innerHTML = data;
	})
</script>

所以也可以純粹使用javascript呈現網頁，這也是為什麼在用Angular,React或是Vue開發的時候，整個專案都是javascript的原因。