Day28 javascript 改变HTML

今天继续昨天的笔记，我们继续来看JavaScript HTML DOM，今天我们要做的是改变 HTML，HTML DOM 允许 JavaScript 改变 HTML 元素的内容，至於如何改变 HTML 输出流我会再下面举例说明。

首先JavaScript 能够创建动态的 HTML 内容，这件是我在之前的笔记提到了很多遍，例如今天的日期是： 2021年9月28日14:06:06 GMT+0800 (台北标准时间)，如果我们想要把它显示在萤幕上，在 JavaScript 中，我们可以使用document.write() 语法直接向 HTML 输出内容，例如:

P.S.绝对不要在文档(DOM)载入完成之後使用 document.write()。这会覆盖该文档。

当我们会输出之後，下一步要看的是如何改变 HTML 内容，修改 HTML 内容的最简单的方法是使用 innerHTML 属性，如果需要改变 HTML 元素的内容，我们要使用这个语法：
document.getElementById(id名称).innerHTML = 修改内容(新的HTML)
举例说明，在例子中我改变了元素的内容：

稍微解释一下，上面的 HTML 文档含有 id="a" 的 p 元素，我们使用 HTML DOM 来获得 id="a" 的元素，然後透过JavaScript 更改此元素的内容 (innerHTML)。
在今天的最後我们来试试改变 HTML 属性，如果需要改变 HTML 元素的属性，那我们要使用这个语法：
document.getElementById(id名称).attribute = 新属性
举例说明，我们试着改变了 img 元素的 src 属性：

同样稍微解释一下，上面的 HTML 文档含有 id="a" 的 img 元素，我们使用 HTML DOM 来获得 id="a" 的元素，然後透过JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）。