What are HTML DOM #text elements?

Question

I'm learning knockout.js and trying to use an afterRender callback to apply behaviour to elements.

I don't understand what these #text elements are that show up in my console.log().

So UI looks like this:

Knockout binding like this:

<div id='categoriesTree' style="color:black">    
    <table class='categoriesEditor'>
        <tbody data-bind="template: { name: 'itemTmpl', foreach:children,  afterRender: myPostProcessingLogic2  }"></tbody>
    </table>
</div>

Template:

<script id="itemTmpl" type="text/html">
    <tr>
        <td>
            <div class="input-group cat-block" style="margin-left: 3px; margin-bottom: 12px;">
                <label id="may-search-tags-lbl" style="background-color:beige;visibility:hidden;margin:0;">Category Name</label>
                <input data-bind='value: Name' id="maynavsearchphrase" type="text" class="form-control"
                       placeholder="Category name" name="maynavsearchphrase"
                       value="" />

                <div class="input-group-btn btn-grp-70 cat-meth-off">
                    <button id="may-nav-tags-search-btn" class="btn btn-default btnIcon may-tipped"
                            type="button" data-toggle="tooltip" title="Delete Category">
                        <i class="glyphicon glyphicon-remove"></i>
                    </button>
                    <button id="may-nav-search-search-btn" class="btn btn-default btnIcon may-tipped"
                            data-toggle="tooltip" title="Add subcategories"
                        data-bind='click: $root.addCategory'
                        type="button">
                        <i class="glyphicon glyphicon-expand"></i>
                    </button>
                </div>
            </div>
        </td>
        <td data-bind="visible: children().length">
            <table>
                <tbody data-bind="template: { name: 'itemTmpl', foreach: children }"></tbody>
            </table>
        </td>
    </tr>
</script>

Callback function:

 self.myPostProcessingLogic2 = function (elements) {
                console.log(elements);
            }

And then chrome dev tools console output:

What are the "text" elements in text, tr, text? There is no text element that is a sibling of tr. tbody can only contain tr's right?

If I drill into text I can see that it has an attribute of cells : HtmlCollection[2] both nodes of which are td. So it's almost like text = tr but if thats the case then why am I getting 3 sibling nodes to represent one row?

Answer 1

"What are the "text" elements in text, tr, text? There is no text element that is a sibling of tr..."

Everything in the DOM is represented by a node. Including plain text.

In your case, the text nodes are coming from the whitespace you have around your elements for formatting. That text is counted just like any other text.

<table>
    <tbody>
        <tr>
            <td>foo</td>
        </tr>
    </tbody>
</table>

All that empty whitespace around the opening/closing tags gets represented as text nodes. This is true for all elements in the DOM, not just tables.

---

Table elements have special collections for you to use, which allow you to access just the table elements.

table.tBodies[] // to get the tbody elements of a table

table.rows[]    // to get the rows of a table

tbody.rows[]    // to get the rows of a tbody

row.cells[]     // to get the cells of a row

Or you can use the generic .children to avoid text nodes.

tbody.children[]