如何使用W3C DOM访问文档属性

在本文中，我们将学习有关W3C DOM文档属性的知识，以及它们在实际操作中的使用方法。

万维网联盟（WWW）建立了文档对象模型，它可以访问和修改文档中的每个信息（W3C）。微软首次在Internet Explorer 4中提供了文档对象模型（DOM）。IE 5和后续版本都支持大多数基本的W3C DOM元素。大多数当前的浏览器都支持这个模型。

W3C DOM提供了新的功能，同时标准化了大多数传统DOM现有的功能。它指定了一些方法，使脚本能够访问和修改文档的任何元素，而不仅仅是特定的元素，如表单和图像，还能处理表单[]、图像[]和其他数组属性。

W3C DOM文档属性： 这个模型支持所有传统的DOM属性。以下是一些也可以通过W3C DOM查看的文档属性的集合。

属性和规范：

body（主体）: 指向文档<body>标签关联的Element对象的指针。例如：document.body
defaultView（默认视图）: 该属性表示只读特性和文本所显示的窗口。例如：document.defaultView
documentElement（文档元素）: 只读指针，指向文档的<html>标签。例如：document.documentElement
Implementation（实现）: 它代表生成此文档的DOM执行对象，是一个只读属性。例如：document.implementation

W3C DOM文档方法： 该模型支持所有标准DOM的可访问方法。下面是一些W3C DOM支持的附加技术的集合。

属性和规范：

createAttribute(name): 返回一个新的包含请求名称的Attr节点。示例：document.createAttribute(name)
createComment(text): 创建一个带有隐藏内容的新注释节点，并返回它。示例：document.createComment(text)
createDocumentFragment(): 创建一个新的空的文档片段组件，并返回它。示例：document.createDocumentFragment()
createElement(tagName): 创建一个新的空的文档片段组件，并返回它。示例：document.createElement(tagName)
createTextNode(text): 创建一个带有给定内容的新文本节点，并返回它。示例：document.createTextNode(text)
getElementById(id): 如果文档中不存在具有给定id属性值的元素，则返回null。示例：document.getElementById(id)
getElementsByName(name): 返回文档中每个name属性具有给定值的元素的节点列表。如果找不到这样的组件，则返回一个长度为零的数组。示例：document.getElementsByName(name)
getElementsByTagName(tagname): 返回一个包含所有文档中具有请求标签名称的Element元素的数组。返回的数组中的Element节点显示与文档中原始元素相同的顺序。示例：document.getElementsByTagName(tagname)
importNode(importedNode, deep): 创建来自另一个文档的节点的副本，适合于进入此文档，并返回它。如果deep参数为true，则递归复制节点的后代。此方法在DOM版本2中也受支持。示例：document.importNode(Nodeimported, deep)

示例1： 在此示例中，我们将使用W3C DOM方法getElementById访问文档属性。

<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<pre translate="no"><!DOCTYPE html>
<html>
<head>
<title> GeeksForGeeks </title>
<script type="text/javascript">
function Func() {
var ret = document.getElementById("heading");
alert(ret.innerHTML);
}
</script>
</head>
<body>
<h1 id="heading">GeeksForGeeks</h1>
<p>
Example to illustrate about how to access the document <br> properties using W3C DOM method getElementById.
</p>
<form id="form" name="formname">
<input type="button" value="Click" onclick="Func();" />
</form>
</body>
</html>

输出：

如何使用W3C DOM访问文档属性

通过使用W3C DOM方法getElementById访问文档属性。

<!DOCTYPE html>
<html>
<head>
<title> GeeksForGeeks </title>
<script type="text/javascript">
function Func() {
var ret = document.getElementById("heading");
alert(ret.innerHTML);
}
</script>
</head>
<body>
<h1 id="heading">GeeksForGeeks</h1>
<p>
Example to illustrate about how to access the document <br> properties using W3C DOM method getElementById.
</p>
<form id="form" name="formname">
<input type="button" value="Click" onclick="Func();" />
</form>
</body>
</html>

输出：

如何使用W3C DOM访问文档属性

通过使用W3C DOM方法getElementById访问文档属性。

示例2： 在这个例子中，我们将使用W3C DOM方法getElementsByTagName来访问文档属性。

<!DOCTYPE html>
<html>
<head>
    <title> GeeksForGeeks </title>
    <script type="text/javascript">
        function Func() {
            var gfg = document.getElementsByTagName("title");
            alert("文档标题： " + gfg[0].text);
        }
    </script>
</head>

<body>
    <h1 id="heading">GeeksForGeeks</h1>
    <p>    
          例子，演示如何使用W3C DOM方法访问
          文档的属性。
      </p>
    <form id="form" name="formname">
        <input type="button" value="点击" onclick="Func();" />
    </form>
</body>
</html>

输出结果：

如何使用W3C DOM访问文档属性