Quick JavaScript Interview Questions (2015)
Chapter 5. Questions on DOM
Q. What is DOM ?
ANSWER
Document Object Model (DOM) is a programming API for HTML and XML document. JavaScript is most widely used language to access these DOM API properties and methods.
Q. What are the different objects involved in DOM ? ANSWER
According to DOM Level 2 specification it has following main objects.
Attribute : Represents an element attribute. Attributes: Represents a collection of attribute. CDATASection : Represents an XML CDATA section. Comment: Represents an XML comment. Document: Represents an XML document. Element: Represents an XML element node. Node: Represents a generic node object in an XML document.
NodeList: Represents an ordered collection of node objects.
ProcessingInstruction: Represents an XML processing instruction.
TextNode: Represents an XML text node.
Q. What are the different properties involved in DOM ? ANSWER
According to DOM Level 2 specification it has following main properties
name : It has the name of the Attribute.
namespaceURI: It represents namespace URI of the node.
nextSibling: It contains the next sibling of the Node in document source order.
nodeName : This represents name of the node. nodeType: It represents type of the node.
nodeValue: It has value of the node.
ownerDocument: It has reference to the Document object that contains the Node.
ownerElement : It has reference of the Element to which the Attribute belongs.
parentNode: It represents parent Node to which the node belongs.
prefix: It represents namespace prefix of the node.
previousSibling : It has the previous sibling of the Node in document source order.
text: It has contents of all the text nodes contained by the Node and any element nodes that it contains.
value : It has value of the Attribute.
attributes: Represents collection of Attribute objects.
childNodes : Represents NodeList collection of node objects.
data: Represents text stored within a TextNode, CDATASection, or Comment.
documentElement: It contains root element node of the document.
firstChild: This is first child of the Node in document source order.
lastChild: This is the last child of the Node object in document source order.
length: It represents number of elements in the collection.
localName: It has local name of the node..
Q. What is windows load event?
ANSWER
Load event occurs generally fired after the object is completely loaded. Window load event is event occurs when images, script files, CSS files and other dependencies get loaded. Below screenshot shows use of load event.
Q. What is DOM ready event?
ANSWER
DOM ready event get fired when elements are get loaded to browser. It does not wait for images and other files loaded. We can listen to this event by attaching a callback method. A method can be added to readyStateChange or DOMContentLoaded.The below code shows the use of these events.
<!DOCTYPE html>
<html>
<head>
<title>Window Ready Event Example</title>
<script>
var readyHandler = function(){
var element = document.querySelector("#message1"); element.innerHTML = "Ready Handler Fired : readystatechange <span style='color:blue'>"+new Date()+"
</span>"
}
document.onreadystatechange = readyHandler; </script>
<script>
document.addEventListener("DOMContentLoaded",
function(event) {
var element = document.querySelector("#message2"); element.innerHTML = " Ready Handler Fired :
DOMContentLoaded <span style='color:red'>"+new
Date()+"</span>";
});
</script>
</head>
<body>
<h2 id="message1">
</h2>
<h2 id="message2">
</h2>
</body>
</html>
The following screenshot shows the output of the above code.
Q. What is query selector in DOM?
ANSWER
DOM provides querySelector() and querySelectorAll() methods for selecting DOM elements. querySelector() method return a single element which matches first in the DOM. querySelectorAll() method return a node list of matched elements. Below code demonstrates the use of these methods in selecting elements from DOM.
<!DOCTYPE html>
<html>
<head>
<title>Document Query Selector Example</title>
</head>
<body>
<h5 class="name">Sandeep Kumar Patel</h5>
<h4 class="country">India</h4>
<h4 class="country">UK</h4>
<h5 class="name">Surabhi Patel</h5>
<h4 class="country">US</h4>
<h4 id="my-score">520</h4>
<script>
var element = document.querySelector( "#my-score" ); element.style.color="red";
var elements = document.querySelectorAll("h4#my-score,
h5.name");
for (var item of elements) {
item.style.fontStyle = "Italic";
}
var aElement = document.querySelector( "h4.country, h4#my-score" );
aElement.style.background = "orange";
</script>
</body>
</html>
The following screenshot shows the output of the above code in Browser.
Q. What is primary Data Type of DOM?
ANSWER
Node interface is the primary data type of DOM. It represents a single item from DOM tree. Document, Element, CharacterData, ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference interface inherits from Node interface.
Q. What is document fragment in DOM?
ANSWER
DocumentFragment is a light weight version of DOM. It does not have any parent class. It is generally used by the developer as a temporary storage of DOM elements. Below code shows an Example of creating document fragment and adding HTML element to it and finally placing it to the body of the DOM.
<!DOCTYPE html>
<html>
<head>
<title>DocumentFragment Example</title>
</head>
<body>
<script>
var aFragment = document.createDocumentFragment(), aHTMLElement = document.createElement("h2"), aTEXTElement = document.createTextNode("SANDEEP");
aHTMLElement.appendChild(aTEXTElement);
aFragment.appendChild(aHTMLElement);
document.body.appendChild(aFragment);
</script>
</body>
</html>
Below screenshot shows an h2 element with a child text node containing value SANDEEP is place inside document fragment. Finally the document fragment is appended as a child to the body element.
Q. Which is basic object of DOM?
ANSWER
Node is most basic object of DOM. It is the most common interface from which lot of other DOM object are inherited. The following interfaces all inherit from Node its methods and properties: Document, Element, CharacterData, ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference. These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.
Q. What are the common doctype declarations?
ANSWER
There are 8 different type of doctype declaration and are listed below.
HTML 5: This document type is used in HTML5.
<!DOCTYPE html>
HTML 4.01 Strict : This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional : This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset: This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict : This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Strict//EN"
strict.dtd">
XHTML 1.0 Transitional: This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Transitional//EN"
transitional.dtd">
XHTML 1.0 Frameset: This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
Frameset//EN"
frameset.dtd">
XHTML 1.1 : This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >