CODEWITHSUNDEEP
javascripthtmldom
rism
rism

Reputation: 12132

What are HTML DOM #text elements?

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:

enter image description here

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:

enter image description here

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?

Upvotes: 12

Views: 22694

Answers (3)

Theofilos Mouratidis
Theofilos Mouratidis

Reputation: 1156

The text nodes are the ones you write with "" inside your HTML.

Run this in your console, then scroll to the bottom, right-click and click inspect element:

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

Upvotes: 3

Thomaskutty Baby Eranakulam
Thomaskutty Baby Eranakulam

Reputation: 31

Please print the value of #text in the console if it is node console.log(nodes.item(i).nodeValue)

This may occur due a space between the html element assign value.

Upvotes: -1

cookie monster
cookie monster

Reputation: 10972

"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[]

Upvotes: 16

Related Questions