Question

If it needs more information be specific.

JavaScript Functions

Create the makeBranches() function that will be used to append node branches to the node tree diagram. The function will have two parameters named treeNode and nestedList. The treeNode parameter stores the current node from the source article and the nestedList parameter stores the structure of the node tree displayed in the web page. Add the commands described in the steps below.

Each time the makeBranches() function is called, it is because a new node has been discovered in the source article. Increase the value of the nodeCount variable by 1.

Create the following list item HTML fragment, storing the list item element in the liElem variable and the span element node in the spanElem variable.

• +--

Append the spanElement node to the liElem element node; append the liElem node to the nestedList element node.

If treeNode represents an element node, then do the following:

1. Increase the value of the elemCount variable by 1.
2. Add the class attribute to the spanElem node, setting its value to “elementNode”.
3. Append the text string “” to the spanElem node, where element is the name of the HTML element. (Hint: Use the textContent property to append the text of the element tag and not the element tag itself.)

Else if treeNode represents a text node, do the following:

1. Increase the value of the textCount variable by 1.
2. Declare the variable textString equal to the value of the text node.
3. Jorge has provided a function named isWhiteSpaceNode() to determine whether a text node represents white space or not. Call the isWhiteSpaceNode() function using textString as the parameter value. If the function returns the value true, then do the following:
   1. Increase the value of the wsCount variable by 1
   2. Change the class attribute of the spanElem node to “whiteSpaceNode"
   3. Append the text string “#text” to the spanElem node
4. If the isWhiteSpaceNode() function returns the value false, then do the following:
   1. Change the class attribute of the spanElem node to “textNode”
   2. Append the text string “text” to the spanElem node where text is the value of the textString variable.

The makeBranches() function should recursively move through the different levels of nodes in the source article. To apply recursion, test whether the number of child nodes of treeNode is greater than zero. If it is, then do the following:

1. Create the following HTML fragment as an element node with the name newList:
   1. |

2. Append newList to the nestedList element node.

3. Loop through the child nodes of treeNode using n to represent each child node, and for each child node to call the makeBranches() function using n and newList as the parameter values.

Return to the makeTree() function and add commands to display the total count of nodes, element nodes, text nodes, and whitespace nodes within the span elements whose ids are “totalNodes”, “elemNodes”, “textNodes”, and “wsNodes”, respectively.

Document your work with informative comments throughout the JavaScript file.

Code

"use strict";

//global variables declaration

var nodeCount=0;

var elemCount=0;

var textCount=0;

var wsCount=0;

//event to run fuction

window.onload=makeTree;

  

function makeTree() {

  

  

}

function makeBranches(treeNode, nestedList) {

  

}

   

function isWhiteSpaceNode(tString) {

   return !(/[^\t\n\r ]/.test(tString));

}

Answer 1

Let’s demonstrate using an example. We’ll add a message on the page that looks nicer than alert.

Here’s how it will look:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert">
  <strong>Hi there!</strong> You've read an important message.
</div>

To create DOM nodes, there are two methods:

document.createElement(tag)

Creates a new element node with the given tag:

let div = document.createElement('div');

document.createTextNode(text)

Creates a new text node with the given text:

let textNode = document.createTextNode('Here I am');

Most of the time we need to create element nodes, such as the div for the message.

Creating the message

Creating the message div takes 3 steps:

// 1. Create <div> element
let div = document.createElement('div');

// 2. Set its class to "alert"
div.className = "alert";

// 3. Fill it with the content
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";