A brief introduction to JavaScript's support for the traditional document object model

A brief introduction to JavaScript's support for the traditional document object model_Basic knowledge

WBOY

Release： 2016-05-16 15:54:39

Original

966 people have browsed it

This is the model that was introduced in earlier versions of the JavaScript language. All are supported by all browsers, but only allow access to certain key parts of the file, such as forms, form elements and images.

This model provides several read-only properties such as title, URL, and last change that provide information about the document as a whole. In addition there are various methods provided by this model that can be used to set and get property values of the document.
Document properties in traditional DOM:

The following is a list of document properties that can be accessed using traditional DOM:

2015616103205974.jpg (662×762)

2015616103233946.jpg (655×726)

Document method in traditional DOM:

Here is a list of methods supported by the traditional DOM:

2015616103255189.jpg (681×498)

Example:

We can find any HTML element, any HTML document using HTML DOM. For example, if a web document contains a form element, then using JavaScript, we can call it document.forms[0]. If a web document includes two form elements the first form is called document.forms[0] and the second is document.forms[1].

Using the hierarchical structure and properties given above, you can use document.forms[0].elements[0], etc.

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

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

  var ret = document.URL;
  alert("Document URL : " + ret );

  var ret = document.forms[0];
  alert("Document First Form : " + ret );

  var ret = document.forms[0].elements[1];
  alert("Second element : " + ret );

}
//-->
</script>
</head>
<body>
<h1 id="title">This is main title</h1>
<p>Click the following to see the result:</p>

<form name="FirstForm">
<input type="button" value="Click Me" onclick="myFunc();" />
<input type="button" value="Cancel">
</form>

<form name="SecondForm">
<input type="button" value="Don't ClickMe"/>
</form>

</body>
</html>

Copy after login

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.