Why does breaks out of the DOM chain?

Question

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <script type="text/javascript">
        function fire() {
            console.log(document.body.children.length);
            console.log(document.body.children[0].children.length);
        }
    </script>
    <body onload="fire()">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra ipsum erat. Aenean convallis laoreet massa, et gravida purus faucibus ac. <a id="test"/>Vestibulum libero justo.</p>
        </div>
    </body>
</html>

When you open the console, you'll see that the <a> is a children of <body>, <div> and <p>. WTF??

If <a> is closed with a "proper" closing tag the issue disappears and its only child of <p>.

Can someone explain this to me?

PS: Tested on Chrome stable.

It's because you can't self-close the `` tag. The HTML is invalid and can act unpredictably. — JJJ, Mar 12 '12 at 15:40
Explained here: http://stackoverflow.com/questions/97522/what-are-all-the-valid-self-closing-tags-in-xhtml-as-implemented-by-the-major-b — Diodeus - James MacFarlane, Mar 12 '12 at 15:43
Would it work when served with Content-Type "application/xhtml+xml"? — Aron Woost, Mar 12 '12 at 15:50
If you mean, would it self-close, and you'd not get the extra `a` elements when served with Content-Type `application/xhtml+xml`, then the answer is yes it would. And in spite of what Matthew says, it would indeed be valid XHTML5 (more formally, HTML5 in the XML serialization). You'd need to add the correct namespacing attribute to the html element though. — Alohci, Mar 12 '12 at 17:14
As a demonstration, here is your test case served as application/xhtml+xml: http://www.alohci.net/application/xhtml+xml/aron.htm.ashx . Notice in a Dom inspector that the `a` element does not "break out". — Alohci, Mar 12 '12 at 21:07

score 8 · Accepted Answer · answered Mar 12 '12 at 15:40

8

I imagine it's because a is not a valid short tag.

answered Mar 12 '12 at 15:40

Matthew

24,703
9
76
110

1

Specifically, `` is not defined as `EMPTY` and therefore must have content – Gareth Mar 12 '12 at 15:42
Would it work when served with Content-Type "application/xhtml+xml"? – Aron Woost Mar 12 '12 at 15:48
Doubt it, it would still not be valid XHTML/HTML5, which the browser would be using. You *could* parse it as XML, but the browser doesn't do this. – Matthew Mar 12 '12 at 15:50

score 3 · Answer 2 · answered Mar 12 '12 at 15:42

3

As per the W3C recommdentations:

12.2 The A element [...] Start tag: required, End tag: required

It is invalid HTML. You need to at least close the tag directly after such as <a id="test"></a>.

Source: http://www.w3.org/TR/html401/struct/links.html

answered Mar 12 '12 at 15:42

Rémi Breton

4,209
2
22
34

score 1 · Answer 3 · answered Mar 12 '12 at 15:44

1

<a> tags require an end tag (</a>).

<a /> is invalid, and browsers will try to figure out what you mean, but don't expect consistent behavior.

answered Mar 12 '12 at 15:44

gen_Eric

223,194
41
299
337

score 1 · Answer 4 · answered Mar 12 '12 at 15:44

1

From w3schools.com/tags/default.asp you can see self ending tags:

"area", "base", "basefont", "br", "col", "frame", "hr", "img", "input", "link", "meta", "param"

The A tag should not be self closed.

answered Mar 12 '12 at 15:44

Michael Laffargue

10,116
6
42
76

Didn't know it was the evil, but for such simple thing as tag ending, they should be quite correct no ? – Michael Laffargue Mar 12 '12 at 15:50

score 1 · Answer 5 · answered Mar 12 '12 at 15:45

1

This is html5, not xml. Only void elements are allowed to have such representation. Also see 8.1.2.1 part 6

answered Mar 12 '12 at 15:45

kirilloid

14,011
6
38
52

Why does breaks out of the DOM chain?

5 Answers5