Using javascript, how can I tell if an HTML object in the DOM is not in the HTML source code?

I'm looking for ideas on how to detect objects that are in the HTML DOM, but they are not represented explicitly in the HTML source.

As you may know, if I have HTML source that contains the following:

<table id="myTbl">
    <tr id="row1">
        <td id="name">George</td>
    </tr>
</table>

...the HTML DOM will add the <tbody> object in the object tree without changing the source code, understanding that the source code implies it. So in the DOM, the structure is as if the HTML source had been:

<table id="myTbl">
    <tbody>
        <tr id="row1">
            <td id="name">George</td>
        </tr>
    </tbody>
</table>

I have a javascript function that is going through the DOM tree, and I need to detect when I have run across an object that is implied, that is, it is in the DOM, but not in the HTML source.

Any ideas how to do this? Maybe there is some attribute in the object that tells whether it originated from the source or not?

Answers


New idea based on Alex's idea. Still involves re-fetching the entire DOM, but it's impossible to do otherwise. You could implement this same logic server-side if it's feasible in your app. Using jQuery for brevity:

function getInsertedElements(callback){
    $.get('.', function(content){
        callback($(content
            .replace(/(<\w+[^>]+class\s*=\s*")/gi, '$1from-source ')
            .replace(/(<\w+)(?![^>]* class\s*=)/gi, '$1 class="from-source"')
        ).find(':not(.from-source)'));
    });
}

that will give you a list of all elements inserted :) May need some refinement , e.g. around the quotes matching class=" since a quote is technically optional there. Also un-tested, but should work.

Note that you're getting new elements back with this method, not the ones that currently exist in your DOM, so if that matters just be aware of it.


Reading your comment you just need to determine if a <tbody> tag has been added by the rendering process as opposed to being present in the source?

If so why not modify the source that does contain <tbody> by applying an attribute <tbody class="exp">, then as you walk the DOM you know that any tbody node not possessing that attribute was inserted by the rendering engine.


May be keep at the document.body.onload the string of the initial document.body.innerHTML

Then when you want to make the check, test first to see if they are still the same. If not compare both strings and find the differences.

I guess this is ok, if you don't have a too heavy page.


Need Your Help

Send Large amount of data Using WCF with client ASP.NET

asp.net web-services c#-4.0 web-config wcf-client

want to save a file in database as binary data using WCF. Client is ASP.NET C#. i have using the following code and able to send less then 100KB.

Listview onItemClickListener not executed

android onclicklistener

I'm lost, I can not see why the OnItemClickListener is not executed when i click on a item in the listview. I tried to add android:focusable="false" to both the listview and the textview's. Thanks ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.