什么是 HTML DOM #text 元素？

Question

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

我不明白这些#text元素是什么出现在我的console.log() 。

所以用户界面看起来像这样：

像这样的淘汰赛绑定：

<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 开发工具控制台输出：

text 、 tr 、 text中的“文本”元素是什么？ 没有与tr同级的文本元素。 tbody只能包含tr对吗？

如果我深入研究文本，我可以看到它有一个单元属性： HtmlCollection[2]两个节点都是td 。 所以它几乎就像text = tr但如果是这样，那么为什么我要得到 3 个兄弟节点来代表一行？

Answer 1

“ text 、 tr 、 text中的“文本”元素是什么？没有与tr同级的text元素……”

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

在您的情况下，文本节点来自您用于格式化的元素周围的空白。 该文本与任何其他文本一样被计算在内。

<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

如果是节点console.log(nodes.item(i).nodeValue)请在控制台打印#text的值

这可能是由于 html 元素分配值之间的空格而发生的。