Сценарий возвращает элемент, который не существует на странице

Question

У меня есть эта функция, которая возвращает мне путь к el. Однако иногда эта функция добавляет элемент, который не существует на странице. В этом случае:

<table> 
<tr><td></td><tr> 
</table> 

путь к тд будет выглядеть table > tbody > tr > td. В чем проблема с этой функцией?

function getDomPath(el) { 
     element = el; 
     if (!(el instanceof Element)) return; 
     var path = []; 
     while (el.nodeType === Node.ELEMENT_NODE && el.id != "jobs") { 
      var selector = el.nodeName.toLowerCase(); 
      if (el.id) { 
       selector += '#' + el.id; 
      } 
      else if(el.className){ 
       console.log(el.className); 
       selector += '.' + el.className; 
      } 
      else { 
       var sib = el, nth = 1, count = 1; 
       while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling) && nth++){ 
        console.log(Node.ELEMENT_NODE) 
        console.log(el.previousSibling); 
        console.log(el); 
        count += $(el).prevAll().size(); 
       }; 
       selector += ":nth-child("+count+")"; 
      } 
      path.unshift(selector); 
      el = el.parentNode; 
     } 
     return path.join(" > "); 
    }; 

Answer 1

Если проблема является tbody элемент, вы должны знать, что это не ваша функция, которая добавляет его, но сам браузер. Посмотрите на свою страницу с помощью Firebug или инструментов веб-разработчика в хром.

Посмотрите на this SO answer.

Answer 2

Нет проблем с функцией, она правильно использует все элементы, которые существуют.

Элемент table всегда имеет элемент tbody, если для него имеются строки. Браузер добавляет элемент tbody, даже если у вас нет метки для разметки.

Браузер будет создавать полные элементы, даже если ваша разметка неполна или если она не содержит дополнительных тегов. Например, браузер создаст две строки в вашей таблице, потому что вы использовали <td> вместо </td>, когда вы пытались закончить первую строку. Он неявно заканчивает первую строку, запускает новую строку и неявно заканчивает это тоже. Элементы в таблице будут выглядеть так, как если бы вы написали свою разметку как:

<table> 
    <tbody> 
    <tr> 
     <td></td> 
    </tr> 
    <tr> 
    </tr> 
    </tbody> 
</table>