从 DOM 对象获取 SINGLE 文本节点答案

【问题标题】：get SINGLE text node from DOM object从 DOM 对象获取 SINGLE 文本节点
【发布时间】：2012-05-01 02:27:09
【问题描述】：

需要从 DOM 元素中获取所有直接节点，但实际上并不知道它有多少以及它们是什么类型。 .contents()? 好的，让我们看看..

$('<div />').html('<p>p</p>').contents() -> [<p>p</p>]

好的。

$('<div />').html('textNode').contents() -> []

WTF？

$('<div />').html('textNode').append('another').contents() -> ["textNode", "another"]

好的，那么单个文本节点呢？

【问题讨论】：

如果您使用$('<div />').html('textNode').appendTo('body')，那么.contents() 将拥有textNode。只要结构不是 dom 的一部分，似乎 jQuery 正在处理这种不同的情况。
据我所知，我的问题不是基于 jQuery，而是基于 JavaScript。 q = $('<div></div>').html('dsfdsf')[0] q.childNodes -> []，但 console.dir(q) 返回具有一个 childNode 的 HTMLDivElement。有什么想法吗？
在将其附加到 DOM 之前，我使用当前的 HTML 结构，所以 appendTo('body') 不是解决方案
我的评论并不是作为解决方案，而是作为参考/注释。顺便说一句，你肯定在这里处理 jQuery 的事情。
>肯定是在处理一个 jQuery div = document.createElement('div'); div.appendChild(document.createTextNode('dsf')); div.childNodes; -> []

标签： javascript jquery textnode

【解决方案1】：

我不知道这是否有帮助。不久前，我使用 JSON 样式的输入构建了一个文档片段生成器。我还为它写了一个（有点工作的）反向函数，这样你就可以把你的 nodeList 变成一个 JSON 字符串。

https://gist.github.com/2313580

var reverseFunction = function(DOM /* DOM tree or nodeList */) {
    var tree = [];[].forEach.call(DOM, function(obj) {
        if (obj instanceof Text) {
            tree.push({
                'textContent': obj.textContent
            });
        } else {
            var tmp = {};
            tmp['tagName'] = obj.nodeName;
            for( var data in obj.dataset ) {
                tmp['data-' + data] = obj.dataset[data];
            }
            for (var i = 0, l = obj.attributes.length; i < l; i++) {
                var key = obj.attributes[i].name,
                    val;
                if (key.indexOf('data-') === -1) {
                    switch (key) {
                    case ('class'):
                        key = 'className';
                        break;
                    case ('style'):
                        val = {};
                        obj.attributes[i].value.split(';').forEach(function(rule) {
                            var parts = rule.split(':');
                            val[parts[0]] = parts[1];
                        });
                        break;
                    };
                    tmp[key] = val || obj.attributes[i].value;
                }
            }
            if (obj.childNodes.length > 0) {
                tmp['childNodes'] = reverseFunction(obj.childNodes);
            }
            tree.push(tmp);
        }
    });
    return tree;
};

这确实找到了 textNodes 并将它们分开......你也许可以从中提取一些东西。

更新：回答上述问题中的评论...

var div = document.createElement('div');
div.appendChild(document.createTextNode('dsf'));
console.log( div.childNodes.length, div.childNodes, div.childNodes[0].textContent);

我希望这对您来说更有意义。该数组在控制台中显示为空，但不是。检查长度并尝试访问它，你会看到。

【讨论】：

您的脚本似乎合法。 q = $('<div></div>').html('dsfdsf'); w = reverseFunction(q); w[0].chidlNodes -> 具有单个 childNode 的对象。但很高兴能理解为什么它表现得如此奇怪
在我对这个问题的最后评论中，有一个版本甚至没有触及 jQuery。并且表现相同 - 如果添加另一个 appendChild 它将返回两者，但如果只有一个 - 空数组。
是的，它有帮助。然后我可以遍历for。谢谢。
element.children() 包含文本节点 iirc。检查 caniuse.com 的兼容性。
有趣的是 - 在谷歌浏览器中发现了问题，但 FF 正常返回单个文本节点。所以，这是 Chrome 错误

【解决方案2】：

.contents() 与 DOM 节点有关。第二个示例中的字符串不是 DOM 元素。

【讨论】：