HTML DOM教程
The DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):
DOM被分为不同的部分（核心，XML和HTML）和不同的版本（DOM 1/2/3）
The HTML DOM views HTML documents as a tree structure of elements embedded within other elements. All elements, their containing text and their attributes, can be accessed through the DOM tree. Their contents can be modified or deleted, and new elements can be created by the DOM. The elements, their text, and their attributes are all known as nodes.
HTML DOM将HTML文档视为嵌套其他元素的树型结构元素。所有的元素(它们包含文字和属性)都可以通过这个树型结构被访问。通过这种方法它们的内容可以被修改和删除，并且可以通过DOM建立新的元素。在这种结构中这些元素的文字和它们的属性被识别为点。
The HTML DOM defines an HTML document as a collection of objects.Objects have properties and methods. Objects can respond to events.
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
Object Events
Functions
Changing Style
Document Object
document.open("mimetype"[,replace])
DOM被分为不同的部分（核心，XML和HTML）和不同的版本（DOM 1/2/3）
The HTML DOM views HTML documents as a tree structure of elements embedded within other elements. All elements, their containing text and their attributes, can be accessed through the DOM tree. Their contents can be modified or deleted, and new elements can be created by the DOM. The elements, their text, and their attributes are all known as nodes.
HTML DOM将HTML文档视为嵌套其他元素的树型结构元素。所有的元素(它们包含文字和属性)都可以通过这个树型结构被访问。通过这种方法它们的内容可以被修改和删除，并且可以通过DOM建立新的元素。在这种结构中这些元素的文字和它们的属性被识别为点。
The HTML DOM defines an HTML document as a collection of objects.Objects have properties and methods. Objects can respond to events.
HTML DOM定义HTML文档作为一个对象的集合, 并且这些对象有属性和方法。对象也可以对事件做出反应
<html>
<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.bgColor="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</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>
Document Object
Document 对象
The Document object represents the entire HTML document and can be used to access all elements in a page.
Document对象代表着整个HTML文档并可以用来访问所有页面中的元素。
IE: Internet Explorer, F: Firefox, N: Netscape, W3C: World Wide Web Consortium (Internet Standard), D: Deprecated.
Document Object Collections（对象集合）
| Collection 集合 |
Description 描述 |
IE | F | N | W3C |
|---|---|---|---|---|---|
| anchors[] | Returns a reference to all Anchor objects in the document 罗列document中所有Anchor对象的参考 |
3 | 1 | 2 | Yes |
| applets[] | Returns a reference to all Applet objects in the document 返回在文档中所有Applet对象的参考 |
4 | 1 | 3 | Yes |
| attributes[] | - | 1 | 6 | No | |
| childNodes[] | 5 | 1 | 6 | No | |
| embeds[] | Returns a reference to all embedded objects in the document 返回在文档里所有嵌入对象的参考 |
4 | 1 | 3 | No |
| forms[] | Returns a reference to all Form objects in the document 罗列document中所有表单对象的参考 |
3 | 1 | 2 | Yes |
| images[] | Returns a reference to all Image objects in the document 罗列document中所有image对象的参考 |
4 | 1 | 3 | Yes |
| links[] | Returns a reference to all Link objects in the document 返回在文档中所有link对象的参考 |
3 | 1 | 2 | Yes |
| plugins[] | - | 1 | 6 | No | |
| stylesheets[] | 5 | 1 | 6 | No |
Document Object Properties(对象属性)
| Property 属性 |
Description 描述 |
IE | F | N | W3C |
|---|---|---|---|---|---|
| alinkColor | Sets or returns the color of the active links in the document 设置或返回在文档中活动连接的颜色 |
3 | 1 | 2 | D |
| bgColor | Sets or returns the background-color of the document 设置或返回文档背景颜色 |
3 | 1 | 2 | D |
| body | Specifies the beginning and end of the document body 指定文档body的开头和结尾 |
5 | 1 | 6 | Yes |
| cookie | Sets or returns all cookies associated with the document 通过document设置或返回所有有关文档的cookies |
3 | 1 | 2 | Yes |
| documentElement | Returns a reference to the root node of the document 返回文档根部节点的参考 |
5 | 1 | 6 | No |
| domain | Returns the document server's domain name 返回文档的服务器域名 |
4 | 1 | 3 | Yes |
| fgColor | Sets or returns the text-color of the document 设置或返回文档的文字颜色 |
3 | 1 | 2 | D |
| lastModified | Returns the date and time the document was last modified 返回文挡最后修改的日期 |
3 | 1 | 2 | No |
| linkColor | Sets or returns the color of the links in the document 设置或返回文档中连接的颜色 |
3 | 1 | 2 | D |
| referrer | Returns the URL of the document that loaded the current document 返回被直接加载的文档URL |
3 | 1 | 2 | Yes |
| title | Returns the title of the document 返回文档的标题 |
3 | 1 | 2 | Yes |
| URL | Returns the URL of the current document 返回当前文档的URL |
4 | 1 | 3 | Yes |
| vlinkColor | Sets or returns the color of the visited links in the document 设置或返回文档中访问过连接的颜色 |
3 | 1 | 2 | D |
Document Object Methods对象方法
| Method 方法 |
Description 描述 |
IE | F | N | W3C |
|---|---|---|---|---|---|
| clear() | Clears all elements in the document 清空所有文档中的元素 |
- | 1 | 2 | No |
| close() | Closes the output stream and displays the sent data 关闭输出流以及发送数据的显示 |
3 | 1 | 2 | Yes |
| createAttribute("name") | Creates an attribute with a specified name 建立指定name的属性 |
6 | 1 | 6 | No |
| createElement("tag") | Creates an element 建立元素 |
5 | 1 | 6 | Yes |
| createTextNode("txt") | Creates a text string 建立文字串 |
5 | 1 | 6 | Yes |
| focus() | Gives the document focus 文档聚焦 |
5 | 1 | 6 | No |
| getElementById() | Returns a reference to the first object with the specified ID 通过指定ID返回第一个符合对象的参考 |
5 | 1 | 6 | Yes |
| getElementsByName() | Returns a collection of objects with the specified NAME 通过指定NAME返回符合的对象集合 |
5 | 1 | 6 | Yes |
| getElementsByTagName("tag") | Returns a collection of objects with the specified TAGNAME 通过指定TAGNAME返回符合的对象 |
5 | 1 | 6 | No |
| open() | Opens a document for writing 为写入打开一份文档 |
3 | 1 | 2 | Yes |
| write() | Writes a text string to a document 在文档中写入文字串 |
3 | 1 | 2 | Yes |
| writeln("str") | Writes a text string followed by a new line character to a document opened by open() 新行写入 |
3 | 1 | 2 | Yes |
Document Object Events对象事件
Syntax: document.event_name="someJavaScriptCode"
| Event 事件 |
Description 描述 |
IE | F | N | W3C |
|---|---|---|---|---|---|
| onClick | Executes some code when a Click event occurs 当点击事件发生的时候执行一些代码 |
5 | 1 | 6 | |
| onDblClick | Executes some code when a Doubleclick event occurs 当双击事件发生的时候执行一些代码 |
5 | 1 | 6 | |
| onFocus | Executes some code when a Focus event occurs 当聚焦事件发生的时候执行一些代码 |
5 | 1 | 6 | |
| onKeyDown | Executes some code when a Keydown event occurs 当键按住事件发生时执行一些代码 |
5 | 1 | 6 | |
| onKeyPress | Executes some code when a Keypress event occurs 当键按下事件发生就执行一些代码 |
5 | 1 | 6 | |
| onKeyUp | Executes some code when a Keyup event occurs 当提键事件发生就执行代码 |
5 | 1 | 6 | |
| onMouseDown | Executes some code when a Mousedown event occurs 当鼠标按住事件发生就执行代码 |
5 | 1 | 6 | |
| onMouseMove | Executes some code when a Mousemove event occurs 当鼠标移动事件发生就执行代码 |
5 | 1 | 6 | |
| onMouseOut | Executes some code when a Mouseout event occurs 当鼠标离开事件发生就执行一些代码 |
5 | 1 | 6 | |
| onMouseOver | Executes some code when a Mouseover event occurs 当鼠标移到上方事件发生就执行代码 |
5 | 1 | 6 | |
| onMouseUp | Executes some code when a Mouseup event occurs 到鼠标释放就执行代码 |
5 | 1 | 6 | |
| onResize | Executes some code when a Resize event occurs 当改变大小事件发生就执行代码 |
5 | 1 | 6 |
一些document对象的示例:
一.
<html>
<head>
<script type="text/javascript">
function getElement()
{
var x=document.getElementById("myHeader")
alert("这是一个 " + x.tagName + " 元素")//x.tagName的作用是获得这个对象的标记名即h1
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getElement()">点击查看此元素名称</h1>
</body>
</html>
二.
The getElementsByName() method returns a collection of objects with the specified NAME.
getELmentsByName()方法可返回指定NAME的对象集合
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput")
alert(x.length + " elements!")
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20"><br />
<input name="myInput" type="text" size="20"><br />
<input name="myInput" type="text" size="20"><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?">
</body>
</html>
三.
The anchors collection returns a reference to all Anchor objects in the document.
anchors 集合可用来返回文档中所有Anchor(锚点)对象参考
(1)
<html>
<body>
<a name="first">First anchor</a><br />
<a name="second">Second anchor</a><br />
<a name="third">Third anchor</a><br />
<br />
Number of anchors in this document:
<script type="text/javascript">
document.write(document.anchors.length)
</script>
</body>
</html>
(2)
<html>
<body>
<a name="first">anchor1</a><br />
<a name="second">anchor2</a><br />
<a name="third">anchor3</a><br />
<br />
第一个anchor里的内容为：
<script type="text/javascript">
document.write(document.anchors[0].innerHTML)
</script>
</body>
</html>
运行结果:anchor1
anchor2
anchor3
第一个anchor里的内容为：
anchor1
四:
The forms collection returns a reference to all Form objects in the document.
forms 集合可用来返回文档中所有Form对象的参考
<html>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
<script type="text/javascript">
document.write("这个例子包含了 " + document.forms.length + " 个表单")
</script>
</body>
</html>
运行结果:这个例子包含了 3 个表单
五:
The open() method opens a document for writing.
open()方法可以打开一个文档
If a document exists in the target it will be cleared. If this method has no arguments, a new window with about:blank is displayed.
如果目标文档已经存在那么里面的内容会被清除，如果这个方法不带内容就会显示一个新的窗口，地址栏为about:blank。
document.open("mimetype"[,replace])
<html>
<head>
<script>
function createNewDoc()
{
var newDoc=document.open("text/html","replace")
var txt="<html><body>体验DOM带给你的乐趣！</body></html>"
newDoc.write(txt)
newDoc.close()//
close()方法可以关闭数据流并显示发送的数据
}
</script>
</head>
<body>
<input type="button" value="获取元素并写入新的信息" onclick="createNewDoc()">
</body>
</html>
