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

get SINGLE text node from DOM object

本文关键字：文本 节点 单个 获取 DOM 对象      更新时间：2023-09-26

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

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

还行。

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

跆拳道？

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

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

我不知道

这是否有帮助。不久前，我使用 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;
};

这确实可以找到文本节点并将它们分开...您也许可以从中提取一些东西。

更新：要回答您上面问题中的评论... 

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

我希望这对你知道更有意义。数组在控制台中显示为空，但事实并非如此。 检查长度并尝试访问它，您将看到。

.content（） 与 DOM 节点有关。 第二个示例中的字符串不是 DOM 元素。

相关文章：