The properties and methods of the Core DOM are generic,designed to work with every XML document in every situation.The properties and methods of the HTML DOM are specific to HTML and make certain DOM manipulations easier.These include the capability to access attributes as properties in addition to element-specific properties and methods that can make common tasks,such as building tables, much more straightforward.
Attributes as properties
For the most part,all attributes are included in HTML DOM elements as properties.For example,suppose you had the following image element:<img src=”mypicture.jpg” border=”0” />
To get and set the src and border attributes using the Core DOM, you use the getAttribute() and setAttribute() methods:
However,using the HTML DOM,you can get and set these values using properties with the same name:
The only instance where the attribute name isn’t the same as the property name is in the class attribute,which specifies a CSS class to apply to an element,such as in the following:<div class=”header”></div>
Using properties to modify attributes instead of getAttribute() and setAttribute() affords no real advantages aside from decreasing the code’s size and making it a little bit easier to read.
Suppose you want to create the following HTML table using the DOM:
If you want to accomplish this with the Core DOM methods, your code would look something like this:
This code is quite verbose and a little hard to follow. To facilitate building tables, the HTML DOM adds several properties and methods to the <table/>, <tbody/>,and <tr/> elements.
The <table/> element adds the following:
The <tbody/> element adds the following:
The <tr/> element adds the following:
What does all of this mean? Essentially, it means that creating a table can be a lot less complicated if you use these convenient properties and methods:
In this code, the creation of the <table/> and <tbody/> elements remain the same.What has changed is the section creating the two rows, which now makes use of the HTML DOM Table properties and methods. To create the first row, the insertRow() method is called on the <tbody/> element with an argument of 0, which indicates the position in which the row should be placed. After that point,the row can be referenced by oTBody.rows because it is automatically created and added into the <tbody/> element in position 0.
Creating a cell is done in a similar way — calling insertCell() on the <tr/> element and passing in the position in which the cell should be placed. The cell can then be referenced by oTBody.rows.cells because the cell has been created and inserted into the row in position 0.
Using these properties and methods to create a table makes the code much more logical and readable, although technically both sets of code are correct.
Java Script Related Tutorials
|Adv Java Tutorial||Core Java Tutorial|
|Java-Springs Tutorial||Java Servlets Tutorial|
|EJB(Enterprise JavaBeans) Tutorial||JavaServer Faces (JSF) Tutorial|
|Java Swing Tutorial||Java Tutorial|
|JavaMail API Tutorial||Java 8 Tutorial|
|Java XML Tutorial||Java Bean Utils Tutorial|
|The Java Debugger (JDB) Tutorial||Java.math Package Tutorial|
Java Script Related Interview Questions
|Java Script Interview Questions||Adv Java Interview Questions|
|Core Java Interview Questions||Java-Springs Interview Questions|
|Java Servlets Interview Questions||EJB(Enterprise JavaBeans) Interview Questions|
|JavaServer Faces (JSF) Interview Questions||Java Swing Interview Questions|
|Java 8 Interview Questions||Java XML Interview Questions|
|JavaFX Interview Questions||The Java Debugger (JDB) Interview Questions|
Java Script Related Practice Tests
|Java Script Practice Tests||Adv Java Practice Tests|
|Core Java Practice Tests||Java-Springs Practice Tests|
|Java Servlets Practice Tests||EJB(Enterprise JavaBeans) Practice Tests|
|JavaServer Faces (JSF) Practice Tests||Java 8 Practice Tests|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.