鍍金池/ 問答/人工智能  HTML/ 父節(jié)點(diǎn)跟父元素節(jié)點(diǎn)的區(qū)別

父節(jié)點(diǎn)跟父元素節(jié)點(diǎn)的區(qū)別

通過這段代碼 能講解下 父節(jié)點(diǎn)跟父元素節(jié)點(diǎn)的區(qū)別嗎？

<body>
<ul id="parent">
    <li>蘋果</li>
    <li id="mi">小米</li>
    <li>錘子</li>
</ul>
<script>
    //子節(jié)點(diǎn)
    var mi = document.getElementById('mi');
    //通過子節(jié)點(diǎn)獲取父節(jié)點(diǎn)
    var parent1 = mi.parentNode;
    console.log(parent1);

    //通過子節(jié)點(diǎn)獲取父元素節(jié)點(diǎn)
    var parent2 = mi.parentElement;
    console.log(parent2);
    
    var html = document.documentElement;
    console.log(html.parentNode);//文檔節(jié)點(diǎn)
    console.log(html.parentElement);//null
</script>
</body>
回答
編輯回答
嫑吢丕

parentNode屬性返回當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn);

parentElement屬性返回當(dāng)前節(jié)點(diǎn)的父元素節(jié)點(diǎn)。
如果當(dāng)前節(jié)點(diǎn)沒有父節(jié)點(diǎn)，或者父節(jié)點(diǎn)類型不是元素節(jié)點(diǎn)，則返回null
由于父節(jié)點(diǎn)只可能是三種類型：元素節(jié)點(diǎn)、文檔節(jié)點(diǎn)（document）和文檔片段節(jié)點(diǎn)（documentfragment）。parentElement屬性相當(dāng)于把后兩種父節(jié)點(diǎn)都排除了。

2018年4月3日 20:19