Parsing DOM to search specific tags with specific custom attribute

Discussion in 'Javascript' started by William FERRERES, Jul 5, 2007.

  1. 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.
     
    William FERRERES, Jul 5, 2007
    #1
    1. Advertising

  2. On Jul 5, 12:21 pm, "William FERRERES" <> wrote:
    > 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, Jul 5, 2007
    #2
    1. Advertising

  3. [order restored]
    On Jul 5, 1:41 pm, "William FERRERES" <> wrote:
    >
    > "Peter Michaux" <> a écrit dans le message denews:...
    >
    > > On Jul 5, 12:21 pm, "William FERRERES" <> wrote:
    > > > 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.

    >
    > 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
     
    Peter Michaux, Jul 5, 2007
    #3
  4. 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

    "Peter Michaux" <> a écrit dans le message de
    news:...
    > On Jul 5, 12:21 pm, "William FERRERES" <> wrote:
    > > 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
    >
     
    William FERRERES, Jul 5, 2007
    #4
  5. On Jul 5, 1:21 pm, "William FERRERES" <> wrote:
    > 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
     
    scripts.contact, Jul 6, 2007
    #5
  6. William FERRERES

    Guest

    On Jul 6, 10:03 am, "scripts.contact" <>
    wrote:
    > On Jul 5, 1:21 pm, "William FERRERES" <> wrote:
    >
    > > 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


    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
     
    , Jul 8, 2007
    #6
  7. William FERRERES

    RobG Guest

    On Jul 9, 1:30 am, "" <>
    wrote:
    > On Jul 6, 10:03 am, "scripts.contact" <>
    > wrote:
    > > On Jul 5, 1:21 pm, "William FERRERES" <> wrote:
    > > > 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

    >
    > 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
    >



    --
    Rob
     
    RobG, Jul 9, 2007
    #7
  8. 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.

    "RobG" <> a écrit dans le message de
    news:...
    > On Jul 9, 1:30 am, "" <>
    > wrote:
    > > On Jul 6, 10:03 am, "scripts.contact" <>
    > > wrote:
    > > > On Jul 5, 1:21 pm, "William FERRERES" <> wrote:
    > > > > 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

    > >
    > > 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
    > >

    >
    >
    > --
    > Rob
    >
     
    William FERRERES, Jul 9, 2007
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ranganath

    Custom Tags within Custom Tags.

    Ranganath, Oct 17, 2003, in forum: Java
    Replies:
    2
    Views:
    466
    Ranganath
    Oct 21, 2003
  2. Mike
    Replies:
    3
    Views:
    881
    Michael Borgwardt
    Jan 9, 2004
  3. Dave
    Replies:
    0
    Views:
    454
  4. Replies:
    4
    Views:
    1,797
    Andrew Thompson
    Sep 20, 2006
  5. Reinhold Schrecker
    Replies:
    3
    Views:
    161
Loading...

Share This Page