JavaScript/C3/Window-and-DOM-Manipulations-in-JS/English

From Script | Spoken-Tutorial
Jump to: navigation, search

Title of the script:Window and DOM Manipulations

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Ankita Maske

Novice Reviewer: Praveeen S.

Keywords: JavaScript, HTML, document, window


Visual Cue
Narration
Slide: Title Hello and Welcome to the spoken tutorial on “Window and DOM Manipulations”.
Slide:

Learning Objectives

In this tutorial, we will learn about the:
  • Window Object
  • Document and DOM manipulations in JS
Slide: System Specifications This tutorial is recorded using:
  • Ubuntu Linux OS version 18.04
  • Visual Studio Code version 1.51.1 (code editor)
  • Firefox web browser

However you may use any other browser of your choice.

Slide : Pre-requisites To practice this tutorial,
  • You should be familiar with writing and executing JS files.
  • If not, please go through the prerequisite tutorials on this website.
Slide: Code files
  • The files used in this tutorial are available in the Code files link on this tutorial page.
  • Pls download and extract the files.
  • Make a copy and then use them for practising.
Slide: DOM
  • The expansion of DOM is Document Object Model
  • Each and every tab in a browser is a document.
  • A document is an object.
Slide: DOM
  • All the HTML elements declared inside an HTML page is a part of the document object.
  • The DOM represents the document with a logical tree
Slide: DOM
  • getElementById is a function in the document object.
  • The function takes the HTML element ID as a parameter and
  • Returns the element with the ID in the document
Slide: DOM
  • innerText and innerHTML are properties for the element in the DOM
  • innerText returns the text value for the element
  • innerHTML returns the HTML element value for the element
Slide: DOM


https://developer.mozilla.org/en-US/docs/Web/API/Document


There are lots of functions and properties in the document object.


getElementById is just one example which I’m demonstrating in this tutorial.


To know more about the document object, visit this link.


Let us take an example and understand this better.

Show VS editor Open Visual Studio Code editor
[Editor]

Welcome Page -> Open Folder -> Practice-JS

In the editor, browse and open the folder “Practice-JS ”.
[Editor] Click on

Explorer pane -> Practice-JS -> index.html

Under Practice-JS folder, open the file named index.html


The same is available in the Code files link for practice.

[Editor] Type:


<!DOCTYPE html>

<html lang="en">

<head>

<title>Window and DOM Manipulations</title>

</head>

<body>

<h1 id="heading1"> Hello! </h1>

<ul id="unorderedList"> </ul>

<script src="main.js"> </script>

</body>

</html>

In the index.html file, replace the code as shown.


In this code we have written a small HTML code and linked the JS file.

[Editor] Highlight:


<h1 id="heading1"> Hello! </h1>

Here, I have created a simple h1 element with id heading1.
[Editor] Highlight:


<ul id="unorderedList"> </ul>

Here, I have created an unordered list element with id unorderedList.


We’ll use these elements while working with JS.

Press: Ctrl + S Save the file.
Press: Alt + L and Alt + O Start the Live server.
Show firefox The default browser will open automatically and a new tab opens.
[Firefox] Press Ctrl + Shift + I


Point to the browser developer tools


Click on the Console tab

Now open the Browser developer tools panel and go to the console tab
Switch to Editor Switch back to the editor.
[Editor] Click on


Explorer pane -> Practice-JS -> main.js

Under Practice-JS folder, open the file named main.js
[Editor] Type:


console.log(document);

In the main.js file, replace the code as shown.
[Editor]Highlight:


console.log(document);

Here, we log the document keyword.


document is an object as discussed earlier in the slide.


Let’s see what the object contains.

Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]

Highlight:


HTML Document

We can see HTML Document displayed.
[Browser] [Console Tab]:

Click: ▶ HTML document

Expand the HTML document by clicking on the right arrowhead symbol.


Only Narration We can see all the properties in the HTML object.

For e.g. doctype, documentElement etc.,


Scroll to the end of the object, and we can see <prototype>

[Browser] [Console Tab]:

Click:


▶ <prototype>

Expand the <prototype> by clicking on the right arrowhead symbol.



Only Narration We can see getElementsByTagName, getElementsByClassName functions in the prototype object.


Let's use getElementById and see how it works.

Switch to Editor Switch back to the editor.
[Editor] Type:


console.log(document.getElementById("heading1"));

Replace the code as shown in the main.js file.
[Editor] Highlight:


console.log(document.getElementById("heading1"));

Here, we are using getElementById function and passing the heading1 ID as the parameter.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to browser.
[Browser] [Console Tab]

Highlight:


<h1 id="heading1">

Here, we can see that the function has returned the HTML element with heading1 as ID.
[Browser] [Console Tab]


Click: ▶ <h1 id="heading1">

Expand the h1 element by clicking on the right arrowhead symbol.
[Browser] [Console Tab]:

[Highlight]:

h1#heading1

​accessKey: ""

accessKeyLabel: ""

​align: ""

​assignedSlot: null

​attributes: NamedNodeMap [ id="heading1" ]

​baseURI: "about:newtab"

.. .. . . . . . .

If you have noticed this, even h1 element is an object with properties.


All the HTML elements have the same properties.


If we scroll down, we can see id property.

[Browser] [Console Tab]:

Highlight:


id="heading1"

The id property is having heading1 as value, which we have declared in the HTML file.


Just below id we have innerHTML and innerText properties which have ‘Hello!’ value assigned.


Let’s try to modify the text value to h1 element.

Switch to Editor Switch back to the editor.
[Editor] Type:


document.getElementById("heading1").innerText = "Spoken Tutorials";

Replace the code as shown in the main.js file
[Editor] Highlight:


document.getElementById("heading1").innerText = "Spoken Tutorials";

We know that, document.getElementById("heading1") returns a h1 element.


And, this element has an innerText property.


To that property we are assigning "Spoken Tutorials" as value using the assignment operator.

Press: Ctrl + S Save the file.
Switch to Browser Switch back to browser.
[Browser] [Page] [Highlight];

Spoken Tutorials

We have successfully assigned a value to the h1 element having id heading1.


Hence, Spoken Tutorials is displayed in the innerText and innerHTML properties of h1 tag

Switch to Editor Switch back to the editor.
[Editor] Type:


document.getElementById("unorderedList").innerHTML = "<li>Spoken Tutorial</li>";

Replace the code as shown in the main.js file.
[Editor] Highlight:


document.getElementById("unorderedList").innerHTML = "<li> Spoken Tutorial </li>";

Here, we are getting the ul element declared in HTML file using document.getElementById("unorderedList")


As mentioned before, all the elements have similar properties as previously shown for h1.


ul element also has a property called innerHTML and we are assigning a HTML list item to it.


As we know in HTML, the children for ul tag are li tags.

Press: Ctrl + S Save the file.
Switch to Browser Switch back to browser.
[Browser] [Page] [Highlight];

Spoken Tutorial

We have successfully assigned a value to the ul element having id unorderedList


Hence, Spoken Tutorials is displayed as an unordered list item.

Only narration With this we have come to the end of this tutorial.


Let’s summarize.

Slide: Summary In this tutorial, we have learnt about:
  • Window Object
  • Document and DOM Manipulations in JS
Slide: Assignment As an assignment,
  • Open the file MyPage.html
  • Clear the existing code
  • Add a h1 tag with id as heading1 for the text “HTML is Loaded!”
Slide: Assignment
  • Open the file assignment.js
  • Clear the existing code
  • Access the h1 element using id
  • Modify the text as - Both HTML and JS are Loaded!
Slide: Assignment
  • Open the file MyPage.html in a web browser.
  • Observe the output in the browser
Slide: About Spoken Tutorial Project
  • The video at the following link summarises the Spoken Tutorial project.
  • Please download and watch it
Slide: Spoken tutorial workshops
  • We conduct workshops using spoken tutorials and give certificates.
  • For more details, please write to us.
Slide: Forum questions Pls post your timed queries in this forum.
Slide: Acknowledgement Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India
Slide: Thanks The script for this tutorial is contributed by Jayesh.

And this is Praveen from IIT Bombay signing off.

Thank you for joining.

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C3/Window-and-DOM-Manipulations-in-JS/English&oldid=55270"