第七次学习周记

本次的主要内容是 JavaScript HTML DOM
分为四个部分：DOM简介；HTML DOM 对HTML的影响；HTMLDOM 对CSS的影响以及HTML事件。

一、DOM简介
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树

二、HTML DOM 对HTML的影响
1、改变 HTML 输出流
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

运行结果

注意：绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
2、改变HTML内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

运行结果

注意：如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML

3、改变HTML属性

原图片为 smiley.gif,脚本将图片修改为 landscape.jpg

注解：上面的 HTML 文档含有 id=“image” 的 < img> 元素
可以使用 HTML DOM 来获得 id=“image” 的元素
JavaScript 更改此元素的属性（把 “smiley.gif” 改为 “landscape.jpg”）

注意：如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值

三、HTML DOM 对CSS的影响
1、改变HTML样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

运行结果

上面的例子改变

元素的样式

注意：如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式

2、使用事件
HTML DOM 允许我们通过触发事件来执行代码。

运行结果

点击之后的运行结果

上面的例子改变了 id=“id1” 的 HTML 元素的样式。

四、HTML DOM事件
1、对事件做出反应
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
可以在事件发生时执行 JavaScript，比如在 HTML 元素上点击时。
在点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript

运行结果

点击后的运行结果

2、使用 HTML DOM 来分配事件
HTML DOM 允许使用 JavaScript 来向 HTML 元素分配事件

运行结果

点击之后的运行结果

上面的例子中，名为 displayDate 的函数被分配给 id=“myBtn” 的 HTML 元素。
按钮点击时Javascript函数将会被执行

3、onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

4、onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

运行结果


离开输出框之后