HTML DOM 举例

最新推荐文章于 2024-07-18 18:41:00 发布

share4318

最新推荐文章于 2024-07-18 18:41:00 发布

阅读量279

点赞数

分类专栏： HTML dom 文章标签： html object properties attributes 文档 function

HTML dom 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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 οnclick="ChangeColor()">
Click on this document!
</body>

</html>

Try it yourself自己尝试下

Document Objects
文档对象

The HTML DOM defines HTML documents as a collection of objects.

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 οnclick="ChangeColor()" attribute of the <body> element in the example above, defines an action to take place when the user clicks on the document.
在上面例子中的οnclick="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 οnclick="ChangeColor()">

Click on this document!
</body>

</html>

share4318

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 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 Examp
复制链接

扫一扫