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>

<script>
var bwidth = document.body.offsetWidth;
var bheight = document.body.offsetHeight;
document.getElementById('resp').innerHTML = bwidth +'x'+ bheight;
</script>
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>
 
<script>
document.cookie ='nume1=marplo';
document.cookie = "cookie_2=valoare";
function alertCookie(){
 alert(document.cookie);
}
</script>
document.forms - returns an array with the <form> elements in page.
<form id='form_1'>
<input type='text' value='F-1'/>
</form>
<form id='form_2'>
<input type='text' value='F-2'/>
</form>

<div id='resp'>document.forms</div>
<script>
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;
</script>
document.head - returns the <head> element.
<div id='dv1'>style added from JS in document.head.</div>
<script>
//addss in head a style element with css properties
document.head.insertAdjacentHTML('beforeend', '<style>#dv1{background:#cdf0e0; color:#0000b5; padding:5px;}</style >');
</script>
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>
<script>
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;
</script>
document.links - contains an array with all the anchors (<a>) in page.
<a href='//marplo.net' title='MarPlo.net'>MarPlo.net</a>
<ul><li><a href='//gamv.eu' title='GamV.eu'>GamV.eu</a></li></ul>
<div><a href='//coursesweb.net' title='CoursesWeb.net'>CoursesWeb.net</a></div>
<hr>

<blockquote id='resp'>document.links</blockquote>
<script>
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;
</script>
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>
<script>
var resp ='The page was opened from: '+ document.referrer
document.getElementById('resp').innerHTML = resp;
</script>
document.title - returns or changes the title of the page (from <title>).
<script>
var title = document.title;
document.write('Titlu:<br>'+ title);

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

Methods of the document object

document.createElement('tag') - creates an object with html element specified in the 'tag' argument. - See the tutorial from: coursesweb.net/javascript/createelement_insertbefore.html
<div id='resp'>Reference element</div>
<script>
// 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);
</script>
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>

<script>
//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;
</script>
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>
<script>
//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;
</script>
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>

<script>
var up_names = document.getElementsByName('up');
console.log(up_names[0].tagName); // FORM
</script>
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>

<script>
//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;
}
</script>
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: coursesweb.net/javascript/queryselector-queryselectorall
<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>
</div>

<blockquote id='resp'>document.URL</blockquote>
<script>
//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: '+ elm.id;
</script>
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>
</div>

<blockquote id='resp'>querySelectorAll()</blockquote>
<script>
//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;
</script>
document.write(str) - writes the string from 'str' in page.
<h3>Example document.write()</h3>
<script>
document.write('Content added with <em>document.write()</em>');
</script>

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
Properties and Methods of the document object

Last accessed pages

  1. Send Email with Nodemailer (1134)
  2. sPBM - Simple PHP Backup Manager (1186)
  3. Contact page - CoursesWeb (10970)
  4. Tabs effect with CSS (11677)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (17576)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1977)
  2. Contact page - CoursesWeb (1925)
  3. Tabs effect with CSS (1925)
  4. Insert, Select and Update NULL value in MySQL (1228)
  5. PHP getElementById and getElementsByTagName (723)