To inspect all the properties of an image object, I first created an object with javascript.Then set the source to an image url, and for testing purposes created a new property in the object

     
 var img = new Image();  
 img.src = ‘gnu-head.jpg';  
 img.NewAttribute = ‘Adding new attr';  

Then I tried to loop through all properties of the image object, and dump the content of its keys in the page. For some reason, when I did that the page simple didn’t load. It just gave this error on the console : Uncaught Error: HIERARCHYREQUESTERR: DOM Exception 3

I started debugging and found that whenever one of the keys in the Image object was an object. Dumping its values on the screen would throw the HIERARCHYREQUESTERR

I then added an if statement to check if the key wasn’t an object and then dump the content of the key. If the key was an object I added to an array so I could inspect later on the console
It worked, I could see all the keys and its values.

    
 $.each(img, function(index, value) {  
 if (img.hasOwnProperty(index)) {  
 $("#dump").append(index + ": ");  
 if (typeof value !== ‘object’) {  
 $("#dump").append(value);  
 }  
 else {  
 console.log("objArr[" + (counter++) + "]: " + index + ": " + value);  
 objArr.push(value);  
 }  
 $("#dump").append(‘

‘);  
 }  
 });  

So I started digging to find why when I dumped a key that had an object in it was crashing the page.
On the console I started inspecting all the objects

I was surprised to see that inside the image object was the document object and the body element.

But then I realized that all the objects the image had stored in itself, were references to other objects in the page. That’s how the DOM navigation happens. Each element has references to other elements, so then you can go back and forth and navigate through all elements in the DOM.

The goal for all this is to create from scratch an image object with just enough functionality to work inside a webworker. And by doing so loading images in the worker, and then sending them back to the main page.

Here is the dump with all the properties of an image element:

NewAttribute: Adding new attr
scrollHeight: 0
complete:
spellcheck:
nodeType: 1
clientLeft: 0
offsetParent: [object HTMLBodyElement]
offsetWidth: 0
isContentEditable:
hidden:
lowsrc:
children: [object HTMLCollection]
previousElementSibling: null
localName: img
ownerDocument: [object HTMLDocument]
webkitdropzone:
nodeValue: null
lastElementChild:
height: 0
x: 8
offsetLeft: 8
tagName: IMG
className:
prefix: null
innerHTML:
border:
namespaceURI: http://www.w3.org/1999/xhtml
width: 0
crossOrigin:
id:
childElementCount: 0
scrollLeft: 0
longDesc:
lastChild: null
innerText:
clientHeight: 0
align:
textContent:
nextSibling: [object HTMLBRElement]
scrollWidth: 0
useMap:
vspace: 0
offsetHeight: 0
name:
clientWidth: 0
nodeName: IMG
style: [object CSSStyleDeclaration]
lang:
src: http://workspace.local/gladiusHacks/gnu-head.jpg
scrollTop: 0
offsetTop: 13
childNodes: [object NodeList]
baseURI: http://workspace.local/gladiusHacks/imageInspec.html
nextElementSibling: nextElementSibling: [object HTMLBRElement]
classList:
title:
firstChild: null
dataset:
hspace: 0
isMap:
alt:
outerText:
parentNode:
clientTop: 0
naturalWidth: 0
tabIndex: -1
naturalHeight: 0
contentEditable: inherit
dir:
outerHTML:
attributes:
previousSibling:
parentElement:
firstElementChild:
draggable:
y: 13

All the bold attributes are the ones listed on the w3c page http://www.w3schools.com/tags/tag_img.asp

The attributes in italic and underline are the ones that provide the DOM navigation.

offsetParent: [object HTMLBodyElement]
children: [object HTMLCollection]
previousElementSibling: null
ownerDocument: [object HTMLDocument]
lastElementChild:
nextSibling: [object HTMLBRElement]
childNodes: [object NodeList]
nextElementSibling: nextElementSibling: [object HTMLBRElement]