Path: csiph.com!usenet.pasdenom.info!gegeweb.org!eternal-september.org!feeder.eternal-september.org!mx04.eternal-september.org!.POSTED!not-for-mail From: Matt McDonald Newsgroups: comp.lang.javascript Subject: Re: Indexing DOM Elements Date: Thu, 21 Jun 2012 21:31:21 -0600 Organization: A noiseless patient Spider Lines: 60 Message-ID: References: <1cj7u7ta6tl66bmkmkqt3asr5lkh82ps7r@4ax.com> Reply-To: matt@fortybelow.ca Mime-Version: 1.0 Content-Type: text/plain; charset=ISO-8859-1; format=flowed Content-Transfer-Encoding: 7bit Injection-Date: Fri, 22 Jun 2012 03:31:23 +0000 (UTC) Injection-Info: mx04.eternal-september.org; posting-host="U6+Eq91yUGzfJ/0WV+1eLQ"; logging-data="9292"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1/pqBKX6gIbqC/EctguoxJlUyR/gzea6SY=" User-Agent: Mozilla/5.0 (X11; Linux i686; rv:12.0) Gecko/20120430 Thunderbird/12.0.1 In-Reply-To: <1cj7u7ta6tl66bmkmkqt3asr5lkh82ps7r@4ax.com> Cancel-Lock: sha1:bu1m2a3BSYUwG4gEYsCvhQZgJmM= Xref: csiph.com comp.lang.javascript:14612 On 12-06-21 07:48 PM, Gene Wirchenko wrote: > It establishes a 100x100 table of cells to draw in. What > I would like to know is how to refer to any of the cells > directly. What you seek lies in the DOM Level 2 HTML Specification[0]. First off, understand the HTMLTableElement[1] interface, which provides access to table sections[2] and rows[3]. Secondly, understand the importance of table sections and how integral they are in document tree traversal. Third, understand how table cells[4] can be accessed[5] from table rows. With that knowledge, one can perform a vast amount of operations on tables via the DOM. > For example, I would like to click on two points and have > the line between the two points drawn. To do that, I would > have to directly access the cells of the table. How do I do > this? What is it called? What you seek lies in the technique of "Event Delegation". Your problem can be solved with a handler for the `click` event (be it DOM 0 or DOM Level 2+) attached to the corresponding table element or another common ancestor. Next, fetch the event target ([event object].target in DOM 0 or DOM Level 2+ events, [global].event.srcElement in MSIE events). A logical step would to then check if the target is a table cell (which would be context-specific) by its `nodeName`[6] property. Then, store the target if it is a table cell. A second invocation of the specified `click` event handler would store another table cell, from which a line could be drawn spanning a distance to the other stored table cell. The storage medium could perhaps then be cleared, and the cycle would continue. [Quotations trimmed and indentation removed.] [0]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html [1]: http://www.w3.org/TR/DOM-Level-2-HTML/ html.html#ID-64060425 [2]: http://www.w3.org/TR/DOM-Level-2-HTML/ html.html#ID-67417573 [3]: http://www.w3.org/TR/DOM-Level-2-HTML/ html.html#ID-6986576 [4]: http://www.w3.org/TR/DOM-Level-2-HTML/ html.html#ID-82915075 [5]: http://www.w3.org/TR/DOM-Level-2-HTML/ html.html#ID-67349879 [6]: http://www.w3.org/TR/DOM-Level-2-Core/ core.html#ID-F68D095 (mind the spaces on trimmed links) -- Matt McDonald: Web/Flash Developer; Edmonton, Alberta, Canada