Понимание разницы между интерфейсом и объектами в DOM

В чем разница между интерфейсами и объектами в контексте объектной модели документа?
Это мое текущее понимание. Пожалуйста, поправьте меня, если я ошибаюсь.
Интерфейс: -Interface определяет только разные части в DOM. Какие свойства у них есть, какие у них есть методы и так далее. Интерфейсы определяются с использованием языков определения интерфейсов.
Объекты: -Объекты используются для реализации тех спецификаций, которые определены интерфейсами.
Примечание: - Я новичок в javascript и пытаюсь понять, как интерфейсы связаны с DOM и Javascript

javascript object dom interface

04.04.2021 05:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Хороший пример для начала - интерфейс HTMLTableElement.

Когда вы используете:

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

браузер знает по имени тега, какой интерфейс использовать, и возвращает объект со свойствами и методами из этого интерфейса.

Теперь мы можем:

const row = myTable.createRow()

который является методом, определенным интерфейсом HTMLTableElement и использующим интерфейс HTMLTableRowElement для создания нового объекта строки, вставленного в таблицу.

Объединяя это вместе с помощью javascript, чтобы полностью построить таблицу:

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.info('# of rows in myTable =', myTable.rows.length)
// what's the caption text
console.info('Caption says: ', myTable.caption.textContent)