Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to access document properties using W3C DOM method?
The W3C DOM (Document Object Model) provides standardized methods to access and manipulate HTML document properties. Unlike browser-specific approaches, W3C DOM methods work consistently across all modern browsers.
Common W3C DOM Methods
The most frequently used methods for accessing document properties include:
-
getElementById()- Gets element by its ID attribute -
getElementsByTagName()- Gets elements by tag name -
getElementsByClassName()- Gets elements by class name -
querySelector()- Gets first element matching CSS selector
Example: Accessing Document Properties
Here's how to access various document properties using W3C DOM methods:
<html>
<head>
<title>Document Title</title>
<script type="text/javascript">
function myFunc() {
// Access title element
var titleElements = document.getElementsByTagName("title");
alert("Document Title: " + titleElements[0].textContent);
// Access element by ID
var heading = document.getElementById("heading");
alert("Heading Content: " + heading.innerHTML);
// Access form by name
var form = document.forms["FirstForm"];
alert("Form Name: " + form.name);
// Access multiple elements by tag name
var buttons = document.getElementsByTagName("input");
alert("Number of input elements: " + buttons.length);
}
</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 id="form2" name="SecondForm">
<input type="button" value="Don't Click Me"/>
</form>
</body>
</html>
Output
When you click the "Click Me" button, you'll see a series of alert boxes showing:
Document Title: Document Title Heading Content: This is main title Form Name: FirstForm Number of input elements: 3
Key DOM Properties and Methods
| Method | Returns | Example |
|---|---|---|
getElementById() |
Single element | document.getElementById("myId") |
getElementsByTagName() |
NodeList collection | document.getElementsByTagName("div") |
getElementsByClassName() |
HTMLCollection | document.getElementsByClassName("myClass") |
Browser Compatibility
W3C DOM methods are supported in all modern browsers including Internet Explorer 6+, Firefox, Chrome, Safari, and Edge. These methods provide a standardized way to interact with document elements regardless of the browser.
Conclusion
W3C DOM methods provide reliable, cross-browser compatibility for accessing document properties. Use getElementById() for single elements and getElementsByTagName() for collections of elements.
225 Views
