javascript - DOMParser - 子元素不是 DOM 对象

Question

DOMParser 有一个奇怪的行为。当我使用“text/xml”作为参数时，我得到了我的对象，并且每次我使用子节点(如parentNodes)时，子节点本身就是一个DOM对象。但是，当我使用“text/html”作为参数时，子级不是 DOM 对象。这是为什么？我怎样才能为所有子元素提供 DOM 对象？

这就是我所做的:

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html").getElementsByTagName('p');

console.log(doc[0].childNodes[0]);

我的 childNode 返回元素，但不是作为 DOM 对象...

编辑:这是我的递归函数:

        var getParents = function(node, parentNodes){
            if(node.nodeName == 'span'){
                parentNodes.push(node.attributes[0].nodeValue);
            } else if(node.nodeName == 'p' && node.attributes.length > 0) {
                parentNodes.push(node.nodeName);
                parentNodes.push(node.attributes[0].nodeValue);
            } else {
                parentNodes.push(node.nodeName);
            }
            if(node.parentNode.nodeName != '#document'){
                getParents(node.parentNode, parentNodes);
            }
            return parentNodes;

        };
        var parse = function(node, vertical, horizontal, paragraph){
            if(node.childNodes.length > 0){
                for(var int = 0; int < node.childNodes.length; int++){
                    parse(node.childNodes[int], vertical, horizontal, paragraph);
                }
            } else{
                var object = {};
                var attributes = getParents(node, []);
                for(var int = 0; int < attributes.length; int++) {
                    // right alignment
                    if(/text-align/i.test(attributes[int])){
                        object.alignment = attributes[int].split(": ")[1].replace(';','');
                    } else if (/color/i.test(attributes[int])) {
                        // color
                        object.color = attributes[int].split(":")[1];
                    } else if (attributes[int] == 'em') {
                        // italic
                        if (object.italics) {
                            delete object.bold;
                            object.bolditalics = true;
                        } else {
                            object.italics = true;
                        }
                    } else if (attributes[int] == 'strong') {
                        // bold
                        if (object.italics) {
                            delete object.italics;
                            object.bolditalics = true;
                        } else {
                            object.bold = true;
                        }
                    } else if (attributes[int] == 'u') {
                        // underline
                        object.decoration = 'underline';
                    } else if (attributes[int] == 's') {
                        // strike
                        object.decoration = 'lineThrough';
                    }
                }
                object.text = node.textContent;
                pdfContent[vertical][horizontal].push(object);
            }
        };
        for(var vertical = 0; vertical < payment.htmlContent.length; vertical++) {
            for(var horizontal = 0; horizontal < payment.htmlContent[vertical].length; horizontal++) {
                var parser = new DOMParser();
                var paragraphs = parser.parseFromString(payment.htmlContent[vertical][horizontal], "text/xml").getElementsByTagName('p');
                for (var paragraph = 0; paragraph < paragraphs.length; paragraph++) {
                    for (var num = 0; num < paragraphs[paragraph].childNodes.length; num++) {
                        parse(paragraphs[paragraph].childNodes[num], vertical, horizontal, paragraph);
                    }
                }
            }
        }

Answer 1

我对这些值做了一些假设，并在代码中添加了一些验证，例如 if(node.attributes.length>0) 到您的代码中，它似乎有效。

var payment={htmlContent:[['<p>some<em>text</em></p>', '<p>some<span>text<strong>here</strong></span></p>'],['<p>some<s>text</s></p>', '<p>some<span style="color:#FF00FF">text</span></p>']]};    

var getParents = function(node, parentNodes){

            if(node.nodeName == 'span'){
              if(node.attributes.length>0)
                parentNodes.push(node.attributes[0].nodeValue);
            } else if(node.nodeName == 'p' && node.attributes.length > 0) {
                parentNodes.push(node.nodeName);
              if(node.attributes.length>0)
                parentNodes.push(node.attributes[0].nodeValue);
            } else {
                parentNodes.push(node.nodeName);
            }
            if(node.parentNode.nodeName != '#document'){
                getParents(node.parentNode, parentNodes);
            }
            return parentNodes;

        };
        var parse = function(node, vertical, horizontal, paragraph){
            if(node.childNodes.length > 0){
                for(var int = 0; int < node.childNodes.length; int++){
                    parse(node.childNodes[int], vertical, horizontal, paragraph);
                }
            } else{
                var object = {};
                var attributes = getParents(node, []);
              console.log(attributes);
                for(var int = 0; int < attributes.length; int++) {
                    // right alignment
                    if(/text-align/i.test(attributes[int])){
                        object.alignment = attributes[int].split(": ")[1].replace(';','');
                    } else if (/color/i.test(attributes[int])) {
                        // color
                        object.color = attributes[int].split(":")[1];
                    } else if (attributes[int] == 'em') {
                        // italic
                        if (object.italics) {
                            delete object.bold;
                            object.bolditalics = true;
                        } else {
                            object.italics = true;
                        }
                    } else if (attributes[int] == 'strong') {
                        // bold
                        if (object.italics) {
                            delete object.italics;
                            object.bolditalics = true;
                        } else {
                            object.bold = true;
                        }
                    } else if (attributes[int] == 'u') {
                        // underline
                        object.decoration = 'underline';
                    } else if (attributes[int] == 's') {
                        // strike
                        object.decoration = 'lineThrough';
                    }
                }
                object.text = node.textContent;
              if(!pdfContent[vertical])pdfContent[vertical]=[];
              if(!pdfContent[vertical][horizontal])
                pdfContent[vertical][horizontal]=[];
                pdfContent[vertical][horizontal].push(object);
            }
        };
var pdfContent = [];
        for(var vertical = 0; vertical < payment.htmlContent.length; vertical++) {
            for(var horizontal = 0; horizontal < payment.htmlContent[vertical].length; horizontal++) {
                var parser = new DOMParser();
                var paragraphs = parser.parseFromString(payment.htmlContent[vertical][horizontal], "text/xml").getElementsByTagName('p');
                for (var paragraph = 0; paragraph < paragraphs.length; paragraph++) {
                    for (var num = 0; num < paragraphs[paragraph].childNodes.length; num++) {
                        parse(paragraphs[paragraph].childNodes[num], vertical, horizontal, paragraph);
                    }
                }
            }
        }
for(var i=0; i<pdfContent.length; i++){
   for(var j=0; j<pdfContent[i].length; j++){
    document.querySelector('#log').textContent+=pdfContent[i][j].toSource();
    }
  }

<p id="log"></p>