javaScript学习之HTML DOM Document对象
2012-07-31 11:41
671 查看
一．HTML DOM(包含实例演示)
说明：HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model forHTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
IE: Internet Explorer, F: Firefox, O: Opera,W3C: W3C 标准.
很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已经被
Document.getElementsByTagName()所取代，但是仍然常常使用，因为他们很方便。
write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为
getElementById()的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。
<html>
<head>
<title>请您仔细回答问题！</title>
<script type="text/javascript">
//这里用于getElementByName的测试
function mySubmit(){
var checked = document.getElementsByName("check");
alert(checked[1].value);
}
//通过js给html相关标签中的属性进行赋值
function myChange(){
//var myInput = document.getElementById("myInput");
var i = Math.random();
document.getElementById("myInput").value="change"+i;
}
//这里可以通过父节点向子节点进行索引
function myTable(){
var nodeList = document.getElementById("myTable").getElementsByTagName("input");
alert(nodeList.length);
}
</script>
<body>
<form action="answer.html">
<table id="myTable">
<tr><td> <input type="text" name="myInput" id="myInput" value="myInput"/></td></tr>
<tr><td><input type="button" value="改变这里的值！" onclick="myChange()"></td></tr>
<tr><td>请回答问题！</td></tr>
<tr><td><input type="radio" value="true" name="check" checked="checked"/>正确</td></tr>
<tr><td><input type="radio" value="false" name="check" />错误</td></tr>
<tr><td><input type="submit" value="提交" name="提交" onclick="mySubmit()"/></td></tr>
<tr><td><input type="button" value="查看文本框的数量" onclick="myTable()"></td></tr>
</table>
</form>
</body>
</html>
待续！
注：概念性内容来自于www.w3school.com.cn
说明：HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model forHTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
1.Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
IE: Internet Explorer, F: Firefox, O: Opera,W3C: W3C 标准.
2.Document 对象集合
| 集合 | 描述 | IE | F | O | W3C |
| all[] | 提供对文档中所有 HTML 元素的访问。 | 4 | 1 | 9 | No |
| anchors[] | 返回对文档中所有 Anchor 对象的引用。 | 4 | 1 | 9 | Yes |
| applets | 返回对文档中所有 Applet 对象的引用。 | - | - | - | - |
| forms[] | 返回对文档中所有 Form 对象引用。 | 4 | 1 | 9 | Yes |
| images[] | 返回对文档中所有 Image 对象引用。 | 4 | 1 | 9 | Yes |
| links[] | 返回对文档中所有 Area 和 Link 对象引用。 | 4 | 1 | 9 | Yes |
3.Document 对象属性
| 属性 | 描述 | IE | F | O | W3C |
| body | 提供对 <body> 元素的直接访问。 对于定义了框架集的文档，该属性引用最外层的 <frameset>。 | ||||
| cookie | 设置或返回与当前文档有关的所有 cookie。 | 4 | 1 | 9 | Yes |
| domain | 返回当前文档的域名。 | 4 | 1 | 9 | Yes |
| lastModified | 返回文档被最后修改的日期和时间。 | 4 | 1 | No | No |
| referrer | 返回载入当前文档的文档的 URL。 | 4 | 1 | 9 | Yes |
| title | 返回当前文档的标题。 | 4 | 1 | 9 | Yes |
| URL | 返回当前文档的 URL。 | 4 | 1 | 9 | Yes |
4．Document 对象方法
| 方法 | 描述 | IE | F | O | W3C |
| close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 | 4 | 1 | 9 | Yes |
| getElementById() | 返回对拥有指定 id 的第一个对象的引用。 | 5 | 1 | 9 | Yes |
| getElementsByName() | 返回带有指定名称的对象集合。 | 5 | 1 | 9 | Yes |
| getElementsByTagName() | 返回带有指定标签名的对象集合。 | 5 | 1 | 9 | Yes |
| open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 | 4 | 1 | 9 | Yes |
| write() | 向文档写 HTML 表达式 或 JavaScript 代码。 | 4 | 1 | 9 | Yes |
| writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 | 4 | 1 | 9 | Yes |
5.Document 对象描述
HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已经被
Document.getElementsByTagName()所取代，但是仍然常常使用，因为他们很方便。
write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为
getElementById()的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。
6.实例演示
(1). getElementsByName，getElementById，以及通过js给html属性赋值。<html>
<head>
<title>请您仔细回答问题！</title>
<script type="text/javascript">
//这里用于getElementByName的测试
function mySubmit(){
var checked = document.getElementsByName("check");
alert(checked[1].value);
}
//通过js给html相关标签中的属性进行赋值
function myChange(){
//var myInput = document.getElementById("myInput");
var i = Math.random();
document.getElementById("myInput").value="change"+i;
}
//这里可以通过父节点向子节点进行索引
function myTable(){
var nodeList = document.getElementById("myTable").getElementsByTagName("input");
alert(nodeList.length);
}
</script>
<body>
<form action="answer.html">
<table id="myTable">
<tr><td> <input type="text" name="myInput" id="myInput" value="myInput"/></td></tr>
<tr><td><input type="button" value="改变这里的值！" onclick="myChange()"></td></tr>
<tr><td>请回答问题！</td></tr>
<tr><td><input type="radio" value="true" name="check" checked="checked"/>正确</td></tr>
<tr><td><input type="radio" value="false" name="check" />错误</td></tr>
<tr><td><input type="submit" value="提交" name="提交" onclick="mySubmit()"/></td></tr>
<tr><td><input type="button" value="查看文本框的数量" onclick="myTable()"></td></tr>
</table>
</form>
</body>
</html>
待续！
注：概念性内容来自于www.w3school.com.cn
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript HTML DOM节点类型之Document类型（Document对象属性和Document对象集合属性）
- JavaScript学习之HTML DOM 对象
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
- JavaScript高级程序设计学习笔记--事件（二）(事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第30讲_类和对象细节_创建对象的几种方式_js对象内存分析_学习笔记_源代码图解_PPT文档整理
- JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
- Javascript的document,window对象（DOM）
- javascript（五）Document对象与DOM
- HTML DOM Document 对象
- javascript 学习笔记 基础篇(2) HTML DOM
- javascript对文档对象模型DOM的基本操作学习笔记
- HTML DOM Document 对象
- HTML DOM Document 对象
- HTML DOM Document 对象
- JavaScript学习之三JavaScript浏览器对象模型详解----document对象
- HTML、CSS和JavaScript学习四(Window对象之alert、confirm、prompt、open、onload...)
- JavaScript学习笔记之通过DOM操作html
- HTML DOM Document 对象
- javascript 基础学习整理 二 之 html对象总结，参考W3C
- JavaScript学习笔记（二）--JS HTML DOM