How come DOM objects act different from general Javascript objects?

For example:

> var a = document.getElementById('mybutton')
  undefined
> a
  <input type=​"button" id=​"mybutton" class=​"button" value=​"My Button">​
> typeof a
  "object"
> Object.getPrototypeOf(a)
  HTMLInputElement {}
> console.dir(a)
  input#mybutton.button

The question is then why console.log and console.dir outputs something different than the typical Class {}, and if/how can I make my own magical objects?