警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
一、DOM 简介
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
- 通过 id 找到 HTML 元素
查找 id="intro" 元素:
var x=document.getElementById("intro");
- 通过标签名找到 HTML 元素
查找 id="main" 的元素,然后查找 "main" 中的所有元素:
var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
- 通过类名找到 HTML 元素
提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
二、DOM HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
-
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容:
今天的日期是: Mon Dec 12 2016 18:11:28 GMT+0800 (中国标准时间)
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
实例
亲自试一试
提示:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
-
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:document.getElementById(*id*).innerHTML=*new HTML*
实例
本例改变了 元素的内容:
Hello World!
亲自试一试
实例
本例改变了 元素的内容:
Old Header
亲自试一试
例子解释:
1.上面的 HTML 文档含有id="header"
的 元素
2.我们使用 HTML DOM 来获得id="header"
的元素
3.JavaScript 更改此元素的内容 (innerHTML)
-
改变 HTML 属性
如需改变 HTML 元素的属性,请使用这个语法:document.getElementById(*id*).attribute=*new value*
实例
本例改变了
元素的 src 属性:
亲自试一试
例子解释:
1.上面的 HTML 文档含有 id="image"
的
元素
2.我们使用 HTML DOM 来获得id="image"
的元素
3.JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")
三、DOM CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
-
改变 HTML 样式
如需改变 HTML 元素的样式,请使用这个语法:document.getElementById(*id*).style.property=*new style*
例子 1
下面的例子会改变 元素的样式:
Hello World!
亲自试一试
例子 2
本例改变了 id="id1"
的 HTML 元素的样式,当用户点击按钮时:
My Heading 1
亲自试一试
更多实例
Visibility
如何使元素不可见。您希望元素显示或消失吗?
HTML DOM Style 对象参考手册
如需完整的 HTML DOM Style 对象属性,请参阅HTML DOM Style 对象参考手册。
Style 对象
Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。
使用 Style 对象属性的语法:
document.getElementById("id").style.property="值"
Style 对象的属性:
背景
边框和边距
布局
列表
杂项
定位
打印
滚动条
表格
文本
规范
三、DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
** 对事件做出反应**
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:onclick=JavaScript
HTML 事件的例子:
- 当用户点击鼠标时 onclick
- 当网页已加载时 onload
- 当图像已加载时 onload
- 当鼠标移动到元素上时 onmouseover
- 当输入字段被改变时 onchange
- 当提交 HTML 表单时 onsubmit
- 当用户触发按键时 onkeydown
例子 1
在本例中,当用户在 元素上点击时,会改变其内容:
请点击该文本
亲自试一试
例子 2
本例从事件处理器调用一个函数:
请点击该文本
亲自试一试
HTML 事件属性
如需向 HTML 元素分配 事件,您可以使用事件属性。
实例
向 button 元素分配 onclick 事件:
亲自试一试
在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。
使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:
实例
向 button 元素分配 onclick 事件:
亲自试一试
在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
当按钮被点击时,会执行该函数。
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例
亲自试一试
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。
实例
亲自试一试
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例
一个简单的 onmouseover-onmouseout 实例:
把鼠标移到上面
亲自试一试
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
实例
一个简单的 onmousedown-onmouseup 实例:
请点击这里
亲自试一试
更多实例
onmousedown 和 onmouseup
当用户按下鼠标按钮时,更换一幅图像。
onload
当页面完成加载时,显示一个提示框。
onfocus
当输入字段获得焦点时,改变其背景色。
鼠标事件
当指针移动到元素上方时,改变其颜色;当指针移出文本后,会再次改变其颜色。
HTML DOM Event 对象参考手册
如需所有 HTML DOM 事件的完整列表,请参阅 W3School 提供的 HTML DOM Event 对象参考手册。
四、DOM 节点
添加和删除节点(HTML 元素)。
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
实例
这是一个段落
这是另一个段落
亲自试一试
例子解释:
-
这段代码创建新的
元素:
var para=document.createElement("p");
如需向元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
var node=document.createTextNode("这是新段落。");
然后您必须向 元素追加这个文本节点:
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素:
element.appendChild(para);
删除已有的 HTML 元素
如需删除 HTML 元素,您必须首先获得该元素的父元素:
实例
这是一个段落。
这是另一个段落。
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
亲自试一试
例子解释:
-
这个 HTML 文档含有拥有两个子节点(两个
元素)的
元素:这是一个段落。
这是另一个段落。
找到 id="div1" 的元素:
var parent=document.getElementById("div1");
找到 id="p1" 的
元素:
var child=document.getElementById("p1");
从父元素中删除子元素:
parent.removeChild(child);
提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。
这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:var child=document.getElementById("p1"); child.parentNode.removeChild(child);
HTML DOM 教程
在我们的 JavaScript 教程的 HTML DOM 部分,您已经学到了:- 如何改变 HTML 元素的内容 (innerHTML)
- 如何改变 HTML 元素的样式 (CSS)
- 如何对 HTML DOM 事件作出反应
- 如何添加或删除 HTML 元素
如果您希望学到更多有关使用 JavaScript 访问 HTML DOM 的知识,请访问w3c完整的 HTML DOM 教程。