StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are two kinds of DOM methods:</p> <ol> <li><p>Methods which return a reference to a single node. For example <a href="https://developer.mozilla.org/en-US/docs/DOM/document.getElementById" rel="nofollow"><code>getElementById</code></a> and <a href="https://developer.mozilla.org/en-US/docs/DOM/document.querySelector" rel="nofollow"><code>querySelector</code></a>.</p></li> <li><p>Methods which return <strong>a list</strong> of nodes. For example, <a href="https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName" rel="nofollow"><code>getElementsByTagName</code></a>, <a href="https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName" rel="nofollow"><code>getElementsByClassName</code></a>, <a href="https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll" rel="nofollow"><code>querySelectorAll</code></a>.</p></li> </ol> <p>Those methods which return a list of nodes usually return a <a href="https://developer.mozilla.org/en-US/docs/DOM/NodeList" rel="nofollow"><code>NodeList</code> <em><sup>[MDN]</sup></em></a> object, which has a very limited interface. All you can do with it is access the single elements in the list, just like an array, it does <strong>not</strong> have the same interface as a DOM node (or element).</p> <p>If you want to call further DOM methods or DOM properties on the elements in the list, you can either access a specific node directly with its index, or <em>iterate</em> over the list and do so for each element:</p> <pre><code>var elements = document.getElementsByTagName('div'); for(var i = 0, l = elements.length; i < l; i++) { // do something with elements[i] } </code></pre> <p>Note that <code>NodeList</code>s are usually <em>live</em>, which means any changes to the DOM (e.g. removing a <code>div</code> element) will update the list automatically.</p> <hr> <p>In your particular situation, you have to options:</p> <ol> <li><p>Use <code>querySelectorAll</code> to select all rows:</p> <pre><code>var rows = document.querySelectorAll('table.' + myTable + ' tr'); </code></pre></li> <li><p>or iterate over the selected elements:</p> <pre><code>var rows = []; var tables = document.getElementsByTagName("table"); for (var i = 0, l = tables.length; i < l; i++) { // check whether it is a table with class in the variable `myTable` if ((' ' + tables[i].className + ' ').indexOf(' ' + myTable + ' ') > -1) { rows = rows.concat(tables[i].getElementsByTagName('tr')); } } </code></pre> <p>Instead of selecting the elements by tag name and then test their class, you could directly use <code>getElementsByClassName</code> instead, but it is not as widely supported as <code>querySelectorAll</code>.</p></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload