Explore model answers categorized by subjects like Java, HTML, DBMS, and more.
Dom is standards for Document Object Model. It is an standard given by World Wide Web Consortium.
W3C define that standard to accessing the HTML and XML like document.Also we can say that using DOM we can define the objects and properties of all document elements and also has methods using them we accessed documents.
I have given you another definition of DOM.Simply DOM is an platform and language-neutral interface that helps both programs and scripts to access and update the style,content and structure of document dynamically.
W3C also divided DOM into three different but important parts.These are,
1. Core DOM
2. XML DOM
3. HTML DOM
Using HTML DOM is use to define the object and their properties of all HTML elements and using HTML DOM we can access the methods of HTML elements.
In brief we can say that HTML DOM is a W3C standard which is platform and language independent.It is also a programing interface for HTML document.
DOM says that everything inside an HTML document called as node.
DOM also says that all HTML tags are called as element node.Every text, comments and HTML attribute inside the HTML tags also called as text nodes, comment nodes and attribute node respectively.
I have given you a HTML DOM example:<html>
<head>
<title>DOM interview questions</title>
</head>
<body>
<p>R4R Welcomes You!</p>
</body>
</html>In the above example <html>node contain two child nodes.These are <head> and <body>.
<In side the <HTML> tag, <head> node contain a <title> node and the <body> node contain a <p> node.
Using HTML DOM we can show a node tree structure of all nodes in an HTML document.
In a node tree structure all nodes in an HTML document are relations with each other.
Using node tree structure we can access all node of HTML document.
In tree structure we start from root node and go down to the lowest level nodes of tree.
In node tree structure nodes are relate to some other nodes.
Root node of node tree and predecessor node of a node is called as parent node.Nodes of a parent node are called as children.Siblings nodes are the children that are on the same level.
Node properties of node tree are given below:
Every node(except node) should have exactly one parent node.
A node contains nodes are called parent nodes and contains nodes are called as children.
A node may have many children.
Siblings are the nodes of same level and Parents of sibling nodes should be same.
Last node or leaf node doesn\'t have any children.
Example:<html>
<head>
<title>DOM interview questions</title>
</head>
<body>
<h2>My first DOM example</h2>
<p>R4R Welcomes You!</p>
</body>
</html>
In the above example I define you each of the HTML document in terms of Parent, Children and Sibling nodes.
1. Because <html> has not any parent node.So, we called <html> as root node.
2. <html> is also a parent node because it has two children <head> and <body>.
3. <head> node has only one children <title> and
<body> node has two children <h2> and <p>.
4. <title> node has one child node as text node \"DOM interview question\"
5. Node <h2> and <p> are called as siblings because they are children of same parent node called <body>.
6. Node <h2> and <p> has contain only one children as text node \"My first DOM example\" and
\"R4R Welcomes You!\".
Properties and methods are help us to define HTML DOM programming interface.
I given you some properties of HTML DOM. Let, \'e\' is an HTML element or node object.
e.innerHTML : It shows the inner text value of e.
e.nodeName : It shows the name of e.
e.nodeValue : It shows the value of e.
e.parentNode: It shows the parent node of e.
e.childNodes: It shows the child node of e.
e.attributes: It shows the attribute nodes of e.
I have given you some methods that we used in HTML DOM.
e.getElementById(id) : Using them we can get the element with a specified id in an HTML document.
e.getElementsByTagName(name) : Using them we can get all elements with a specified tag name in an HTML document.
e.appendChild(node) : Using them we can insert a child node to e or increase the no of child nodes of e.
e.removeChild(node) : Using them we can remove a child node from e in an HTML DOM.
I have given you paths by using them we can access each node in an HTML DOM.These paths are:
1. getElementById() Method
2. getElementsByTagName() Method
3. To access nodes when we navigate the node tree with the help of relations b/w the nodes.
1. getElementById() Method : Using this method we can get the element those given specific ID has matched.
Syntax:
document.getElementById("someID");
Example:
DOM interview question
DOM Tutorial
HTML DOM Tutorial
Using
HTML DOM
we can define object and their properties of nodes in an HTML document. Also use methods which told us how to access those nodes.
2. getElementsByTagName() Method : Using this method we can get the elements those given specific tag name has matched.
Syntax:
document.getElementsByTagName("tagname");
Example:
DOM interview question
DOM Tutorial
HTML DOM Tutorial
Using
HTML DOM
we can define object and their properties of nodes in an HTML document. Also use methods which told us how to access those nodes.
3. Navigate the node tree with the help of relations b/w the nodes : Using parentnode, first child and lastnode we perform search to follow nodes in a structures.
Example:
DOM interview question
DOM Tutorial
HTML DOM Tutorial
Using
HTML DOM
we can define object and their properties of nodes in an HTML document. Also use methods which told us how to access those nodes.
In the above example In the HTML code first child node of element is and last child node of the
element is element.
I define nodes of this HTML document here.
1. element has only one child node .
2. has two child element and
or is a parent element of and
.
3. has one text node "DOM interview question".
4.
has two child nodes with id="message1" and
with id="message2".
Using this firstChild property we can access the text of an element.
var e=document.getElementById("note");
var text=e.firstChild.nodeValue;
Give us special properties of document?
Answer:
Their are two special properties of document which helps to access the tags in an document.
These are:
document.documentElement
document.body
document.documentElement : Using this property we can access the root node of document.Like HTML and XML.
document.body : Using this property we can access the <body> tags in an HTML pages directly.
What are the properties of NODE?
Answer:
Basically, We use properties of node to define selective information of NODE interms of nodeName, nodeValue and nodeType.
HTML DOM told each node as object.
nodeName Property: Using node properties we can define name of a node.Keep in mind such things when you try to use nodeName property. nodeName property.
These are:
nodeName is read only.We an also told as nodeName of an element node and attribute node are identical as tag name and attribute name repectively.nodeName of an text node and document node is set as #text and #document repectively.
nodeValue Property : Using nodeValue property we can define the value of a perticular node. Keep in mind such things when you try to use nodeValue property.
We told as nodevalue of an attribute node as attribute value. For element nodes nodeValue is undefined. nodeValue is text itself for text nodes.
Example:
<html>
<body>
<p id=\"note\">DOM interview question</p>
<div id=\"message\">
<p id=\"message1\">DOM Tutorial</p>
<p id=\"message2\">HTML DOM Tutorial</p>
<p id=\"message3\">Using <h1>HTML DOM</h1> we can define object and their properties of nodes in an HTML document. Also use methods which told us how to access those nodes.</p>
</div>
<script type=\"text/javascript\">
e=document.getElementById(\"note\").firstChild;
txt=e.nodeValue;
</script>
</body>
</html>
Output:
txt = \"DOM interview question\"
nodeType Property : Using nodeType propety we returns the type of node.
I have given you some Element type with their NodeType.
Element type(NodeType)
Element(1)
Attribute(2)
Text(3)
Comment(8)
Document(9)
How you define events in HTML DOM?
Answer:
Generally, Events are nothing other than actions. Using JavaScript we can noticed or triggered events.
Example: When you use click on button than an event occur and function associated with button execute.We placed events within HTML tags. I have given you some events. Click through mouse, Click on advertisement in web page, When you select an input box in a HTML form, When you submit an HTML form.
How you define onload and onUnload event?
Answer:
onload and onUnload events are occurs when client enter on web page and leave the web page respectively.
Using onload event we can check the web browser type and web browser version which are used by client and load the web page according to the client browser.
One main work of onload and onUnload events are that using them we can setup cookies for when user enter on web page and leave that web page.
Example:
Using them we can perform task like we made popup(Like\" enter your name) on web page when user enter on this web page and enter our name than his/her name will stored in cookie. And when it again open that web page than our another popup display like: \"Hello Harry, R4R Welcomes You!\".
How to use onMouseOver and onMouseOut events?
Answer:
When we want to made animated buttons than we use onMouseOver and onMouseOut events.
Example of an onMouseOver event.
Example that I have shown below When an onMouseOver event is detected than an alert box appears:
<a href=\"http://www.r4r.co.in\" onmouseover=\"alert(\'An onMouseOver event\');return false\">
<img src=http://r4r.co.in/images/logo.gif\" width=\"40\" height=\"30\">
</a>
How to change the background color of an element?
Answer:
I have given you a script code using them you can change the background color of elements of body.
<html>
<body>
<script type=\"text/javascript\">
document.body.bgColor=\"pink\";
</script>
<p>Now, Your background color is pink.</p>
</body>
</html>
How to change the text of an element?
Answer:
I have given you a scipt code using them you can change the text of an HTML element.Now, In example that I have shown below we change the text of the element <p>.
Example:
<html>
<body>
<p id=\"welcome\">R4R Welcomes You!</p>
<script type=\"text/javascript\">
document.getElementById(\"welcome\").innerHTML=\"A new message from R4R\";
</script>
<p>R4R introduce a new service called VoiceBox using them you can chat with R4R.</p>
</body>
</html>
How to change the text of an element with a function?
Answer:
I have given you example in which I changed the text of an element by using an function.
In this example text has been changed when you execute function.
Example:<html>
<head>
<script type=\"text/javascript\">
function ChangeText()
{
document.getElementById(\"welcome\").innerHTML=\"R4R Welcomes You!\";
}
</script>
</head>
<body>
<p id=\"welcome\">Hello User!</p>
<input type=\"button\" onclick=\"ChangeText()\" value=\"When you click on button text will changed\">
</body>
</html>
Using function how to change the background color?
Answer:
I have given you example which shows you how to change background color by using function.
<html>
<head>
<script type=\"text/javascript\">
function ChangeBackground(){document.body.style.backgroundColor=\"pink\";
}
</script>
</head>
<body><p id=\"welcome\">R4R Welcomes You!</p>
<input type=\"button\" onclick=\"ChangeBackground()\"value=\"When you click on button than background color will changed.\">
</body>
</html>
How to changed font and color of an text element?
Answer:
I have given you example using them you can change font and text of an element by using a function.
Example:
<html>
<head>
<script type=\"text/javascript\">
function ChangeText()
{
document.getElementById(\"welcome\").style.color=\"red\";
document.getElementById(\"welcome\").style.fontFamily=\"Times New Roman\";
document.getElementById(\"welcome\").style.fontSize=\"20\";
}
</script>
</head>
<body>
<p id=\"welcome\">R4R Welcomes You!</p>
<input type=\"button\" onclick=\"ChangeText()\"
value=\"When you click on button text font and color will change\">
</body>
</html>