helmut Posted August 16, 2012 Share Posted August 16, 2012 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 comment Share on other sites More sharing options...
justsomeguy Posted August 16, 2012 Share Posted August 16, 2012 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 comment Share on other sites More sharing options...
helmut Posted August 26, 2012 Author Share Posted August 26, 2012 (edited) 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 August 26, 2012 by helmut Link to comment Share on other sites More sharing options...
justsomeguy Posted August 27, 2012 Share Posted August 27, 2012 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now