JS-DOM Questions

Selection by element id.

Write the JS code to access element which is having id as "text"

Code:-

document.getElementById("text");
                            
             OR

document.querySelector("#text");

Selection by element tag.

Write the code to access element which is having tag as "h1".

Code:-

document.getElementsByTagName("")
            
             OR

document.querySelector("h1")

Selection by element class.

Write the code to access element which is having class as "box".

Code:-

document.getElementByClass("box");
        
             OR

document.querySelector(".box");

HTML Element text manipulation.

<h1> Hello </h > Change the heading from "Hello" to "Hello World" using DOM functions

Code:-


document.querySelector("h1").textContent = "Hello World!";

Flexbox direction manipulation.

Create three cards on HTML page and arrange them using flex property in row or horizontal direction and also create button at the bottom named "Change Flex direction". When user clicks on this button, the cards arrangement should be changed to vertical direction.

Code:-

function flexDirection() {
    let direction = document.getElementById("que5-example");

    if (direction.style.flexDirection === "row") {
        document.getElementById("que5-btn").textContent = "Row";
        direction.style.flexDirection = "column";
    } else {
        document.getElementById("que5-btn").textContent = "Column";
        direction.style.flexDirection = "row";
    }
};

Window vs Document.

What’s the difference between window vs document?

Ans:-

Window: The window object is the topmost object of the DOM hierarchy. 
	It represents a browser window or frame that displays the contents of the webpage.
	Whenever a window appears on the screen to display the contents of the document, the window object is created. 
       Syntax: window.property_name;

Document: The document object represent a web page that is loaded in the browser.
	  By accessing the document object, we can access the element in the HTML page. 
	  With the help of document objects, we can add dynamic content to our web page.
	  The document object can be accessed with a window.document or just document.
	Syntax: document.property_name;

Manipulate CSS style attribute.

<h1> Hello </h1> Add one style attribute and give text color as red and id attribute and give the id value as "heading" in the above given h1 tag using DOM functions.

Code:-

For setting ID: document.querySelector("h1").id = "heading";

For changing color: document.querySelector("h1").style.color = "red";

Textcontent manipulation.

Create an HTML page having content as "Hello world" and a button named Replace Text. When user will click on this button page content should be changed to "Welcome to Elevation academy"

Code:-

function changeText() {
    let text = document.getElementById("que8-example");
    if (text.textContent === "Hello World..!") {
    	text.textContent = "Welcome to Elevation Academy.";
    } else if ((text.textContent = "Welcome to Elevation Academy.")) {
    	text.textContent = "Hello World..!";
    }
};

Real Time clock.

Write code to implement timer clock using JS --display HH:MM:SS-- the time should keep updating every second.

Code:-

setInterval(() => {
    let currentTime = new Date();
    let hr = currentTime.getHours();
    let min = currentTime.getMinutes();
    let sec = currentTime.getSeconds();

    if (hr < 10) {
    	hr = `0${hr}`;
    }
    document.getElementById("hr-time").textContent = hr;
    document.getElementById("min-time").textContent = min;
    document.getElementById("sec-time").textContent = sec;
}, 1000);

Print selction.

Create a select drop down for selecting Year 20-21, 21-22 etc. Print the item text selected.

Code:-

function year() {
    let year = document.getElementById("year-select").value;
    document.getElementById("que10-text").textContent = year;
};