什么是 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 元素分配值之間的空格而發生的。