search

Home >Web Front-end >JS Tutorial >A brief introduction to JavaScript's support for the traditional document object model_Basic knowledge

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

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

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>

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：How to use AngularJS to implement HTML page nesting_AngularJSNext article：How to use AngularJS to implement HTML page nesting_AngularJS

Related articles

See more