Javascript Course

Here there is a list with useful properties and methods of the document object, with Javascript code and examples.

Properties of the document object

document.body - returns the <body> HTML element.
<h4>width and height of the BODY element</h4>
<blockquote id='resp'>width x height</blockquote>

var bwidth = document.body.offsetWidth;
var bheight = document.body.offsetHeight;
document.getElementById('resp').innerHTML = bwidth +'x'+ bheight;
document.cookie - returns a string with 'nume=valoare' pairs (separated by ; ) with the cookies associated to the current page, or sets the cookie, a string with this format: nume=valoare.
<p>- Displays an alert dialog box with cookies associated to this page.</p>
 <button onclick="alertCookie()">Show cookies</button>
document.cookie ='nume1=marplo';
document.cookie = "cookie_2=valoare";
function alertCookie(){
document.forms - returns an array with the <form> elements in page.
<form id='form_1'>
<input type='text' value='F-1'/>
<form id='form_2'>
<input type='text' value='F-2'/>

<div id='resp'>document.forms</div>
var resp ='Number of forms in page: '+ document.forms.length +', with ides:';

//adds the ids in resp
for(var i=0; i<document.forms.length; i++) resp +='<br> - '+document.forms[i].id;

document.getElementById('resp').innerHTML = resp;
document.head - returns the <head> element.
<div id='dv1'>style added from JS in document.head.</div>
//addss in head a style element with css properties
document.head.insertAdjacentHTML('beforeend', '<style>#dv1{background:#cdf0e0; color:#0000b5; padding:5px;}</style >');
document.images - returns an array with the <img> elements in page.
<img src='/imgs/7.gif' title='Hugs'/><br>
<img src='/imgs/smile_gift.png' title='Gift'/>

<div id='resp'>document.images</div>
var resp ='Number of images in page: '+ document.images.length +', with these src:';

//adds the src address in resp
for(var i=0; i<document.images.length; i++) resp +='<br> - '+document.images[i].src;

document.getElementById('resp').innerHTML = resp;
document.links - contains an array with all the anchors (<a>) in page.
<a href='//' title=''></a>
<ul><li><a href='//' title=''></a></li></ul>
<div><a href='//' title=''></a></div>

<blockquote id='resp'>document.links</blockquote>
var resp ='Number of links in page: '+ document.links.length +', with href:';

//adds href value in resp
for(var i=0; i<document.links.length; i++) resp +='<br> - '+document.links[i].href;

document.getElementById('resp').innerHTML = resp;
document.referrer - returns the URI address of the page from which the current page was opened, or an empty string if the page is not opened with a link directly from other page.
<blockquote id='resp'>document.referrer</blockquote>
var resp ='The page was opened from: '+ document.referrer
document.getElementById('resp').innerHTML = resp;
document.title - returns or changes the title of the page (from <title>).
var title = document.title;
document.write('Titlu:<br>'+ title);

//changes the title (see the title in the browser)
document.title ='Peace is good';
document.URL - returns a string with the page address.
<blockquote id='resp'>URL</blockquote>
var resp ='The URL address of this page: '+ document.URL;
document.getElementById('resp').innerHTML = resp;

Methods of the document object

document.createElement('tag') - creates an object with html element specified in the 'tag' argument. - See the tutorial from:
<div id='resp'>Reference element</div>
// create a Div
var newDiv = document.createElement('div');

//adds HTML content
newDiv.innerHTML ='Content made with <em>createElement()</em>.'; 

//the reference object
var reper = document.getElementById('resp');

//add the new item in DOM before reper
document.body.insertBefore(newDiv, reper);
document.getElementById(id) - returns the HTML element with the specified id.
<div id='dv1'>Example with <em>getElementById()</em></div>
The content from #dv1 is:
<blockquote id='resp'>str</blockquote>

//gets the html tag with id dv1
var dv1 = document.getElementById('dv1');

//gets the html content from dv1
var dv1_cnt = dv1.innerHTML;

//adds the string from dv1_cnt as text in #resp
document.getElementById('resp').textContent = dv1_cnt;
document.getElementsByClassName('class') - returns an array with the HTML that have the specified 'class'.
<h3 class='cls'>H3 with class='cls'</h3>
<div>Div without class.</div>
<div class='cls'>Another Div, with class 'cls'</div>

<blockquote id='resp'>getElementsByClassName()</blockquote>
//array with elements with claas .cls
var ecls = document.getElementsByClassName('cls');
document.getElementById('resp').innerHTML ='The first element with class "cls" contains:<br>'+ ecls[0].innerHTML;
document.getElementsByName(name) - returns an array with HTML elements that have the specified 'name' (in the name attribute).
<form name='up'>Form with name 'up'</form>
<div name='down'>Div with name 'down'</div>

var up_names = document.getElementsByName('up');
console.log(up_names[0].tagName); // FORM
document.getElementsByTagName('tag') - returneaza an array with HTML elements that have specified 'tag'.
<h3 id='id_elm'>Where are two, there is only one two times.</h3>
<div>Div, HTML content</div>
<h3>Another tag H3</h3>
<blockquote id='resp'>Response JS.</blockquote>

//array with H3 tags
var ar_h3 = document.getElementsByTagName('h3');

//adds in #resp number of H3 tags and id of first H3
if(ar_h3.length >0){
 var idh = ar_h3[0].id; //id of 1st item in ar_h3
 document.getElementById('resp').innerHTML ='There are '+ ar_h3.length +' H3 tags, the first H3 has id: '+ idh;
document.querySelector('css_sel') - returns the first element within the document that matches the specified group of selectors, or null if no matches are found. - See the tutorial from:
<div id='dv1'>
<div id='dv2' class='cls'>Div with id #dv2 and class .cls.</div>
<p id='p1' class='cls'>Paragraph with id #p1 and class .cls.</p>

<blockquote id='resp'>document.URL</blockquote>
//1st item with .cls within #dv1
var elm = document.querySelector('#dv1 .cls');

//displays the id of element from elm.
document.getElementById('resp').innerHTML ='First element that matches "#dv1 .cls" has the id: '+;
document.querySelectorAll('css_sel') - returns an array with the elements that match the specified group of CSS selectors.
<div id='dv1'>
<div id='dv2' class='cls'>Div with id #dv2 and class .cls.</div>
<p id='p1' class='cls'>Paragraph with id #p1 and class .cls.</p>

<blockquote id='resp'>querySelectorAll()</blockquote>
//array with elements with class .cls in #dv1
var elms = document.querySelectorAll('#dv1 .cls');

var resp ='There are '+ elms.length +' elements that match "#dv1 .cls". Their id:';

//traverses the items and adds their id in resp
for(var i=0; i<elms.length; i++) resp +='<br>- '+ elms[i].id;

document.getElementById('resp').innerHTML = resp;
document.write(str) - writes the string from 'str' in page.
<h3>Example document.write()</h3>
document.write('Content added with <em>document.write()</em>');

Daily Test with Code Example

Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
Click on the "echo" correct instruction.
echo "" echo ""; echo """;
echo "Address URL:";
Properties and Methods of the document object

Last accessed pages

  1. Add sounds and audio effects in Flash (3492)
  2. Detect when ScrollBar reaches the bottom of the page (4384)
  3. JQZoom Image Magnifier (12996)
  4. Simple arithmetic calculator in PHP (2104)
  5. querySelector and querySelectorAll (30064)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (326)
  2. PHP Unzipper - Extract Zip, Rar Archives (86)
  3. Read Excel file data in PHP - PhpExcelReader (82)
  4. The Mastery of Love (78)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (65)