Program Explanation Given information: The file js_nodes.htmlis provided with the reference material of the book under the folder HTML12→case 3. Explanation: The following modifications are done in file js_nodes.html and js_tree.js. Content of js_nodes.html: <!DOCTYPE html> <head> //Use already given code of js_nodes.html here. // . // . <linkhref="js_tree.css"rel="stylesheet"/> <scriptsrc= "js_tree.js"async></script> </head> //Use already given code of js_nodes.html here. // . // . Content of js_tree.js (Highlighted code is the additional code): //global variables declaration varnodeCount=0; varelemCount=0; vartextCount=0; varwsCount=0; //event to run function on page load window.addEventListener("load",makeTree); //function functionmakeTree(){ //aside element fragment vartreeBox=document.createElement("aside"); treeBox.setAttribute("id","treeBox"); var h1 =document.createElement("h1"); vartextContent=document.createTextNode("Node Tree"); h1.appendChild(textContent); treeBox.appendChild(h1); //append the aside element to the section element with the ID "main" varmainSection=document.getElementById("main"); mainSection.appendChild(treeBox); console.log(mainSection); //order list for the node tree varnodeList=document.createElement("ol"); //append the node tree to the tree box treeBox.appendChild(nodeList); //CSS selector varsourceArticle=document.querySelectorAll("#main article"); console.log(sourceArticle.children) //call thamakeBranches function for(vari=0;i<sourceArticle.length;i++) { makeBranches(sourceArticle[i],nodeList); } // Display the total counts of all types of nodes in the source document document.getElementById("totalNodes").textContent=nodeCount; document.getElementById("elemNodes").textContent=elemCount; document.getElementById("textNodes").textContent=textCount; document.getElementById("wsNodes").textContent=wsCount; } //makeBranches function functionmakeBranches(treeNode,nestedList){ console.log(treeNode); console.log(nestedList); //increase the nodeCount nodeCount=nodeCount+1; //list item and span element fragment varliElem=document.createElement("li"); vartextContent=document.createTextNode("+--"); liElem.appendChild(textContent); varspanElem=document.createElement("span"); liElem.appendChild(spanElem); console.log(liElem); nestedList.appendChild(liElem); console...

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN: 9781305503922

Author: Patrick M. Carey

Publisher: Cengage Learning

See similar textbooks

Concept explainers

Phases of web development

The process of developing web application and websites which works using the internet is known as web development. Web developers need to use scripting languages at both the server and client end. A content management system is necessary to create a stat…

Question

Chapter 12, Problem 20CP3

Program Plan Intro

To load js_nodes.html in the browser and verify that browser displaysa schematic diagram of the node tree for the article named “working with nodes”.

Expert Solution & Answer

Chapter 12 Solutions

New Perspectives on HTML5, CSS3, and JavaScript

Ch. 12.2 - Prob. 1QC Ch. 12.2 - Prob. 2QC Ch. 12.2 - Prob. 3QC Ch. 12.2 - Prob. 4QC Ch. 12.2 - Prob. 5QC Ch. 12.2 - Prob. 6QC Ch. 12.3 - Prob. 1QC Ch. 12.3 - Prob. 2QC Ch. 12 - Prob. 1RA Ch. 12 - Prob. 2RA

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Recommended textbooks for you

New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning

New Perspectives on HTML5, CSS3, and JavaScript

Computer Science

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Cengage Learning

SEE MORE TEXTBOOKS

To load js_nodes.html in the browser and verify that browser displaysa schematic diagram of the node tree for the article named “working with nodes”.

Solution Summary: The author explains that the file js_nodes.html is provided with the reference material of the book under the folder HTML12case 3.

Concept explainers

To load js_nodes.html in the browser and verify that browser displaysa schematic diagram of the node tree for the article named “working with nodes”.

Chapter 12 Solutions