HTML DOM #text元素是什么？

Question

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

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

用户界面看起来像这样：

Knockout绑定如下：

<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"元素是什么，位于text、tr、text中？不存在与tr同级的文本元素。tbody只能包含tr对吧？

如果我进入text，我可以看到它有一个cells属性：HtmlCollection[2]，其中的两个节点都是td。所以这就像text = tr，但如果是这样，为什么我要获取3个兄弟节点来表示一行呢？

- rism

Answer 1

“在text、tr、text中，什么是“text”元素？没有一个是tr的兄弟元素......"

文档对象模型（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[]

- cookie monster

---

好的，所以通过在我的脚本>tr和tr>脚本之间删除回车符，它们被删除了。我对此感到非常惊讶，因为我认为当标签被解析为DOM元素时，空格/格式明确被忽略了？因此，尽管我一直在使用http压缩将页面发送到客户端，但也应该显式地缩小每个页面，这样当它到达（移动）浏览器时，客户端就不必处理太多的“垃圾”了？ - rism

根据W3标准，所有文本，包括空格，都会被放入文本节点。旧版IE没有遵守这一规定，并忽略了这样的格式空间。我建议压缩最终的HTML以删除所有这些空格。就像你说的那样，处理的内容更少。内存开销也更小。 - cookie monster

Answer 2

文本节点是您在HTML中使用""编写的节点。

在控制台中运行此命令，然后滚动到底部，右键单击并单击检查元素：

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

- Theofilos Mouratidis

Answer 3

请在控制台中打印 #text 的值，如果它是节点，则使用 console.log(nodes.item(i).nodeValue)。

这可能是由于 HTML 元素赋值之间的空格导致的。

- Thomaskutty Baby Eranakulam