Javascript

Document object model (DOM)

The Document Object Model (DOM) is a programming interface that allows JavaScript to interact with a web page's structure, style, and content: 

How it works

The DOM represents a document as a logical tree, with each branch ending in a node that contains objects. JavaScript can access the DOM dynamically after a page loads. 

What it does

The DOM allows developers to create, change, or remove elements from a document, and add events to those elements.  

How to use it

JavaScript methods like getElementById(), querySelector(), and querySelectorAll() can be used to select elements. The innerHTML property can be used to get or replace the content of HTML elements. 

What's required to use it

To understand the DOM and how it relates to working with the web, it's helpful to have some knowledge of HTML, CSS, and fundamental JavaScript. 

The DOM is a W3C (World Wide Web Consortium) standard that defines a platform and language-neutral interface for accessing and updating documents. 

<style>

  #printcontainer {

    background-color: lightgray;

  }

</style>

<div id="printcontainer">Hello</div>

<input type="button" onclick="printMyname()" value="Print Container">

<script>

  function printMyname() {

    document.getElementById("printcontainer").innerHTML = "Welcome to my world";

    document.getElementById("printcontainer").style.border = "5px solid red";

    var mytext =  document.getElementById('mytext').value

  }

</script>