How to Access Document Properties using W3C DOM ?

Last Updated : 26 Apr, 2023

In this article, we’ll learn about W3C DOM document properties, their methods for manipulating documents, and how they work in practice.

The World Wide Web Consortium, or WWW has established the document object model, which enables entry to and modification of every piece of document information (W3C). The document object model (DOM) in Internet Explorer 4 was first made available by Microsoft. The majority of fundamental W3C DOM elements are supported by IE 5 and subsequent versions. The majority of current browsers accept this model.

The W3C DOM presents new features while standardizing the majority of the legacy DOM’s existing ones. It specifies methods that enable scripts to access and modify any document element, not just specialized elements such as forms and images, in addition to handling forms[], images[], as well as other array characteristics of the Document object.

W3C DOM Document Properties: All Legacy DOM attributes are supported by this model. Below is a collection of document properties that can also be viewed through the W3C DOM.

Property & Specifications:

body: A pointer to the document’s <body> tag’s associated Element object. Ex: document.body
defaultView: Its Read-only feature and the window that the text is displayed in are represented by this property. Ex: document.defaultView
documentElement: A read-only pointer to the document’s <html> tag. Ex: document.documentElement
Implementation: It depicts the DOM Execution object that stands for the implementation that produced this document and is a read-only property. Ex: document.implementation

W3C DOM Document Methods: All of the Standard DOM’s accessible methods are supported by this model. Here is a collection of additional techniques that the W3C DOM supports.

Property & Specifications:

createAttribute(name): Returns a brand-new Attr node carrying the requested name. Ex: document.createAttribute(name)
createComment( text): Creates a fresh Comment node with the given content hidden within it and returns it. Ex: document.createComment(text)
createDocumentFragment( ): Creates a new empty Document Fragment component and returns it. Ex: document.createDocumentFragment( )
createElement(tagName): Creates a new empty Document Fragment component and returns it. Ex: document.createElement(tagName)
createTextNode(text): Creates a fresh Text node with the given content inside of it and returns it. Ex: document.createTextNode(text)
getElementById(id): Returns null if there is no such element in the document or the document’s element with the given value by its id attribute. Ex: document.getElementById(id)
getElementsByName(name): Returns a list of nodes for each element in the document whose name attribute has the given value. If no such components are located, a zero-length array is returned. Ex: document.getElementsByName(name)
getElementsByTagName(tagname): Returns an array containing all of the document’s Element elements that have the requested tag name. The returned array’s Element nodes show the identical order as they do in the document original. Ex: document.getElementsByTagName(tagname)
importNode(importedNode, deep): Creates a duplicate of a node from another document that is appropriate for entry into this document and returns it. It recursively duplicates the node’s descendants if the deep parameter is true. This method is also supported in DOM Version 2. Ex: document.importNode(Nodeimported,deep.

Example 1: In this example, we will access the document properties using W3C DOM method 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>

Output:

Accessing document properties using the W3C DOM method getElementById.

Example 2: In this example, we will access the document properties using the W3C DOM method 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>