The document object is an object that is created by the browser for each HTML page (document) that is viewed.
The Document object is a property of the Window object, and can be accessed through the window.document, but, becouse the "window" is the main object, it can be omited.
DOM stands for "Document Object Model", it is a hierarchy of data types for HTML documents, links, forms, tags, and everything else that can be represented in HTML code.
DOM allows JavaScript to access the structure of the document in the browser.

Document Object Properties


- Exemples with some of these properties:
1) Display and change the text from TITLE meta-tag
<script type="text/javascript"><!--
document.write(document.title);         // Document Object - DOM
document.title = 'New title';         // "New title" will appear in the tittle bar
--></script>

2) In the following example, the JS script gets and writes the domain and the complete URL of the page.
<script type="text/javascript"><!--
var domain_site = document.domain;
var url = document.URL;

document.write(domain_site+ '<br />');         // coursesweb.net
document.write(url);         // http://coursesweb.net/javascript/document-object-dom
--></script>

3) In the next example three link tags are defined and a JS script writes the address from the second link.
<a href="http://coursesweb.net" title="Courses Web">CoursesWeb</a><br />
<a href="http://www.marplo.net" title="Lessons, Tutorials">Lessons, Tutorials</a><br />
<a href="http://www.yahoo.com" title="yahoo.com">yahoo.com</a><br />
<script type="text/javascript"><!--
var adrs = document.links;      //  gets all links from <a> tags

document.write(adrs[1]);         // http://www.marplo.net/
--></script>

Document Object Methods


• You can get the content of a HTML tag, when you know its ID, by using one of the fallowing sintaxes:
variable_name = document.getElementById("id").innerHTML;
      or
variable_name = document.getElementById("id").childNodes[0].nodeValue;

• To change or add a content inside a HTML that has an ID, use the fallowing expresion:
document.getElementById("id").innerHTML = "content";

- Exemples with some of these methods:
1) The following script displays an alert with the text added in a tag with id="an_id"
<div id="an_id">JS lessons and tutorials</div>
<script type="text/javascript"><!--
var str = document.getElementById('an_id');
alert(str.innerHTML);          // JS lessons and tutorials
--></script>

2) In the next example, when you click on the text "DOM JavaScript lesson", it is called a function that change that content, using the ID of that tag (transfered as a parameter).
- the expresion this.id gets the value of the ID attribute added in own element.
<script type="text/javascript"><!--
function changeTxt(id) {
  document.getElementById(id).innerHTML = "<u>new content</u>";
}
--></script>
<div id="ex2" onclick="changeTxt(this.id)">DOM JavaScript lesson</div>
- It will displays the fallowing rezult, click on the text to see the effect.
DOM JavaScript lesson

3) The next example uses the getElementsByTagName() method and return an alert with the number of LI tags
<script type="text/javascript"><!--
function nrElements(tag) {
  var tags = document.getElementsByTagName(tag);
  alert(tags.length);
}
--></script>
<ul>
 <li>Courses</li>
 <li>Lessons</li>
 <li>tutorials</li>
</ul>
<button onclick="nrElements('li')">How many LI tags</button>
- Click the button to see the result.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Document Object - DOM

Last accessed pages

  1. PHP OOP - Constructor Method (3127)
  2. SSEP - Site Search Engine PHP-Ajax (4261)
  3. Super Dragon Mahjongg (534)
  4. The Rise Of Atlantis (94)
  5. Butterfly Kyodai (1172)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (45775)
  2. Read Excel file data in PHP - PhpExcelReader (34434)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (34319)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (30908)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (28149)