search

Home  >  Article  >  Web Front-end  >  Detailed explanation of JavaScript's support for W3C DOM templates_Basic knowledge

Detailed explanation of JavaScript's support for W3C DOM templates_Basic knowledge

WBOY
WBOYOriginal
2016-05-16 15:54:331168browse

This document object model allows access to all document content and modifications, as specified by the World Wide Web Consortium (W3C). Almost all modern browsers support this mode.

The W3C DOM specification contains most of the features of traditional DOM, but also adds new and important features. In addition to supporting forms[ ], images[ ], and other array properties of the document object, it defines methods that enable scripts to access and manipulate any document element, not just specialized elements like forms and images.
Document properties in W3C DOM:

This model supports all properties provided by traditional DOM. Additionally, here is a list of document properties that can be accessed using the W3C DOM:

2015616110345962.jpg (684×368)

Document methods in W3C DOM:

This model supports all methods provided by the traditional DOM. Additionally, here is a list of methods supported by W3C DOM:

2015616110407101.jpg (655×753)

2015616110427713.jpg (674×348)

Example:

It is easy to manipulate (access and set) elements using W3C DOM documents. You can use any method like getElementById, getElementsByName, orgetElementsByTagName.

Here is an example of accessing document properties using W3C DOM methods: 

<html>
<head>
<title> Document Title </title>
<script type="text/javascript">
<!--
function myFunc()
{
 var ret = document.getElementsByTagName("title");
 alert("Document Title : " + ret[0].text );

 var ret = document.getElementById("heading");
 alert(ret.innerHTML );
}
//-->
</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 d="form2" name="SecondForm">
<input type="button" value="Don't ClickMe"/>
</form>

</body>
</html>

NOTE: This example returns objects such as form and content, and we will have to use properties of these objects that are not discussed in this tutorial to access their values.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Method of dynamically loading jQuery_jqueryNext article：Method of dynamically loading jQuery_jquery

Related articles

See more