[TOC] >[info]通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树。 ![](https://box.kancloud.cn/2015-12-13_566d156ac641e.gif) 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。 1. JavaScript 能够改变页面中的所有 HTML 元素 2. JavaScript 能够改变页面中的所有 HTML 属性 3. JavaScript 能够改变页面中的所有 CSS 样式 4. JavaScript 能够对页面中的所有事件做出反应 ## DOM 对象属性 <table class="dataintable"> <tbody> <tr> <th style="width:30%"> 属性 </th> <th> 描述 </th> </tr> <tr> <td> body </td> <td> <p> 提供对 &lt;body&gt; 元素的直接访问。 </p> <p> 对于定义了框架集的文档,该属性引用最外层的 &lt;frameset&gt;。 </p> </td> </tr> <tr> <td> <a> cookie </a> </td> <td> 设置或返回与当前文档有关的所有 cookie。 </td> </tr> <tr> <td> <a> domain </a> </td> <td> 返回当前文档的域名。 </td> </tr> <tr> <td> <a> lastModified </a> </td> <td> 返回文档被最后修改的日期和时间。 </td> </tr> <tr> <td> <a> referrer </a> </td> <td> 返回载入当前文档的文档的 URL。 </td> </tr> <tr> <td> <a> title </a> </td> <td> 返回当前文档的标题。 </td> </tr> <tr> <td> <a> URL </a> </td> <td> 返回当前文档的 URL。 </td> </tr> </tbody> </table> ## DOM 对象方法 <table class="dataintable"> <tbody> <tr> <th style="width:30%"> 方法 </th> <th> 描述 </th> </tr> <tr> <td> <a> getElementById() </a> </td> <td> 返回对拥有指定 id 的第一个对象的引用。 </td> </tr> <tr> <td> <a> getElementsByName() </a> </td> <td> 返回带有指定名称的对象集合。 </td> </tr> <tr> <td class="no_wrap"> <a> getElementsByTagName() </a> </td> <td> 返回带有指定标签名的对象集合。 </td> </tr> <tr> <td class="no_wrap"> <a> getElementsByClassName() </a> </td> <td> 方法返回文档中所有指定类名的元素集合 </td> </tr> </tbody> </table> >[danger]**作业:**结合定时器,写一个活动倒计时。】 ![](https://box.kancloud.cn/a6f47d6cdd01b71211287191df2ceaf1_510x240.png)