Search code examples
htmlelementchildren

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.

Solution

  • 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.