CODEWITHSUNDEEP
javascriptobjectdominterface
shehan chanuka
shehan chanuka

Reputation: 141

Understanding the difference between interface and objects in DOM

What is the difference between interfaces and objects in the context of the document object model?
This is what my current understanding is. Please correct me if I am wrong.
Interface:-Interface only defines different parts in the DOM. What properties they have, what methods they have, and so on. Interfaces are defined using interface defining languages.
Objects:-Objects are used to implement those specification specifies by interfaces.
Note:- I am a beginner in javascript and trying to understand how interfaces are related to DOM and Javascript

Upvotes: 0

Views: 604

Answers (1)

charlietfl
charlietfl

Reputation: 171669

A good example to start with is the HTMLTableElement Interface

When you use :

const myTable = document.createElement('table');

the browser knows from the tag name which interface to use and returns an object with the properties and methods from that interface.

Now we can do:

const row = myTable.createRow()

which is a method defined by the HTMLTableElement interface and uses the HTMLTableRowElement interface to create the new row object inserted into the table.

Combining it together using javascript to completely build a table:

const myTable = document.createElement('table');
// set some property values on the object
myTable.border = 1;
// add a <caption>
const cap = myTable.createCaption();
cap.textContent = 'My Cool Table'

// create some rows
for(let i = 0; i < 3; i++){
   const row = myTable.insertRow()
   // use inertCells() defined in HTMLTableRowElement interface
   for( let j=0; j < 3; j++){
      // new cell object has been inserted
      const cell = row.insertCell();
      // set properties of the cell object
      cell.textContent = `${i+1}:${j+1}`
   }   
}

// finally insert the whole table object into the dom
document.body.append(myTable)

// Read some properties of the table object
//like how many rows in table
console.log('# of rows in myTable =', myTable.rows.length)
// what's the caption text
console.log('Caption says: ', myTable.caption.textContent)
td{ width: 30px}

Upvotes: 1

Related Questions