本次的主要内容是 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() 函数。
运行结果
离开输出框之后