Develop Reference

Issues accessing DOM innerHTML with JavaScript

I am using the Summernote WYSIWYG editor to provide users with functionality to edit HTML templates, and store changes to a personalised area. To do this I need to POST a set of text fields, along with the edited HTML, to the backend.
All is working as expected, except that the HTML that gets POSTed from the editable DIV, doesn't POST the updated DOM i.e. it's the original HTML template, without the edits.
If I use the browser dev tools console, I can use 'document.documentElement.outerHTML' to see the correctly updated DOM, but when I set a variable to get the outerHTML element by ID, I still only POST the original markup.
The variable within the script is as follows (based upon other StackOverflow answers):
var content = $('#template_text')[0].outerHTML;
As mentioned, this allows me to POST the content of the DIV, but doesn't POST the updates that a user makes to the template.
I have tried using innerHTML, outerHTML, html(), but essentially end up with the same result. If I use document.documentElement.outerHTML within the variable, this POSTs the updated values, but sends the whole document, rather than just the DIV (and I only want the DIV).
Any help would be greatly appreciated.

Instead of manipulating the DOM, We can go with the library's documented way like this,
var editedText = $('#summernote').summernote('code');
Hope this helps!

HTML attributes that can contain javascript

I'm looking for a simple list of all the html attributes that can contain javascript that will automatically run when an action is performed. I know this will differ between browsers and versions but I'd rather be safer than sorry. I currently know of the following javascript attributes: onload, onclick, onchange, onmouseover, onmouseout, onmousedown, and onmouseup
Backstory:
I'm getting a full html document from an untrusted source and I want to strip all javascript that could run from the original html document so I'm removing all script tags as well as any attributes that could hold javascript before its displayed in an iframe. For this implantation there is no server side processing and no way of sandboxing the code since I need to run javascript that is being added locally after all of the original javascript is removed.

There are two places where Javascript can be used in HTML attributes:
Any onEVENT attribute. I suggest just treating any attribute that begins with on as an event binding, and strip them all out.
Any attribute that can contain a URI will be executed as Javascript if the URI uses the javascript: scheme, such as href and src. A complete list is in
COMPLETE list of HTML tag attributes which have a URL value?

http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.3
Scroll down to 18.2.3 Intrinsic events
I've had a similar requirement in a project. Don't forget to strip script elements, as well.

Accessing ignored HTML tags in JavaScript

If we have a form tag without action attribute <form id='SomeForm'>..</form> in strict DOCTYPE, the renderer would ignore the form tag and F12 dev tools for IE and Firebug for FF will not show that form element in the rendered DOM. But the raw HTML (view source) will show it.
I tried to access the form via jQuery, but $('#SomeFrom') returns an empty array [].
If I change the DOCTYPE to transitional, it works. But my application-wide setting requires strict DOCTYPE. Is there a way to access the raw (source) HTML of the page via JavaScript?
Notes:
I am using SharePoint 2010 CMS. When I edit the HTML of the page and save it, it truncates the action part. Basically, its not the recommended way of creating form in it but I have already created lot of pages with forms. Now I need some scripting to validate, stringify and ajaxify them with same handler.
Also using this approach I can wrap the form-fields in a div and stringify and submit them like this:
JSON.stringify($("div#SomeForm input, div#SomeForm textarea, div#SomeForm select").serializeObject())
But if I would be able to access the form, the code will be more niftier and the same I could use jQuery's validate extension as well.

How to use page-mod to modify element loaded by JavaScript

I'm creating firefox addon to add onclick event to the specific button. ("input" element)
The button is placed in http://example.com/welcome#_pg=compose
but when I open the page, following error occures:
TypeError: document.querySelector("#send_top") is null
#send_top is id of the button which I want to modify. So, the button is not found.
This error occurs because http://example.com/welcome and http://example.com/welcome#_pg=compose is completely different pages.
In this case, the addon seems loading http://example.com/welcome but there is no button whose '#send_top' ID.
When #_pg=compose anchor is added, the button is loaded by JavaScript.
How can I load http://example.com/welcome#_pg=compose to modify the button?

Three thoughts to help you debug this:
to correctly match the url you should consider using a regular expression instead of the page-match syntax - this might allow you to react to the anchors in a more predictable way
I've found that when using content scripts with pages that are heavily modified by JS, you can run into timing issues. A hacky workaround might be to look for the element you want and, if it isn' there, do a setTimeout for a 100 milliseconds or so and then re-check. Ugly, yes, but it worked for some example code I used with the new twitter UI, for example.
You can use the unsafeWindow variable in your content script to directly access the page's window object - this object will contain any changes JS has made to the page and is not proxied. You should use unsafeWindow with great caution however as its use represent a possible security problem. In particular, you should never trust any data coming from unsafeWindow, ever.

A convenient way to see data added to an element via jQuery .data()

I am adding an id to an element via call to jQuery.data:
$layout.nextAll('.imagepicker').data('imgPickerId', randomnumber);
So my element of a class imagepicker will have [imgPickerId=randomnumbervalue] data attribute added to it.
It seems like there is a problem how I later on look for .imagepicker with exactly this imgPickerId. Where can I lookup which attributes are added to a particular element in a convenient way (excep from js code)? Maybe in firebug somewhere?
P.S. for some reason my "getter code" works in jQuery 1.6 but does not in 1.7. Still I am suspecting data isn't being added to an element and need a way to check it.

jQuery's data function stores everything in JavaScript, without altering the DOM in any way. I'm afraid you'll have to use code to access it.
A quick Google search also showed me a FireQuery plugin for Firebug, which seems to enable you to see the attached data of your elements. Haven't tried it myself, though, so I can't confirm that.
Update: Tested it, and it works fine! With FireQuery all data of your elements are visible right next to the HTML:

Have you considered in writing your data in an custom attribute like data-imgPickerID="someID"?
For sure this does not allow you to save huge data but you could inspect it via firebug and since you are only saving an ID it would fit for your needs.
Which is also very cool about the .data() method is you can retrieve your custom attribute from above like so .data("imgPickerID");

data() will save data in memory (of course linked to the elements in your selector), it doesn't write things on the element, so you can't look at that in firebug.
You can pre-populate elements with some data by using the html5 data attibute though
Look at this question for an expanded explanation
How does jQuery store data with .data()?