1

DOM要素からすべての直接ノードを取得する必要がありますが、実際には、ノードの数と種類がわかりません。 .contents()? わかりました、見てみましょう。

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

Ok。

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

WTF？

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

では、単一のテキストノードはどうでしょうか。

4

2 に答える 2

2

これが役立つかどうかはわかりません。少し前に、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);​

これがあなたが知っているもう少し理にかなっていることを願っています。アレイはコンソールでは空に見えますが、そうではありません。長さを確認し、それにアクセスしようとすると、表示されます。

于 2012-04-19T14:35:52.293 に答える
-1

.contents（）はDOMノードに関係しています。2番目の例のその文字列はDOM要素ではありません。

于 2012-04-19T14:39:15.233 に答える