Free Web Development Online Tutorials, Learn to Code
javascript DOM get element by class name, javascript dom manipulation examples, javascript with dom examples

JavaScript DOM Manipulation

One of the most unique features of JavaScript is its ability to manipulate DOM the web document object model

Javascript DOM

JavaScript DOM Examples

What is DOM? DOM is (Document Object Model) an object structure of document, where JavaScript can access each object either by their name, id or css-class .

In JavaScript we can access object by some methods like getElementById, getElementsByName, getElementsByClassName etc.

After accessing the object we can set/reset some properties (like value, innerHTML, innerText ) of that object

Here is an Example, we simply want to change the label of the button below once the button is clicked.

This is how we can access the button DOM using javascript, then write a function and call on button click event

document.getElementById("btnUpdate").value = "Yes, You have clicked";

Now let's look at another example of changing the innerHTML of a DIV using JavaScript DOM

Learning Javascript DOM is Fun!

Click => , Below is the code.

document.getElementById("dvDomTest").innerHTML = "Oh Yes, Learning JavaScript DOM, will use in my  Project";

To write anything in document use document.write(string)

<script>
document.write("Javascript DOM easy to work wiith");
</script>

JavaScript DOM Events Example

JavaScript code can be executed when any changes happen in DOM or any event occurs, let’s understand following scenario.

  • When a web page has loaded completely
  • When the mouse moves over an element
  • When a user clicks the mouse
  • When any value changes in input field or dropdown list
Different ways to use JavaScript events to manipulate DOM

Now you know how document structure, element, node is in a DOM (document object model), so let’s understand how to change or manipulate some value of document using JavaScript code.

  • By attaching scripts to event attributes on elements in the HTML document
  • By setting the "on_event_" property on the DOM object in your JavaScript
    // the JavaScript file
    var btn = document.querySelector('#btn');
    btn.onclick = () => alert("Hello World");
    
  • By attaching an event listeners to the element in your JavaScript.
    // the JavaScript file
    var btn = document.querySelector('#btn');
    btn.addEventListener('click', () => {
      alert("Hello World");
    });
    

JavaScript DOM Manipulation Example

  • Create a DOM element

    Use method createElement() for creating a new element

    var el = document.createElement('div');
    el.innerHTML = '<p>Hello World!</p>';
    
    You also can use other options
    document.createElement(tagName[, options])
    
  • Create a DOM Node

    Use method createTextNode() for creating a new Node

    var textnode = document.createTextNode('Hello World!');
    el.appendChild(textnode);
    document.body.appendChild(el);
    
  • Get the text content of an element

    We can set and get text content of any html element using JavaScript

        var dv = document.querySelector('div');
    	text = dv.textContent || dv.innerText;
    	document.write(text);
    
  • Get HTML content of an element

    Set and Get HTML content of any Html element using JavaScript, , very similar to jQuery's $.html() method

    var dv = document.querySelector('div');
    	
    // set some content with HTML code
    dv.innerHTML = '<b>Hello World!</b>';
    
  • Insert an element after or before other element

    Insert any HTML element after or before any specific HTML element, will change the DOM tree element.

    function insertAfter(el, referenceNode) {
    	referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
    }
    	
    // create a new element
    var newEl = document.createElement('div');
    newEl.innerHTML = '<b>Hello World!</b>';
    	
    var ref = document.querySelector('div.before');
    	
    insertAfter(newEl, ref);
    // now before element
    function insertBefore(el, referenceNode) {
    	referenceNode.parentNode.insertBefore(el, referenceNode);
    }
    

    Notice, how to use built-in DOM method parentNode.insertBefore and parentNode.insertBefore

Comment
Name
Email
Website
Subscribe
 
Learn JavaScript DOM


javascript Interview Questions Answers


JavaScript DOM Example
JavaScript Examples | JavaScript Online Course