Jump to content

How to add custom javascript objects to DOM?

Recommended Posts

Hi, I intend to add a custom javascript object to the DOM of a HTML page to be able to access this object via its id (document.getElementById). Adding Nodes like Div..., that are known by DOM, works but where and how can I add the custom JScript Object. This is my testcode

<!DOCTYPE html><html lang="en">    <head>	    <meta charset="utf-8">	    <script type="text/javascript">		    function initJScript(){			    var customObject = new customObjectConstructor();			    var testDiv = document.createElement('div');			    alert(testDiv);			    alert(customObject);			    alert(document);			    			    document.body.appendChild(testDiv);		 //Works			    document.appendChild(customObject);		 //Does NOT Work!!! How can i append a custom object [object Object] to DOM???			    document.getElementById("customObjectId");    //to make this work		    }		    function customObjectConstructor(){			    this.id = "customObjectId"			    this.x = 12345;		    }	    </script>    </head>    <body onload="initJScript()">	    <div id="testdiv">		    <h1> Überschrift</h1>	    </div>    </body></html>[font=arial,helvetica,sans-serif][\codebox][/font] This is the error message from firebugNS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMHTMLDocument.appendChild][font=arial,helvetica,sans-serif]Thanks a lot for your help[/font]
Link to post
Share on other sites

The DOM is a collection of nodes, not arbitrary objects. If you're going to append something to the DOM then it needs to be a node or something that inherits a node. Things that inherit from a node include Elements, HTMLElements, and the subclasses of HTMLElement that refer to specific tags (HTMLAnchorElement, HTMLImageElement, etc). There's a list here: http://krook.org/jsd...TMLElement.html There's a description on Stackoverflow about why it's a bad idea to extend the DOM here: http://stackoverflow...m-element-class There's an article about it here as well: http://perfectionkil...ending-the-dom/ You can also create a custom element or an element that is not defined, e.g.:

var test = document.createElement('custom');test.setAttribute('id', 'test_id');document.body.appendChild(test);console.log(document.getElementById('test_id'));

You would have to modify that element after you create it though to add the additional methods and properties you want.

Link to post
Share on other sites
  • 2 weeks later...

Hi justsomeguy, thanks at first for your answer. This whole DOM extension discussion seems quite complicated to me and ok, I won't extend the DOM.However, I wonder, if your suggestion to create a custom object is an "allowed" extension of the DOM. If I follow your suggestion to cerate a custom element, I would need to combine this new DOM element with the "new" operator. Is there a way to do this?

var customObject = new customObjectConstructor();var customElement = document.createElement('custom')//tell the DOM, that customElement is the customObject[\code] As the customObject is very huge, adding all methods and properties manually as you suggested is no option for me. What I want to do is something that should be very simple and I wonder, if I am searching in the wrong direction: I want a click event on an DOM element to trigger the execution of a custom javascript (run a method of a javacript object). And therefore I want the DOM to be able to access the jscript object by ID. If there is another way to do this - i would be glad to hear of it :-) Thanks in advance
Edited by helmut
Link to post
Share on other sites

The various frameworks that let you look up components or objects by ID would have a class that registers them and keeps track of them. So when you create a new object you would register that object and its ID with another class, and when you want to look it up you would use that lookup class to return the object with the given ID. You may also be able to use an existing element, like a hidden input, where you create it in Javascript and assign your object to a custom property of the element. You may be able to look up that element later and get your object out of the custom property.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...