WDT - HTML forms

JS - DOM manipulation

-------- The last chapter was added by JavaScript--------

JavaScript can query, control and manipulate

objects of the HTML Document Object Model

the Document Object

working on the top HTML element of the page and subeffiliates


document.activeElement;             //Returns the current active element in the page
document.title;                     //Returns the title of the page
document.title = 'Changed by JS';   //Changes the title of the page
document.body;                      //Returns all the content of the body element
document.head;                      //Returns all the content of the head element
....and many more


document.querySelector()            //Returns the first element that uses the selector
document.querySelector('div')       //Returns the first div element
document.querySelector('.head')     //Returns the first div with head class


document.querySelectorAll()         //Returns all the elements that uses the selector
document.querySelectorAll('div')    //Returns all the div element
document.querySelectorAll('.head')  //Returns all the divs with head class


var myDivs = document.querySelectorAll('div.head');
myDivs.forEach(function(everyDiv){
    console.log(everyDiv.innerHTML);  
});

Will return all the div elements with head class

Adding an html element with JS

document.createElement()


var e1 = document.createElement('div');                                 //create the element
e1.innerHTML = 'This will be added where the call to the JS file is'    //add data to the element
document.body.appendChild(e1);                                          //add them to the page

document.querySelector('div.head').appendChild(e1);

to add it to the first found div.head element or

document.querySelector('div.head').innerHTML = 'Replacing
';

to replace the first div.head

another way is to add text instead of innerHTML


var e1 = document.createTextNode(' My Text');                                 //create the element
document.body.appendChild(e1);                                          //add them to the page

to create DOM element with loop


var ul = document.querySelector('ul');
for(var index = 0; index < 10; index++){
    var li = document.createElement('li');
    li.className = 'itemAddedByJS'
    li.textContent = 'list item number ' + index;
    ul.appendChild(li);
}    
// Will find the first ul tag (here below - empty in the HTML)
// and add list items to it with the text

Just like appending, childs can be removed


var el = document.querySelector('li');
el.parentNode.removeChild(li);

This removes THE FIRST itemfrom the list above

it has removed list item number 0 that was added before

.childNode AND .children


var body = document.body;
for(var index = 0; index < body.childNode.length ; index++) {
    console.log(body.childNode[index]);
};

and


var body = document.body;
for(var index = 0; index < body.children.length ; index++) {
    console.log(body.children[index]);
};

both will return all the child objects of the selected element (body)

the Window Object

working on the properties of the window of the page


console;                            //Method for logging information
document;                           //Returns the DOM
history;                            //Returns the history object 
innerWidth, innerHeight;            //Returns the size of the content window
outerWidth, outerHeight;            //Returns the size of the browser window
location;                           //Returns the location object for the window
navigator;                          //Returns the Navigator object for the window

back to main page