什么是HTML DOM #text元素？ [英] What are HTML DOM #text elements?

问题描述

我正在学习 knockout.js ，并尝试使用afterRender回调将行为应用于元素。

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

我不明白这些 #text 元素是否出现在我的 console.log（）。

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

所以UI看起来像这样：

So UI looks like this:

img src =https://i.stack.imgur.com/ZLm4t.pngalt =在这里输入图像描述>

Knockout绑定如下： / p>

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>

模板：

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

回调函数：

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

然后chrome开发工具控制台输出：

And then chrome dev tools console output:

text ， tr ， text ？没有文本元素是 tr 的兄弟。 tbody 只能包含 tr 的权利？

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?

如果我钻入文本，我可以看到它有一个单元格的属性： HtmlCollection [2] 其中两个节点是 td 。所以它几乎像 text = tr ，但是如果是这样的话，那么为什么我得到3个兄弟节点来表示一行？

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?

推荐答案

text 中的 tr ， text ？没有 text 一个兄弟姐妹 tr ...

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

DOM中的所有内容都由一个节点表示。包括纯文本。

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>

打开/关闭标签周围的所有空白空格都表示为文本节点。这对DOM中的所有元素都是如此，而不仅仅是表格。

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

或者你可以使用通用 .children 以避免文本节点。

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

tbody.children[]

这篇关于什么是HTML DOM #text元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！