DOM HTML Features - Java Script

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>

Because class is a reserved word in ECMAScript, it cannot be used as a variable, property, or function name in JavaScript.Therefore, the property is className:

alert(oDiv.className);
oDiv.className = “footer”;

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.

Table methods

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:

  • caption — pointer to the <caption/>element (if it exists)
  • tBodies — collection of <tbody/>elements
  • tFoot — pointer to the <tfoot/> element if it exists)
  • tHead — pointer to the <thead/> element(if it exists)
  • rows — collection of all rows in the table
  • createTHead() — creates a <thead/> element and places it into the table
  • createTFoot() — creates a <tfoot/> element and places it into the table
  • createCaption() — creates a <caption/> element and places it into the table
  • deleteTHead() — deletes the <thead/> element
  • deleteTFoot() — deletes the <tfoot/> element
  • deleteCaption() — deletes the <caption/> element
  • deleteRow(position) — deletes the row in the given position
  • insertRow(position) — inserts a row in the given position in the rows collection

The <tbody/> element adds the following:

  • rows — collection of rows in the <tbody/> element
  • deleteRow(position) — deletes the row in the given position
  • insertRow(position) — inserts a row in the given position in the rows collection

The <tr/> element adds the following:

  • cells — collection of cells in the <tr/> element
  • deleteCell(position) — deletes the cell in the given position
  • insertCell(position) — inserts a cell in the given position in the cells collection

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[0] 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[0].cells[0] 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.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Java Script Topics