这是我参与「第四届青训营」笔记创作活动的第4天

JavaScript HTML DOM

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

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 树

（图源菜鸟教程）

JavaScript与HTML

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

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

有三种方法：

通过 id

var x=document.getElementById("intro");

通过标签名

var x=document.getElementById("main"); var y=x.getElementsByTagName("p");

通过类名

var x=document.getElementsByClassName("intro");

改变HTML

改变 HTML 输出流

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

改变 HTML 内容

document.getElementById(id).innerHTML=新的 HTML

改变 HTML 属性

document.getElementById(id).attribute=新属性值

JavaScript与CSS

改变 HTML 样式

document.getElementById(*id*).style.*property*=*新样式*

使用事件

HTML DOM 可以通过触发事件来执行代码。如：

元素被点击。
页面加载完成。
输入框被修改。

DOM事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。 HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

onload 和 onunload 事件

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

onchange 事件

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

onmouseover 和 onmouseout 事件

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

JavaScript DOM | 青训营笔记