HTML - DOM Element ownerDocument Property

Quiz

The HTML DOM Element ownerDocument is a read-only property used to retrieve the document object that contains a specific element. The owner document refers to the top-level document object that a specific element belongs to, such as the main HTML document.

This property provides a way to access the document that contains a specific element, making it possible to interact with and manipulate the entire document through that single element.

Syntax

Following is the syntax of the HTML DOM Element ownerDocument property −

element.ownerDocument;

Parameters

Since this is a property, it does not accept any parameter.

Return Value

This property returns a document object that holds a specific element.

Example 1: Retrieving Node Type of Owner Document

The following program demonstrates the usage of the HTML DOM Element ownerDocument property. It retrieves the node type of the owner document of the div element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element ownerDocument</title>
</head>
<body>
<h3>HTML DOM Element OwnerDocument Property</h3>
<p>Click button to get Node Type of the owner document of "div" element</p>
<div id="exdiv">
<p>Paragraph inside a div.</p>
</div>
<button onclick="showOwnerDocumentType()">Show Owner Document Type</button>
<hr>
<p id="output"></p>
<script>
   function showOwnerDocumentType() {
      var ex = document.getElementById('exdiv');
      var ownerDoc = ex.ownerDocument;
      var ownd = ownerDoc.nodeType;
      var otd = document.getElementById('output');
      otd.textContent = `Owner Document Type: ${ownd}`;
   }
</script>
</body>
</html>

The above program displays the node type of the owner document of the "div" element as "9". The nodeType property returns an integer that indicates the type of the node.

Example 2: Document Title using ownerDocument

Here is another example of using the HTML DOM Element ownerDocument property. We use this property to retrieve the title of the owner document of the p element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element ownerDocument</title>
</head>
<body>
<h3>HTML DOM Element OwnerDocument Property</h3>
<p>Click button to get the title of the document that owns the element..</p>
<div id="ex">
<p>This paragraph is inside a div element.</p>
</div>
<button onclick="showOwnerDocument()">Show Title</button>
<p id="ot"></p>
<script>
   function showOwnerDocument() {
      var exDiv = document.getElementById('ex');
      var ownerDoc = exDiv.ownerDocument;
      var ownerTitle = ownerDoc.title;
      var message = `Owner Document Title: ${ownerTitle}`;
      var ot = document.getElementById('ot');
      ot.textContent = message;
   }
</script>
</body>
</html>

After executing the above program, the "title" of the owner document will be displayed.

Supported Browsers

Property
ownerDocument	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page