HTML Document Object Model(DOM)
Interview Questions and Answers

1 What is DOM?

Ans: It is the programming interface for HTML and XML documents. The DOM (Document Object Model) represents the page as nodes and objects. It helps to connect the programming language to the web page. So that programmers can change document structure, style, and content.

2 What are the levels involved in DOM?

Ans: DOM is known as Document Object Model, DOM generally involves three levels. They are given below

• Core DOM – 

It is used as a standard model for all document 

• HTML DOM – 

It is used as a standard model and programming interface for all HTML documents.

• XML DOM – 

It is used as a standard Model for all XML documents of different structures.

Q.3 What is a Javascript and how JavaScript worked with DOM(Document Object Model)?

Ans: Javascript is a programming language initially developed for the client-side scripting language. But today it is also used as a server-side language. In javascript, programs are called script. It is used to make web pages alive. Javascript allows us to work on DOM (Document Object Model) object and to manipulate them programmatically, the DOM allows us to change, delete, modify, update the part of documents like any HTML element or XML.

4 Why is the document called the Object Model?

Ans: Document is modeled of object and document in not only the structure of an object but it also includes the behavior of document structure and object that contains the elements like HTML tags and their attributes.

5 What are the properties of HTML DOM?

Ans: the properties of HTML DOM are followings –

p.innerHTML – inner content of P(HTML element).

p.nodeName – the name of P

p.nodeValue – the value of P

p.parentNode – the parent node of P

p.childNode – the child node of P

p.Attributes – the attributes node of P

In the above properties, P is the HTML element.

6 What are the HTML DOM methods involved?

Ans: The following are HTML DOM methods that are mostly used.

• getElementById(idName) – this method allows you to access or find an element associated with id name defined in parenthesis().

Example –

document.getElementById(“demo”)

• getElementsByClassName(className) – this method allows you to access or find elements associated with className defined in parenthesis().

Example –

document.getElementsByClassName(“main”)

• getElementsByTagName(tagName) – this method allows you to access or find elements associated with tagName defined in parenthesis().

Example –

document.getElementsByTagName(“p”)

• appendChild(element) – this method allows you to add a new element(node) in DOM(Document Object Model) tree structure as the last child of a node.

Example – 

document.appendChild(element)

• removeChild(element) – this method allows you to remove a child element(node) in DOM(Document Object Model) tree structure.

Example – 

document.appendChild(element)

• createChild(element) –  this method allows you to create an element(node) in DOM(Document Object Model) tree structure.

Example –

document.createElement(element)

• replaceChild(new, old) –  this method allows you to replace an old element with a new element in DOM(Document Object Model) tree structure.

Example –

document.replaceChild(new, old)

7 What are the HTML DOM node tree and how the relationship exists between node, child, and sibling in the node tree?

Ans: while preparing HTML documents, HTML DOM views documents as tree-structure, so that tree- structure is called as node-tree. In the node tree, each HTML element is called a node. Each node mostly has its parent nodes or child nodes. All nodes can be accessed through this node tree by different DOM methods. So their contents can be modified or deleted and you can create new elements.

Relationships between node, child, and sibling in the node tree.

• Node trees have multiple nodes with hierarchical relationships between them.
• Every node has a parent node except the root node.
• The root node is the topmost node through which, other nodes access and communicate with elements.
• Some nodes contain other nodes, we can call them child nodes.
• Child nodes of the same nodes are called siblings.

Q.8 Explain the relationship between the node, child, and sibling by example.

Ans – In the below example we’ll see how the relationship between node, child, sibling exists.

Example 

<html>

<head>

<title> my title </title>

</head>

<body>

<div>

<h1> my heading </h1>

<p> my paragraph  </p>

<a href=”#”> my link </a>

</div>

</body>

 </html>

This document create node tree structure as Document

• In the above example <html> is root node. He has no parent node
• <head> and < body > has parent node < html > tag.
• Every text has a parent node like the text my heading has <h1> as parent node.
• <h1>, <p> and <a> are siblings and also child nodes of <body> element.

Q. 9 what are the node properties?

Ans –  Node represents a single node in a node tree. It may be an element node, attribute node or tree node or any other types of node. A node is an object which has some properties, which are given below –

• nodeName –  It provides the name of elements, depending on its type.

For Example – 

<p id=”myTag”> example tags </p>

<p id=”demo”></p>

<script>

var y = document.getElementById(“myTag”).nodeName;

 document.getElementById(“demo”).innerHTML = y;

</script>

OUTPUT –

You will get Output – p

• nodeValue  – it returns the value of a specified node. 

For Example – 

<p> my first paragraph. </p>

<script>

var b = document.getElementsByTagName(“P”)[0];

var z = b.childNodes[0].nodeValue;  

document.getElementById(“demo”).innerHTML = z;

</script>

OUTPUT –

my first paragraph.

• nodeType – the return type of node in read-only format.

nodeType property returns the type of node as a number.

For Example –

<p id=”demo”>  </p>

<p id=”myname”></p>

<script>

 var x = document.getElementById(“demo”).nodeType;

  document.getElementById(“myname”).innerHTML = x;

</script>

OUTPUT – 

1

Q. 10 – what is an event and how can you define an event in HTML DOM?

Ans –  An event is an action that occurs on a button or anchor tag. When we call the function to execute, we click a button or anchor tag. The process of invoking a function via the button or some action on the button with the help of JavaScript code, it’s called an event.  

For Example – 

If I want to execute the text “Welcome to Class” via event. I write the given code below in the text editor.

<button type=”button” onclick=”myMessage()”> click here </button>

<script>

function myMessage(){

alert(“Welcome to Class”);

}

</script>

In the above example, onclick is an event. myMessage() is a function called by an event to execute a message via an alert. We placed events mostly in HTML tags. We can call an event through a mouse while loading documents, when submitting the form.

Q.11 how many types of events in HTML DOM? And which are they?

Ans – There are four types of main events.

Q.12 What is an XML DOM?
Ans – DOM defines the Document Object model. But when we are talking about XML DOM, it is used to access, modify, delete, add, update XML elements. It represents XML documents as a tree structure. The elements and their content like text and attributes are known as nodes.

Q.13 How HTML DOM allows javascript to change the text color and background color of a particular element?

Ans – Suppose if I want to change the text color and background color of the particular (heading) element. In the given example I take the h3 tag. And I want to change the text color from default to blue color and background color from transparent to yellow. So in the example below, I can change it by javaScript code.

For Example – 

<html>

<body>

<h3> Heading Elements </h3>

<script>

var x = document.getElementsByTagName(“h3”);

x[0].style.color = “blue”;

x[0].style.backgroundColor = “yellow”;

</script>

</body>

</html>

Q.14 How can DOM change the content or text of a P element?

Ans – suppose if I want to change the existing content of the P element. Then I use one of the popular DOM Methods.  In the given example I can show you how we can change the existing content of P elements dynamically.

For Example – 

<html>

<body>

<p id=”well”> This is an Existing Content.  </p>

<script>

document.getElementById(“well”).innerHTML = ‘This is an New Content.’;

</script>

</body>

</html>

1. 15 How can we execute the content of the element dynamically by calling a DOM event?

In the given example I call the function myMessage() on the button with the help of an event onclick to change existing content of P elements dynamically.

For Example – 

<html>

<body>

<p id=”well”> This is an Existing Content.  </p>

<button type=”button” onclick=”myMessage()”> Click Here </button>

<script>

function myMessage(){

document.getElementById(“well”).innerHTML = ‘This is an New Content.’;

}

</script>

</body>

</html>

1. 16 What is the difference between JavaScript and jQuery explain with example?

Ans – JavaScript is an interpreted, multi-paradigm programming language. Whereas jQuery is a javascript library that simplifies the javascript code. jQuery is also used for HTML DOM manipulation, event handling, ajax and animation.

For Example

<html>

<body>

<div id=”demo”> first element </div>

<div id=”demo1”> second element </div>

If you want to find an element with id demo,

In javaScript you can find it By DOM Method –

<script>

var myId = document.getElementById(“demo”);

</script>

In jQuery you can find it By $() syntax –

<script>

var myId = $(“#demo”);

</script>

</body>

</html>

Q.17 What is a DOM EventListener method and how it can show the current date and time?

Ans – DOM Event Listener is a method used to attach event handlers to specific elements. It has mainly two methods, one is addEvenetListener and another is removeEventListener.

• addEventListener() method adds an Event Handler without overwriting and existing Event Handler. You can add more than two Event handlers (of the same types or different types) on one element.

 

In the given below Example I show current date and time by addEventListener method.  –

<button id=”myBtn”>Try it</button>

<p id=”test”></p>

<script>

var x = document.getElementById(“myBtn”);

x.addEventListener(“mouseover”, function() {

   document.getElementById(“test”).innerHTML = Date();;

});

</script>

• removeEventListener() is another method used to remove Event Handler from addEventListener method.

 

Q.18. What is the HTML DOM collection, Explain with example? 

Ans – HTML DOM collection is similar to an array, but it is not an array. HTML DOM Collection is an object which is  a collection of specific HTML elements.

For Example –

If you want to select all the P elements in the document, you have to use the getElementsByTagName method for HTMLCollection.

<script>

var x = document.getElementsByTagName(“p”);

</script>

In variable x we make the collection of all P elements. Now if  you want to access a particular number of P elements from the collection you can use index no. like an array –

<body>

<p>This is paragraph one. </p>

<p>  This is paragraph two. </p>

<p>  This is paragraph three. </p>

<p id=”demo”></p>

<script>

 document.getElementById(“demo”).innerHTML = x[2].innerHTML;

</script>

</body>

Output will be – 

This is paragraph three.

19. How can I find the number of elements (length) in the HTML collection?

Ans – To find the number of elements in HTML collection, we have to use length properties.

For Example –

<body>

<p>This is paragraph one. </p>

<p>  This is paragraph two. </p>

<p>  This is paragraph three. </p>

<p id=”demo”></p>

<script>

var x = document.getElementsByTagName(“p”);

document.getElementById(“demo”).innerHTML = x.length;

</script>

</body>

The output will be – 

4

Q.20. Write the program to change the background color of the body element by DOM event?

Ans – Suppose if I want to change the background color of body element to pink color. I write the programme given below. In the given example onclick is an DOM event.

<!DOCTYPE html>

<html>

<body>

<input type=”button” onclick=”document.body.style.backgroundColor=’pink’;”

value=”Change Background” />

</body>

</html>

 

Author-
Prasanna Kadu

Call the Trainer and Book your free demo Class for JAVA now!!!

© Copyright 2019 | Sevenmentor Pvt Ltd.