2015-04-21 4 views
0

Существует странное поведение с DOMParser. Когда я использую «text/xml» в качестве параметра, я получаю свой объект, и каждый раз, когда я использую дочерний элемент (например, parentNodes), он сам является объектом DOM. Однако, когда я использую параметр «text/html» в качестве параметра, дети не являются объектами DOM. Почему это и как у меня есть объекты DOM для всех детей?DOMParser - дети не являются объектами DOM

Вот что я делаю:

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

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

Мой childNode возвращает элемент, но не как объект DOM ...

Edit: Вот мои рекурсивные функции:

 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); 
        } 
       } 
      } 
     } 
+0

что вы имеете в виду под "они не объекты DOM"? Не могли бы вы привести пример строки, которую вы передадите, и выход? На первый взгляд я бы сказал, что это потому, что childNodes возвращает узлы. Вы можете проверить только элементы, используя 'doc [0] .children [0]'. – Kaiido

+0

@Kaiido Ну, вот что я хочу сделать ... Я рекурсивно перехожу во все дочерниеNodes (рекурсивная функция), и когда я добираюсь до моего последнего ребенка, я возвращаюсь обратно рекурсивно через свой родительский указатель (чтобы получить все имена узлов, которые имеет ребенок). С xml он работает правильно, но с html, когда я добираюсь до последнего childNode, он больше не имеет parentNodes, потому что это просто простой элемент. (обновит мой вопрос с помощью рекурсивных функций ...) – ncohen

+0

Да, пожалуйста, обновите, для меня он работает в консоли, вручную добираясь до последнего узла и снова поднимаясь вверх. Но, возможно, вас будет интересовать [TreeWalker] (https://developer.mozilla.org/en/docs/Web/API/TreeWalker) для такого рода задач. – Kaiido

ответ

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>

Смежные вопросы