HTML DOM 举例

当前位置: 首页 > 网络学院 > 客户端脚本教程 > HTML DOM > HTML DOM 举例

学院文章搜索

关键字

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-03-01 浏览: 1209 ::

收藏到网摘: n/a

DOM 介绍 DOM 参考

The HTML DOM defines an HTML document as a collection of objects.
HTML DOM定义HTML文档作为一个对象的集合

Objects have properties and methods. Objects can respond to events.
对象有属性和方法。对象可以对事件做出反应

An HTML DOM Example
一个HTML DOM例子

This coding example shows how the background color of an HTML document can be changed to yellow when a user clicks on it:
例子中的代码展示了怎样来用鼠标点击改变HTML文档的背景颜色为黄色：

<html>

<head>
<script type="text/javascript">

function ChangeColor()
{
document.body.bgColor="yellow"
}
</script>
</head>

<body onclick="ChangeColor()">
Click on this document!
</body>

</html>

Try it yourself自己尝试下

Document Objects
文档对象

The HTML DOM defines HTML documents as a collection of objects.
HTML DOM 将 HTML 文档定义成对象们的集合

The document object is the parent of all the other objects in an HTML document.
document对象是所有HTML文档内其他对象的父节点

The document.body object represents the <body> element of the HTML document.
document.body对象代表了HTML文档的<body>元素

The document object is the parent of the body object, and the body object is a child of the document object.
document 对象是body对象的父节点，也可以说body对象是document对象的子节点

Object Properties
对象属性

HTML document objects can have properties (also called attributes).
HTML的document对象可以有属性(也可以叫为attributes[属性])

The document.body.bgColor property defines the background color of the body object.
document.body.bgColor属性定义了body对象的背景颜色

The statement document.body.bgColor="yellow" in the example above, sets the background color of the HTML document to yellow.
在上面例子中的语句document.body.bgColor="yellow"将HTML文档的背景颜色设置为了黄色。

Object Events
对象事件

HTML document objects can respond to events.
HTML文档对象可以对事件做出反应

The onclick="ChangeColor()" attribute of the <body> element in the example above, defines an action to take place when the user clicks on the document.
在上面例子中<body>元素的onclick="ChangeColor()"属性定义了当用户点击文档后发生（相应的）举动

Functions
函数

The ChangeColor() function in the example above, is a JavaScript function.
例子中的ChangeColor()函数是一个JS函数

The function will be triggered (started) when a user clicks on the HTML document.
当用户点击HTML文档函数就会被触发（开始）

Changing Style
改变样式

The HTML DOM also defines a model for changing the styles of HTML objects.
HTML DOM还可以定义HTML对象的样式模型

The coding example below shows how to obtain the same effect as the first example, by changing the style of the body object:
下面的代码展示了怎样做到和上一个例子一样的效果而使用改变样式的方法：

<html>

<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.style.background="yellow"
}
</script>
</head>

<body onclick="ChangeColor()">

Click on this document!
</body>

</html>

Try it yourself自己尝试下

DOM 介绍 DOM 参考

HTML DOM 举例

An HTML DOM Example 一个HTML DOM例子

Document Objects 文档对象

Object Properties 对象属性

Object Events 对象事件

Functions 函数