Script returns element that not exists on page

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(" > ");
    };

I think you should read about optional HTML tags and how forgiving parsers add those to the DOM. — Sirko, Oct 28 '13 at 09:41
See http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.1 -- the syntax `(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)` means that the only valid children of a `TABLE` element are `CAPTION`, `COL`, `COLGROUP`, `THEAD`, `TFOOT` and `TBODY`. Also, the '+' after `TBODY` means that this element is **required**. If you put `TR` elements directly inside a `TABLE`, then your markup is invalid. — r3mainer, Oct 28 '13 at 09:46

score 3 · Accepted Answer · edited May 23 '17 at 12:10

3

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.

edited May 23 '17 at 12:10

Community

1
1

answered Oct 28 '13 at 09:42

Paolo Casciello

7,982
1
43
42

score 1 · Answer 2 · answered Oct 28 '13 at 09:49

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>

Script returns element that not exists on page

2 Answers2