Parsing DOM to search specific tags with specific custom attribute

[William FERRERES]

Hello,
I've got a document with lots of TD tags, which I've added a special
attribute. What I intend to do is to search these TD tags among others. The
only methods available for document object are getElementById or
getElementByTagName. I use the second one and retrieve a collection of all
the TD tags and then I search if the specific attribute is not null.
Is there a better approch ? Because, my html pages is growing and the
parsing of the document can take time.

I hope my explanation will be clear enough.

Thanks for your answers.

 

[Peter Michaux]

Hello,
I've got a document with lots of TD tags, which I've added a special
attribute. What I intend to do is to search these TD tags among others. The
only methods available for document object are getElementById or
getElementByTagName. I use the second one and retrieve a collection of all
the TD tags and then I search if the specific attribute is not null.
Is there a better approch ? Because, my html pages is growing and the
parsing of the document can take time.

I think that roughly that is what you have to do. There isn't a
findElementsBySpecialAttribute() function.

Does your table have an id attribute so you can start the search from
just inside the particular table of interest? That might save time if
there are many td elements in other tables in the page.

What do you mean by "parsing of the document"? The document is parsed
when it is loaded. The browser doesn't re-parse when you search the
DOM for elements of a certain tag.

Peter

 

[Peter Michaux]

[order restored]

All the code I use is generated by ASP.Net .
So, unfornatully the page is made of multiple dynamic tables(datagrid
rendering) and their ids' are unknown.
By "parsing of the document", I mean searching through the entire document.

Well if some of the other tables are big ones, and there is an id
attribute on the one that is interesting to you, then you can scope
your search quite a bit right there...

var candidates =
document.getElementById('myTableId').getElementsByTagName('td');

Then search these candidates for you special attribute. Did you think
about using a class attribute to denote the special td elements? Does
your HTML validate with this special attribute?

http://validator.w3.org/

(note XHTML is not a good idea)

Peter

 

[William FERRERES]

All the code I use is generated by ASP.Net .
So, unfornatully the page is made of multiple dynamic tables(datagrid
rendering) and their ids' are unknown.
By "parsing of the document", I mean searching through the entire document.

William

 

[scripts.contact]

Hello,
I've got a document with lots of TD tags, which I've added a special
attribute. What I intend to do is to search these TD tags among others. The
only methods available for document object are getElementById or
getElementByTagName. I use the second one and retrieve a collection of all
the TD tags and then I search if the specific attribute is not null.
Is there a better approch ? Because, my html pages is growing and the
parsing of the document can take time.

You can use XPATH:
http://developer.mozilla.org/en/docs/DOM:document.evaluate
not supported by ie

 

[dhtmlkitchen]

You can use XPATH:http://developer.mozilla.org/en/docs/DOM:document.evaluate
not supported by ie

XPATH - document.evaluate. Good answer!

But yeah, IE again here.

@WILLIAM - The easiest CROSS BROWSER way in your case might be to add
an ID or NAME to the SELECT. It could be dynamically generated, too,
BTW.

var tableSelectList = document.getElementsByName( "tableSelect" );

OR
var rows =
document.getElementById( "myTable" ).getElementsByTagName( "tbody" )
[0].rows;
var selectsInTable = new Array( rows.length );
for( var i = 0; i < selectsInTable.length; i++ ) {
var selectsInTable.push( document.getElementById( "tableSelect_" +
i ) )
}

The loop can be replaced by using Array.forEach (which IE will need
extra Array Extras code for). IE Again...

Garrett

 

[RobG]

XPATH - document.evaluate. Good answer!

But yeah, IE again here.

@William - The easiest CROSS BROWSER way in your case might be to add
an ID or NAME to the SELECT. It could be dynamically generated, too,
BTW.

Select elements weren't mentioned, the OP was looking for TD elements
with a specific custom attribute.

var tableSelectList = document.getElementsByName( "tableSelect" );

OR
var rows =
document.getElementById( "myTable" ).getElementsByTagName( "tbody" )
[0].rows;

If there is a need to get all the rows in a table, use the table's
rows collection:

var rows = document.getElementById("myTable" ).rows;

var selectsInTable = new Array( rows.length );
for( var i = 0; i < selectsInTable.length; i++ ) {
var selectsInTable.push( document.getElementById( "tableSelect_" +
i ) )

Or forget looping:

var selectsInTable = document.getElementById('myTable').
getElementsByTagName('select');

The loop can be replaced by using Array.forEach (which IE will need
extra Array Extras code for). IE Again...

The Array forEach() method was introduced with JavaScript 1.6, many
browsers other than IE will need their Array.prototype extended to
support it.

<URL: http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:forEach

 

[William FERRERES]

Thanks for all your answers.
There's no magical solution.
I've speed up my code using a function called getElementsByAttribute. It's
faster than my first code. But when the number of TABLE (datagrid) tags
increase, the loop takes more and more time to execute.
Furthermore, clients use IE as browser.

XPATH - document.evaluate. Good answer!

But yeah, IE again here.

@William - The easiest CROSS BROWSER way in your case might be to add
an ID or NAME to the SELECT. It could be dynamically generated, too,
BTW.

Select elements weren't mentioned, the OP was looking for TD elements
with a specific custom attribute.

var tableSelectList = document.getElementsByName( "tableSelect" );

OR
var rows =
document.getElementById( "myTable" ).getElementsByTagName( "tbody" )
[0].rows;

If there is a need to get all the rows in a table, use the table's
rows collection:

var rows = document.getElementById("myTable" ).rows;

var selectsInTable = new Array( rows.length );
for( var i = 0; i < selectsInTable.length; i++ ) {
var selectsInTable.push( document.getElementById( "tableSelect_" +
i ) )

Or forget looping:

var selectsInTable = document.getElementById('myTable').
getElementsByTagName('select');

The loop can be replaced by using Array.forEach (which IE will need
extra Array Extras code for). IE Again...

The Array forEach() method was introduced with JavaScript 1.6, many
browsers other than IE will need their Array.prototype extended to
support it.

<URL: http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:forEach