The difference between the parent node and the parent element node

can you explain the difference between a parent node and a parent element node through this code?

<body>
<ul id="parent">
    <li></li>
    <li id="mi"></li>
    <li></li>
</ul>
<script>
    //
    var mi = document.getElementById("mi");
    //
    var parent1 = mi.parentNode;
    console.log(parent1);

    //
    var parent2 = mi.parentElement;
    console.log(parent2);
    
    var html = document.documentElement;
    console.log(html.parentNode);//
    console.log(html.parentElement);//null
</script>
</body>
Jun.10,2021

The

parentNode attribute returns the parent ;

of the current node. The

parentElement attribute returns the parent element node of the current node.
if the current node does not have a parent node, or if the parent node type is not an element node, then return null
because the parent node can only be three types: element node, document node (document), and document fragment node (documentfragment). The parentElement attribute is equivalent to excluding the latter two parent nodes.

Menu