CODEWITHSUNDEEP
htmlelementchildren
Kevin Behan
Kevin Behan

Reputation: 496

Are there grandchild elements in HTML?

I thought this was an obvious yes, but a tutorial I was going through informed me otherwise:

"Just like a real family, elements have children, grandchildren, great-grandchildren, and so on (though we don't make this distinction with HTML—a child of an element, and all that child's children, are children of the first parent)."

Is this convention or the author's opinion? I've searched W3C pretty extensively, but I can't find any evidence confirming this statement.

Upvotes: 2

Views: 3906

Answers (5)

Daniel Kobe
Daniel Kobe

Reputation: 9825

All he's saying is that you can nest elements indefinitely like so...

<div class="great-grandparent">
    <div class="grandparent">
        <div class="parent">
            <div class="child"></div>
        </div>
    </div>
</div>

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116110

No, not really. It's true that an HTML element or actually a node in the HTML document (DOM = Document Object Model) can have children and can have a parent.

But unlike many living creatures, there isn't sex and a DNA mix-up involved to create a new node. Actually, you don't even require a parent to create a new node. You can just create one out of nothing.

Family tree

So what are these relations for? Well, they are just for placing them in a hierarchy. The HTML document has one root node, which is like the Adam of nodes. Other nodes can have this node as their 'parent', which means they are just one step lower in the hierarchy.

It's not a network of nodes, but a tree, so there is always (at most) one node (which we call the parent), higher in the hierarchy, and zero or more nodes lower. In speech you call those parents and children, because it's an easy to understand analogy with a family tree, but that's also where the comparison ends. There is one 'parent' only, and it is the adoption parent, because it isn't necessarily the one that created the node.

So common speak includes:

  • Parent: The node higher in the hierarchy (closer to the trunk of the tree)
  • Children: The nodes lower in the hierarchy (branches of the current node in the tree). You can find the using the property children or childNodes of a node in the DOM.
  • Siblings: The nodes that share the same parent.
  • Descendants: The nodes that are children, grand children, great grand children of a node.

And that's as far as it goes. Of course you can refer to them as grandparents, old-uncles, nephews and brothers-in-law, but that would make it more confusing, so that's not really useful.

Are grand children also children?

Now this text says that grand children are children too. In a way that is true.

For instance, if you have a CSS selector that looks like this: div img, it selects all img elements that are children, grand children, great grand children, etcetera of any div. jQuery, and the build in functions querySelector and querySelectorAll also rely heavily on this notation.

However if you refer to the children property of an element from JavaScript, you get only the direct children and no grand children. Actually, the CSS selector also makes that distinction. If you select div img you get descendant images, and if you select div > img you only get images that are direct children of a div. (see CSS child and sibling selectors)

So, no, the statement is not true. A node just has children, and those children can have their own children. There are smart selectors in CSS and JavaScript that let you select descendants of any 'depth' in the family tree, but that doesn't make those nodes a direct child of the parent.

Upvotes: 3

Rick Ryker
Rick Ryker

Reputation: 322

The child nodes of the parent node's child nodes are not child nodes of their grandparent node, but they are descendent nodes of their grandparent.

This becomes more important when you use axes in xpath to find nodes.

Not all html is xml compliant. But it is moving that direction.
And you can use xpath in script tags to find html nodes.
So it is important to note the distinction between descendent and child.

Most relationships using xpath use 'descendent' rather than 'child', which is strictly the immediate child nodes of the context node.

Upvotes: 0

Ren&#233; K&#229;bis
Ren&#233; K&#229;bis

Reputation: 892

Doing this from iPhone (sorry for lack of accompanying evidence and/or precisely correct terms), but as web dev for 15+ years I agree that there are only children. The behaviour shows up in both CSS and JavaScript -- when you want something inside an element, you just ask for it as if it’s only a child. It doesn’t matter if it really is a child or three-plus layers further down, the process will walk through the DOM and flag/utilize every instance of that element (that matches the requirements) that exists as a child or further down.

So while I can’t point to formal documentation that confirms this, the behaviour of anything (AFAIR) that manipulates or modifies the DOM conforms to that “child-only” specification.

Upvotes: 2

Coder55
Coder55

Reputation: 559

There are no real grandchildren elements in HTML. But you can encapsulate elements, e.g. 

<div id='a'>
    <div id='b'>
        <div id='c'>
        </div>
    </div>
</div>

As you can see, b is a child element of a and c is a child element of b. Therefore, logically, c is a grandchild element of a altough there are no grandchildren elements in HTML.

Upvotes: 0

Related Questions