JavaScript 笔记（3）

1：DOM 简介

通过HTML DOM，可访问JavaScript HTML文档的所有元素。

1：HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（document object model）。HTML DOM模型被构造为对象的数。

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。

JavaScript能够改变页面中的所有HTML元素。

JavaScript能够改变页面中的所有HTML属性。

JavaScript能够改变页面中的所有CSS样式。

JavaScript能够对页面中的所有事件做出反应。

2：查找HTML元素

通常，通过JavaScript，需要操作HTML元素。

为了做到这件事，必须找到该元素。有三种方法来做这件事：

通过id找到HTML元素。

通过标签名找到HTML元素。

通过类名找到HTML元素。

2：JavaScript HTML DOM - 改变 HTML

HTML DOM 允许JavaScript改变HTML元素的内容。

1：改变HTML输出流

在JavaScript中，document.write()可用于直接向HTML输出流写内容。

document.write(Date());//输出当前时间

2：改变HTML内容

修改HTML内容的最简单的方法时使用innerHTML属性。

语法：document.getElementById(id).innerHTML= new HTML

3：改变HTML属性

如果改变HTML元素属性，语法：

document.getElementById(id).attribute=new value

3：JavaScript HTML DOM - 改变CSS

HTML DOM允许JavaScript改变HTML元素的样式。

1：改变HTML样式

改变样式语法：document.getElement(id).style.property=new style

4：JavaScript HTML DOM事件

HTML DOM使JavaScript有能力对HTML事件做出反应。

1：对事件做出反应

我们可以在时间发生时执行JavaScript。

2：HTML事件属性

如需向HTML元素分配事件，可以使用事件属性。

3：onload和onunload事件

onload和onunload事件会在用户进入或离开页面时被触发。

onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload和onunload事件可用于处理cookie。

4：onchange事件

onchange事件常结合对输入字段的验证来使用。

5：onmouseover和onmouseout事件

onmouseover 和 onmouseout事件可用于在用户鼠标移至HTML元素上方或移出元素是触发。

6：onmousedown、onmouseup和onclick事件

onmousedown、onmouseup和onclick构成了鼠标点击事件的所有部分。首先当点击鼠标时会触发onmousedown事件，当释放鼠标时会触发onmouseup事件，最后当完成鼠标点击时，会触发onclick事件。

5：JavaScript HTML DOM 元素（节点）

添加和删除节点。

1：创建新的HTML元素

想要向HTML DOM添加新元素，必须首先向创建该元素，然后向一个已存在的元素追加该元素。

2：删除已有的HTML元素

想要删除HTML元素，必须首先获得该元素的父元素。