Interactive Web Development with JavaScript and DOM

Introduction to JavaScript and DOM

Welcome aboard! In today's lesson, we are exploring the dynamic duo of JavaScript and the Document Object Model (DOM). Working in tandem with the DOM, we can manipulate and update our web pages in real-time based on user interactions. Do you remember how some websites greet, "Good morning!" during the day and "Good night!" after sundown? This dynamic behavior is exactly what we aim to achieve using JavaScript and DOM.

Linking JavaScript to HTML

To introduce JavaScript into HTML, we need the <script> tag. Although JavaScript can be written directly inside HTML, it's often tidier to store it in separate files: HTML <!DOCTYPE html> <html> <body> <h1>Welcome to My Web Page</h1> <p id="demo">This is a paragraph.</p> <!-- Linking an external JavaScript file --> <script src="myscript.js"></script> </body> </html> <!DOCTYPE html> <html> <body> <h1>Welcome to My Web Page</h1> <p id="demo">This is a paragraph.</p> <!-- Linking an external JavaScript file --> <script src="myscript.js"></script> </body> </html> Inline <script> tags also serve as an option: HTML <!DOCTYPE html> <html> <body> <h1>Welcome to My Web Page</h1> <p id="demo">This is a paragraph.</p> <!-- Inline JavaScript --> <script> // Changing the paragraph text document.getElementById("demo").innerHTML = "Hello, there!"; </script> </body> </html> <!DOCTYPE html> <html> <body> <h1>Welcome to My Web Page</h1> <p id="demo">This is a paragraph.</p> <!-- Inline JavaScript --> <script> // Changing the paragraph text document.getElementById("demo").innerHTML = "Hello, there!"; </script> </body> </html> The innerHTML property is a powerful tool that allows us to get the content of elements or directly insert content into elements in our HTML. In the code above, we used innerHTML to change the text content of a paragraph.

Understanding DOM Manipulation

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

HTML

<!DOCTYPE html>
<html>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p id="demo">This is a paragraph.</p>
    <!-- Linking an external JavaScript file -->
    <script src="myscript.js"></script> 
  </body>
</html>

HTML

<!DOCTYPE html>
<html>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p id="demo">This is a paragraph.</p>
    <!-- Inline JavaScript -->
    <script> 
      // Changing the paragraph text
      document.getElementById("demo").innerHTML = "Hello, there!";
    </script> 
  </body>
</html>

HTML

<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Hello World!</h1>
    <button onclick="changeTitle()">Transform title</button>
    <script>
      function changeTitle() {
        // Selects the 'title' element
        let titleElement = document.getElementById('title');
        // Changes the element's content and color
        titleElement.innerHTML = 'Hello JavaScript!';
        titleElement.style.color = 'red';
      }
    </script>
  </body>
</html>

HTML

<script>
  let titleElement = document.getElementById('title');
  titleElement.style.backgroundColor = 'yellow';  //changes the background color of the title element to yellow 
</script>

HTML

<div id="div2" class="oldClass">Some div</div>
<script>
    let otherDiv = document.querySelector('#div2');
    otherDiv.classList.add('newClass');
    otherDiv.classList.remove('oldClass');
</script>

<div id="div2" class="oldClass">Some div</div>
<script>
    let otherDiv = document.querySelector('#div2');
    otherDiv.classList.add('newClass');
    otherDiv.classList.remove('oldClass');
</script>

HTML

<img id="image1" src="myimage.jpg">
<script>
    let img = document.getElementById('image1');
    img.setAttribute('alt', 'An image');
    let imgSource = img.getAttribute('src');
    console.log(imgSource); // prints 'myimage.jpg' to the console
</script>

<img id="image1" src="myimage.jpg">
<script>
    let img = document.getElementById('image1');
    img.setAttribute('alt', 'An image');
    let imgSource = img.getAttribute('src');
    console.log(imgSource); // prints 'myimage.jpg' to the console
</script>

HTML

<button class="btn">Click me</button>
<script>
    let btn = document.getElementsByClassName('btn')[0];
    btn.addEventListener('click', function() {
        alert('Button clicked!'); // the alert function displays a dialog box containing the provided text
    });
</script>

<button class="btn">Click me</button>
<script>
    let btn = document.getElementsByClassName('btn')[0];
    btn.addEventListener('click', function() {
        alert('Button clicked!'); // the alert function displays a dialog box containing the provided text
    });
</script>

HTML

<button onclick="createPara()">Create a paragraph</button>
<button onclick="removePara()">Remove the paragraph</button>
<div id="myDiv"></div>
<script>
function createPara() {
  let para = document.createElement("P");                 
  let t = document.createTextNode("This is a paragraph.");    
  para.appendChild(t); // using appendChild to insert the created text node into the paragraph
  document.getElementById("myDiv").appendChild(para); // appending the paragraph to the existing div
}
function removePara() {
  let parent = document.getElementById("myDiv");
  let child = parent.getElementsByTagName("P")[0];
  parent.removeChild(child); // removing the paragraph from the div
}
</script>

<button onclick="createPara()">Create a paragraph</button>
<button onclick="removePara()">Remove the paragraph</button>
<div id="myDiv"></div>
<script>
function createPara() {
  let para = document.createElement("P");                 
  let t = document.createTextNode("This is a paragraph.");    
  para.appendChild(t); // using appendChild to insert the created text node into the paragraph
  document.getElementById("myDiv").appendChild(para); // appending the paragraph to the existing div
}
function removePara() {
  let parent = document.getElementById("myDiv");
  let child = parent.getElementsByTagName("P")[0];
  parent.removeChild(child); // removing the paragraph from the div
}
</script>

HTML

<div id="div2" class="oldClass">Some div</div>
<script>
    let otherDiv = document.querySelector('#div2');
    otherDiv.classList.add('newClass');
    otherDiv.classList.remove('oldClass');
</script>

HTML

<img id="image1" src="myimage.jpg">
<script>
    let img = document.getElementById('image1');
    img.setAttribute('alt', 'An image');
    let imgSource = img.getAttribute('src');
    console.log(imgSource); // prints 'myimage.jpg' to the console
</script>

HTML

<button class="btn">Click me</button>
<script>
    let btn = document.getElementsByClassName('btn')[0];
    btn.addEventListener('click', function() {
        alert('Button clicked!'); // the alert function displays a dialog box containing the provided text
    });
</script>

HTML

<button onclick="createPara()">Create a paragraph</button>
<button onclick="removePara()">Remove the paragraph</button>
<div id="myDiv"></div>
<script>
function createPara() {
  let para = document.createElement("P");                 
  let t = document.createTextNode("This is a paragraph.");    
  para.appendChild(t); // using appendChild to insert the created text node into the paragraph
  document.getElementById("myDiv").appendChild(para); // appending the paragraph to the existing div
}
function removePara() {
  let parent = document.getElementById("myDiv");
  let child = parent.getElementsByTagName("P")[0];
  parent.removeChild(child); // removing the paragraph from the div
}
</script>