Javascript 从DOM对象获取单个文本节点

需要从DOM元素获取所有直接节点，但实际上不知道它有多少个以及它们是什么类型的。

.contents（）？

好的，让我看看

$（''）.html（'p
'）.contents（）

->

[​P​
​]

嗯

$（“”）.html（'textNode'）.contents（）
->
[]

WTF

$（“”）.html（'textNode'）.append（'other'）.contents（）
->
[“文本节点”，“另一个”]

好的，那么单文本节点呢？
我不知道这是否有用。不久前，我使用JSON样式的输入构建了一个文档片段生成器。我还为它编写了一个反向函数（有点工作），以便您可以将节点列表转换为JSON字符串


我希望这对您来说更有意义。该数组在控制台中显示为空，但不是空的。检查长度并尝试访问它，您就会看到。
我不知道这是否有用。不久前，我使用JSON样式的输入构建了一个文档片段生成器。我还编写了一个反转函数，以便将节点列表转换为JSON字符串


我希望这对您来说更有意义。该数组在控制台中显示为空，但它不是空的。检查长度并尝试访问它，您将看到。
.contents（）与DOM节点有关。第二个示例中的字符串不是DOM元素。
.contents（）与DOM节点有关。第二个示例中的字符串不是DOM元素。
如果使用
$（''.html（'textNode'）。appendTo（'body'）
，则使用
.contents（）
将有
textNode
。只要结构不是dom的一部分，jQuery处理这个问题的方式似乎与预期不同。正如我所认识到的，我的问题不是基于jQuery，而是基于JavaScript。
q=$（''）.html（'dsfdsf'）[0]
q.childNodes
->
[]
，而是
console.dir（q）
return htmldevelment，其中有一个childNode。有什么想法吗？在将当前HTML结构附加到DOM之前，我会先处理它，所以
appendTo（'body'））
不是一个解决方案我的评论不是作为一个解决方案，更多的是作为一个参考/注释。顺便说一下，你在这里肯定是在处理jQuery的事情。>肯定是在处理jQuery
div=document.createElement（'div'）；div.appendChild（document.createTextNode（'dsf'）；div.childNodes；
->
[]
如果你使用
$（'.html）（'textNode'）.appendTo（'body'）
然后
.contents（）
将具有
textNode
。只要结构不是dom的一部分，jQuery处理这一问题的方式似乎与预期不同。正如我所认识到的，我的问题不是基于jQuery，而是基于JavaScript。
q=$（''.html（'dsfdsf'）[0]
q.childNodes
->
[]
，但是
console.dir（q）
返回有一个childNode的HtmlLevel。有什么想法吗？在将它附加到DOM之前，我使用当前的HTML结构，所以
appendTo（'body'））
不是一个解决方案我的评论不是作为一个解决方案，更多的是作为一个参考/注释。顺便说一句，你在这里肯定是在处理jQuery问题。>肯定是在处理jQuery
div=document.createElement（'div'）；div.appendChild（document.createTextNode（'dsf'）；div.childNodes；
->
[]
您的脚本似乎是合法的。
q=$（''）.html（'dsfdsf'）；w=reverseFunction（q）；w[0].chidlNodes
->带有单个childNode的对象。但如果能理解为什么它的行为如此奇怪，那就好了。在我最后一次对问题的评论中，有一个版本甚至没有涉及到jQuery。同样的行为-如果添加另一个appendChild，它将返回两者，但如果只有一个-空数组。是的，它会有帮助。然后我可以通过
对它进行迭代
.Thank.element.children（）包含文本节点iirc。请检查caniuse.com以了解兼容性。有趣的是，Google Chrome中出现了问题，但FF正常返回单个文本节点。因此，这是Chrome错误。您的脚本似乎是合法的。
q=$（''.html（'dsfdsf'）；w=reverseFunction（q）；w[0].chidlNodes
->带有单个childNode的对象。但如果能理解为什么它的行为如此奇怪，那就好了。在我最后一次对问题的评论中，有一个版本甚至没有涉及到jQuery。同样的行为-如果添加另一个appendChild，它将返回两者，但如果只有一个-空数组。是的，它会有帮助。然后我可以通过
对它进行迭代
.Thank.element.children（）包含文本节点iirc。检查caniuse.com是否兼容。有趣的是，Google Chrome中出现了问题，但FF通常返回单个文本节点。因此，这是Chrome错误
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;
};

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