脚本返回页面上不存在的元素

Question

I have this function, that returns me path to el . However sometimes this function adds element that not exists on page. In this case:

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

path to td will look like table > tbody > tr > td . Whats the problem with this function?

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

If the problem is the tbody element, you need to know that it's not your function that adds it but the browser itself. Look at your page using Firebug or the Web Developer tools in chrome.

Take a look at this SO answer .

Answer 2

There is no problem with the function, it correctly uses all the elements that does exist.

A table element always has a tbody element if there are any rows for it. The browser adds the tbody element even if you don't have any tag for it in the markup.

The browser will create complete elements, even if your markup is incomplete or if it has left out optional tags. For example, the browser will create two rows in your table, because you used <td> instead of </td> when you tried to end the first row. It will implicitly end the first row, start a new row, and implicitly end that too. The elements in your table will end up just as if you wrote your markup as:

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