Is there a difference between `new Image()` and `document.createElement(‘img’)`?

by

I couldn’t find any detailed reference but based on the comment in the MDC – HTMLImageElement example, it seems that Image is part of DOM level 0 whereas document.createElement is part of DOM level 2.

DOM level 0 was invented by Netscape and provided a way to access the certain elements of the website. Basically all browsers support it for backwards compatibility.
But to be honest, I don’t understand why the Image constructor exists there, because, as far as I understood it, there was no way to manipulate the document with DOM level 0. Maybe it was only used internally by the browser to create the objects.

DOM level 2 is an official standard developed by the W3C.

For more information about the DOM levels, have a look at at quirksmode.org – Level 0 DOM and Wikipedia.

I’ve read somewhere that Image, Form, and Element is called host objects, is this true?

Yes.

If it is, what are host objects?

The ECMAScript specification motivates host objects this way:

ECMAScript is an object-oriented programming language for performing computations and manipulating computational objects within a host environment. ECMAScript as defined here is not intended to be computationally self-sufficient; indeed, there are no provisions in this specification for input of external data or output of computed results. Instead, it is expected that the computational environment of an ECMAScript program will provide not only the objects and other facilities described in this specification but also certain environment-specific host objects, whose description and behaviour are beyond the scope of this specification except to indicate that they may provide certain properties that can be accessed and certain functions that can be called from an ECMAScript program.

and

host object
object supplied by the host environment to complete the execution environment of ECMAScript.
NOTE Any object that is not native is a host object.

So any object that is not defined in the specification and provided by the environment is a host object. These are for example in a browser (among others): window, document and console.

More Related Contents:

  1. Parse an HTML string with JS
  2. For loop for HTMLCollection elements
  3. jQuery document.createElement equivalent?
  4. Browser detection versus feature detection
  5. How can I count text lines inside an DOM element? Can I?
  6. Difference between HTMLCollection, NodeLists, and arrays of objects
  7. querySelector, wildcard element match?
  8. Copy / Put text on the clipboard with FireFox, Safari and Chrome
  9. How to serialize DOM node to JSON even if there are circular references?
  10. Most efficient method of detecting/monitoring DOM changes?
  11. Dynamically creating HTML elements using Javascript?
  12. What’s standard behavior when element is clicked? Will it submit the form?
  13. Add SVG element to existing SVG using DOM
  14. How to access DOM elements in electron?
  15. Trigger CSS transition on appended element
  16. Difference between .tagName and .nodeName
  17. How to retrieve the element where a contextmenu has been executed
  18. Removing HTMLCollection elements from the DOM
  19. javascript variable corresponds to DOM element with the same ID [duplicate]
  20. link element onload
  21. cloning javascript event object
  22. What is the difference between Document and document in JavaScript?
  23. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  24. Retrieving value from with multiple option in React
  25. How to properly unload/destroy a VIDEO element
  26. Simple way to get element by id within a div tag?
  27. How to get element by class name
  28. How to do a wildcard element name match with “querySelector()” or “querySelectorAll()” in JavaScript?
  29. Getting width & height of an image with filereader
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment