JS HTML Dom – Dr James Froggatt

Finding HTML elements by Id

<!DOCTYPE html>
<html>
<head>
<style type="text/css">body { background-color: Green; }</style>
</head>
<body>

  <h1 id="myH1tag">This is the inner HTML if the H1 tag</h1>
  <p>This is a paragraph</p>
  <p id="para"></p>

</body>
</html>

<script>
// create a variable element of the H1 tag
var element = document.getElementById('myH1tag');
// set the innerHTML of the H1 tag
element.innerHTML = "New text";
// change the inner HTML of the paragraph with id=para
// to the contents of the h1 tag (that was changed above)
document.getElementById('para').innerHTML=element.innerHTML;
</script>

Finding HTML elements by Tag name : getElementsByTagName

<!DOCTYPE html>
<html>
<head>
<style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

  <h1>H1 tag</h1>
  <p>This is a paragraph 1</p>
  <p>This is paragraph 2</p>

</body>
</html>

<script>
// create a variable element of the H1 tag
var element = document.getElementsByTagName('p');
// set the innerHTML of the first p tag
element[0].innerHTML = "New text 1";
// set the innerHTML of the second p tag
element[1].innerHTML = "New text 2";

</script>

In the following example, we can select an element by an Id then look for all elements within the DOM with a certain tag.

First we look for an element with the ID of ‘aside’, then we look for all tags below that level (in this case all the paragraph tags). We then select the second paragraph tag (index 1) and change it.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

  <h1>H1 tag</h1>
  <aside id="aside">

    <p>This is a paragraph 1</p>
    <p>This is paragraph 2</p>

  </aside>

</body>
</html>

<script>
// create a variable element of the H1 tag
document.getElementById("aside").getElementsByTagName("p")[1].innerHTML="Changed";
</script>

getElementsByTagName creates a HTMLcollection object

An HTMLcollection object is not array but there a similarities.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

<div id="div1">
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p id="p3">This is paragraph 3</p>
</div>

<script>

// finds all the elements in the page with a paragraph tag
var parent = document.getElementsByTagName("p");
// show the number of paragraph elements on the page in
// the id=p3 tag
document.getElementById('p3').innerHTML = parent.length

</script>

</body>
</html>

Cycle through all the HTMLcollection and make changes to a specific element

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

<div id="div1">
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p id="p3">This is paragraph 3</p>
</div>

<script>

// finds all the elements in the page with a paragraph tag
var parent = document.getElementsByTagName("p");
// cycle through all the elements with the p tag
// and change the background colour to blue
var i;
for (i = 0; i < parent.length; i++) {
  parent[i].style.backgroundColor = "blue";
}

</script>

</body>
</html>

Finding HTML elements by class name

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

  <h1>H1 tag</h1>

    <p class="para">This is a paragraph 1</p>
    <p class="para">This is paragraph 2</p>

</body>
</html>

<script>
// create a variable element of the H1 tag
document.getElementsByClassName("para")[0].innerHTML="Changed";
</script>

Changing the values of an HTML attribute

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

  <h1>H1 tag</h1>

    <p id="para1"><font size="2em">This is paragraph 1</font></p>
    <p id="para2"><font size="2em">This is paragraph 2</font></p>

</body>
</html>

<script>
// gets the HTML with teh id of 'para1' and looks for all
// tags within that element with <font> - the code then changes
// the 'size' attribute from 2em to 6em
document.getElementById("para1").getElementsByTagName("font")[0].size="6em";
</script>

Changing the HTML css style

A good quick reference for the styles that can be set here can be found at W3Schools.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

  <h1>H1 tag</h1>

    <p id="para1">This is paragraph 1</p>
    <p id="para2">This is paragraph 2</p>

</body>
</html>

<script>
// gets the HTML with teh id of 'para1' and looks for all
// tags within that element with <font> - the code then changes
// the 'size' attribute from 2em to 6em
document.getElementById("para1").style.color = "Yellow";

document.getElementById("para2").style.color = "Blue";
document.getElementById("para2").style.fontSize = "larger";
</script>

Javascript HTML Dom Events

Events are things that happen on a web page. For example, something has been clicked, something has changed, something has loaded. For example, someone has typed something in a form box, or someone has clicked a button.

These events can be used to trigger code when they occur causing changes in the web page.

For example clicking on a button loads a new image, or changes some HTML code on the page, or perhaps changes the styling on all or part of the page. The possibilities are endless.

Example 1 – onclick

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

<p id="para1">You can change the colour of this text easily</p>

<button type="button" onclick="document.getElementById('para1').style.color = 'blue'">Click</button>

</body>
</html>

Example 2 – onclick

Changing the text colour and visibility of an HTML element

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

<p id="para1">This is paragraph 1</p>

<input type="button" value="Hide text" onclick="document.getElementById('para1').style.visibility='hidden'">
<input type="button" value="Show text" onclick="document.getElementById('para1').style.visibility='visible'">
<input type="button" value="Change to Red" onclick="document.getElementById('para1').style.color='Red'">
<input type="button" value="Change to Black" onclick="document.getElementById('para1').style.color='Black'">

</body>
</html>

Example 3 – onclick

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>
  
  <h2 onclick="clickText(this)">This text will become italic when you click on it!</h2>
  
</body>
</html>

<script>
function clickText(id) {
  id.style.fontStyle = "Italic";
}
</script>

Example 4 – onkeyup

The following example forces the text entered into a text box to be upper case.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

Enter your name: <input type="text" onkeyup="triggerFunction(this)">

</body>
</html>

<script>
function triggerFunction(id) {
  id.value = id.value.toUpperCase();
}
</script>

Example 5 – adding an event listener

The function addeventlistener() can be attached to a specific HTML element.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

  <p id="myPtag1">When you click on my I will change</p>
  <p id="myPtag2"></p>
  </html>

  <script>
  // add an addEventListener to the element with id myPtag1
  document.getElementById('myPtag1').addEventListener("click",triggerMyFunction);

  function triggerMyFunction() {
    document.getElementById('myPtag1').innerHTML = "Change";
    document.getElementById('myPtag2').innerHTML = "The above paragraph changed";
  }
</script>

in example 5 above, we call a function to create the changes on the HTML page. An alternative way to do this is put the function itself in the addEventListener method.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

  <p id="myPtag1">When you click on me I will change</p>
  <p id="myPtag2"></p>
  </html>

  <script>
  // add an addEventListener to the element with id myPtag1
  document.getElementById('myPtag1').addEventListener("click",  function() {
      document.getElementById('myPtag1').innerHTML = "Change";
      document.getElementById('myPtag2').innerHTML = "The above paragraph changed";
    });

</script>

This produces exactly the same result. The function() (known as an anonymous function) must be called just ‘function’ when doing things this way, because we are not now calling another function, we are effectively executing the code within the function() directly.

Example 6 – passing parameters

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

  <p id="myPtag1">When you click on me I will change</p>
  <p id="myPtag2"></p>
  </html>

  <script>
  var one=1;
  var two=2;
  var three=3;
  // add an addEventListener to the element with id myPtag1 and execute
  // and anonymous function the executes myMathsFunction passing the
  // three variables to it
  document.getElementById('myPtag1').addEventListener("click",  function() {
    myMathsFunction (one,two,three)
    });
// myMathsFunction receives the three variables and sums them to change
// the inner HTML of the paragraph with an id of myPtag2
    function myMathsFunction (a,b,c){
      document.getElementById('myPtag2').innerHTML = a+b+c;
    }

</script>

Navigating the DOM with Javascript

A webpage has a heirarchy like a family tree. We can use this fact to navigate around a webpage using the following;

parentNode
childNodes
firstChild
lastChild
nextSibling (like brothers/sisters)
previousSibling (like bothers/sisters)

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

  <h1 id="idH1">This is my heading</h1>

  <p id="emptyPara1">---</p>
  <p id="emptyPara2">---</p>
  <p id="emptyPara3">---</p>

</body>
</html>

<script type="text/javascript">
document.getElementById('emptyPara1').innerHTML = document.getElementById('idH1').innerHTML;
document.getElementById('emptyPara2').innerHTML = document.getElementById('idH1').firstChild.nodeValue;
document.getElementById('emptyPara3').innerHTML = document.getElementById('idH1').childNodes[0].nodeValue;
</script>

Creation of new HTML nodes

Example 1 – creation of new HTML node

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

<div id="div1">
<p id="para1">This is paragraph 1</p>
<p id="para2">This is paragraph 2</p>
</div>

<script>
// Step 1: create and element
var para = document.createElement("p");
// Step 2: create a node
var node = document.createTextNode("This is paragraph 3");
// Step 3: append the child (the node) to the element
para.appendChild(node);
// Step 4: now you must append the new element
// to an existing element
var element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

Example 2 – specifying where the new node will be created

We can use insertBefore to specify exactly where the new node will be inserted into the HTML.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

<div id="div1">
<p id="para1">This is paragraph 1</p>
<p id="para2">This is paragraph 2</p>
</div>

<script>
// Step 1: create and element
var para = document.createElement("p");
// Step 2: create a node
var node = document.createTextNode("This is paragraph 3");
// Step 3: append the child (the node) to the element
para.appendChild(node);
// Step 4: now you must append the new element
// to an existing element
var element = document.getElementById("div1");
var child = document.getElementById("para2");

element.insertBefore(para,child);
</script>

</body>
</html>

Removing an HTML element

To remove a HTML element, we can use the removeChild() function.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

<div id="div1">
<p id="para1">This is paragraph 1</p>
<p id="para2">This is paragraph 2</p>
</div>

<script>

// to remove a child using removeChild()
// you need to find the parent, and the 
// child to be removed
var parent = document.getElementById("div1");
var child = document.getElementById("para1");
parent.removeChild(child);

</script>

</body>
</html>

A workaround to the above, as stated at W3Schools, is to use the following code. This prevents you to have to physically look for the parent node.

var child = document.getElementById("para1");
child.parentNode.removeChild(child);

Replacing HTML DOM elements

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">body { background-color: #00bfff; }</style>
</head>
<body>

<div id="div1">
<p id="para1">This is paragraph 1</p>
<p id="para2">This is paragraph 2</p>
<p>This is paragraph 3</p>
</div>

<script>

// to remove a child using removeChild()
// you need to find the parent, and the
// child to be removed
var parent = document.getElementById("div1");
var paragraph1 = document.getElementById("para1");
var paragraph2 = document.getElementById("para2");
parent.replaceChild(paragraph2,paragraph1);

</script>

</body>
</html>

Note: in the above example, we are replacing paragraph 1 with paragraph 2 in the parent div1. This effectively moves paragraph 2 into the place where paragraph 1 was (therefore we don’t see paragraph 2 in it’s original position any more.