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:

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?

cookie monster · Accepted Answer · 2014-01-25T22:42:02.120

14

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

edited Jan 25 '14 at 22:42

answered Jan 25 '14 at 22:24

cookie monster

10,671
4
31
45

Ok so by removing the carriage return between my script>tr and tr>script they were removed. I'm very surprised by this as I thought whitespace/formatting is explicitly ignored when tags get parsed to DOM elements? So as much as Ive been using http compression to send pages to client, should also be explicitly minifying every single page so when it hits the (mobile) browser, the client end doesn't have to process as much "gunk"? – rism Jan 25 '14 at 22:41
@rism: Yeah, according to the W3 standards all text, including whitespace, gets put into a text node. Older IE didn't observe this, and ignored such formatting space. And yes, I'd suggest compressing the final HTML to have all that space removed. Like you said, less to process. Less memory overhead as well. – cookie monster Jan 25 '14 at 22:44

score 2 · Answer 2 · edited Jun 05 '20 at 07:21

2

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"))

edited Jun 05 '20 at 07:21

Aryan Beezadhur

4,503
4
21
42

answered Jan 25 '14 at 22:24

Theofilos Mouratidis

1,146
12
32

score -1 · Answer 3 · answered Aug 11 '17 at 05:32

-1

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.

answered Aug 11 '17 at 05:32

Thomaskutty Baby Eranakulam

31
3

What are HTML DOM #text elements?

3 Answers3

Linked

Related