What are HTML DOM elements?

Question

I am studying knockout.jsand trying to use the afterRender callback to apply behavior to elements.

I do not understand that these elements are #textdisplayed in mine console.log().

So, the user interface is as follows:

Knockout interception as follows:

<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 the chrome-dev tools console output:

What are the "text" elements text, tr, text? There is no text element that is a brother tr. tbodycan contain tronly?

, , : HtmlCollection[2], td. , text = tr, , 3 ?

Answer 1

"" " text, tr, text? text, tr..."

DOM node. .

, . , .

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

/ . DOM, .

---

, .

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

.children, .

tbody.children[]

Answer 2

- , "" html

,

document.body.appendChild(document.createTextNode("Some text node"))

Answer 3

, #text , node console.log(nodes.item(i).nodeValue)

- html.