该文档对象模型允许访问和修改所有文档内容,并由万维网联盟(W3C)标准化。几乎所有现代浏览器都支持此模型。
W3C DOM标准化了传统DOM的大多数功能,并添加了新功能。除了支持Document对象的form [],images []和其他数组属性之外,它还定义了一些方法,这些方法允许脚本访问和操作任何文档元素,而不仅是表单和图像之类的专用元素。
W3C DOM中的文档属性
此模型支持旧版DOM中可用的所有属性。此外,这是可以使用W3C DOM访问的文档属性的列表。
| Sr.No. | Property & Description |
|---|---|
| 1 |
body A reference to the Element object that represents the <body> tag of this document. Ex -document.body |
| 2 |
defaultView 它的只读属性,代表显示文档的窗口。 Ex -document.defaultView |
| 3 |
documentElement 对文档<html>标签的只读引用。 Ex -document.documentElement8/31/2008 |
| 4 |
实施 它是一个只读属性,代表DOMImplementation对象,该对象表示创建此文档的实现。 Ex -document.implementation |
W3C DOM中的文档方法
此模型支持旧版DOM中可用的所有方法。此外,这是W3C DOM支持的方法的列表。
| Sr.No. | Property & Description |
|---|---|
| 1 |
createAttribute(name) 返回具有指定名称的新创建的Attr节点。 Ex -document.createAttribute(name) |
| 2 |
createComment(文本) 创建并返回一个包含指定文本的新Comment节点。 Ex -document.createComment(文本) |
| 3 |
createDocumentFragment() 创建并返回一个空的DocumentFragment节点。 Ex -document.createDocumentFragment() |
| 4 |
createElement(tagName) 创建并返回具有指定标签名称的新Element节点。 Ex -document.createElement(tagName) |
| 5 |
createTextNode(文本) 创建并返回一个包含指定文本的新Text节点。 Ex -document.createTextNode(文本) |
| 6 |
getElementById(id) 返回具有其id属性指定值的该文档的Element；如果文档中不存在这样的Element,则返回null。 Ex -document.getElementById(id) |
| 7 |
getElementsByName(name) 返回其名称属性具有指定值的文档中所有元素的节点的数组。如果找不到此类元素,则返回零长度数组。 Ex -document.getElementsByName(name) |
| 8 |
getElementsByTagName(标签名) 返回此文档中具有指定标签名称的所有Element节点的数组。 Element节点以与在文档源中出现的顺序相同的顺序出现在返回的数组中。 Ex -document.getElementsByTagName(标签名) |
| 9 |
importNode(importedNode,很深) 创建并返回适用于插入该文档的其他文档中节点的副本。如果deep参数为true,则也会递归地复制节点的子级。在DOM版本2中受支持 Ex -document.importNode(importedNode,深层) |
Example
使用W3C DOM可以很容易地操作(访问和设置)文档元素。您可以使用 getElementById , getElementsByName 或 getElementsByTagName 之类的任何方法。
这是一个使用W3C DOM方法访问文档属性的Example。
<html>
<head>
<title> Document Title </title>
<script type="text/javascript">
<!--
function myFunc() {
var ret=document.getElementsByTagName("title");
alert("Document Title : " + ret[0].text );
var ret=document.getElementById("heading");
alert(ret.innerHTML );
}
//-->
</script>
</head>
<body>
<h1 id="heading">This is main title</h1>
<p>Click the following to see the result:</p>
<form id="form1" name="FirstForm">
<input type="button" value="Click Me" onclick="myFunc();" />
<input type="button" value="Cancel">
</form>
<form d="form2" name="SecondForm">
<input type="button" value="Don't ClickMe"/>
</form>
</body>
</html>
注意-此示例返回表单和元素的对象,我们将不得不使用本教程中未讨论的那些对象属性来访问它们的值。
