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

在本文中，我们将了解W3C DOM文档属性，它们用于操作文档的方法，以及它们在实践中的工作原理。

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

W3C DOM在标准化绝大多数旧版DOM现有功能的同时提供了新特性。它指定了一些方法，使得脚本可以访问和修改任何文档元素，而不仅仅是专用元素，如表单和图片，还可以处理Document对象的forms[]，images[]以及其他数组特性。

W3C DOM文档属性： 这个模型支持所有旧版DOM属性。以下是一些可以通过W3C DOM查看的文档属性。

属性和规范：

body： 指向文档中<body>标签相关的Element对象的指针。例如：document.body
defaultView： 它是一个只读属性，表示文本显示在哪个窗口中。例如：document.defaultView
documentElement： 只读指针，指向文档的标签。例如：document.documentElement
Implementation： 它表示DOM执行对象，表示生成此文档的实现，并且是一个只读属性。例如：document.implementation
W3C DOM文档方法： 这个模型支持所有标准DOM可访问的方法。以下是W3C DOM支持的额外技术的集合。

属性和规范：
createAttribute(name): 返回一个带有指定名称的全新的属性节点。例：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，否则返回指定 id 的元素节点。例：document.getElementById(id)
getElementsByName(name): 返回文档中具有指定 name 属性值的元素的节点列表。如果没有找到相应的元素，返回一个空数组。例：document.getElementsByName(name)
getElementsByTagName(tagname): 返回一个包含文档中所有具有指定标签名的元素节点的数组。返回的数组中元素节点的顺序与它们在文档中的原始顺序一致。例：document.getElementsByTagName(tagname)
importNode(importedNode, deep): 创建一个从另一个文档中复制的节点，适用于插入到当前文档中，并返回该节点。如果 deep 参数为 true，则递归复制节点的后代节点。该方法也支持 DOM Version 2。例：document.importNode(Nodeimported,deep)

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

HTML

<!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>

输出：

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

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

HTML

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

输出:

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