Question

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

我不明白#text中显示的这些console.log()元素是什么。

所以UI看起来像这样：

enter image description here

像这样敲除绑定：

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

enter image description here

text，tr，text中的“文字”元素是什么？没有文本元素是tr的兄弟。 tbody只能包含tr吗？

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

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

Answer 2

文本节点是您在html

中使用“”编写的节点

在您的控制台上写下此内容，然后滚动到底部，右键单击并检查元素

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

什么是HTML DOM #text元素？

2 个答案: