JavaScript 中 DOM parentNode 和 parentElement 的区别

• 父节点：
  父节点属性是只读属性，它将所选节点的父节点的名称作为节点对象返回给我们。 Node 对象表示文档树中的单个节点，节点可以是元素节点、文本节点或更多。

  句法：

  node.parentNode

  返回值：父节点属性返回父节点对象（如果存在），否则返回“null” 。

  例子：

    
  
      
      
          p {
              color: green;
          }
      
    
      GeeksForGeeks
    
      
    
          Click the button to get the
            node name of the parent node.
          
    
      
    
      Try it
    
      
    
      
          function myParentNode() {
              var geek = document.getElementById("gfg").parentNode.nodeName;
              
              /*appending parent node to the 'p' element with id named text*/
              document.getElementById("text").innerHTML = geek; 
          }
      
    
  
    

  输出：
  

• 父元素：
  父元素是只读属性，返回被选元素的父元素。元素对象代表一个HTML元素，如P、DIV等。

  句法：

  node.parentElement

  返回值： parentElement 属性返回一个表示父元素的元素对象（如果存在），否则返回 null。

  例子：

    
  
      
    
      
          p,
          ol {
              color: green;
          }
      
    
      GeeksForGeeks Courses
    
      
          DSA
          Interview Preparation
          Geeks Classes
      
    
      Click the button to get the node 
        name of the parent element
    
      
        Click to know the parent element
    
      
      
    
      
          function myParentElement() {
              var text = document.getElementById(
                "geek").parentElement.nodeName;
              document.getElementById("gfg").innerHTML = text;
          }
      
    
  
    

  输出：
  

  不同之处：
  如果父元素不是元素节点，则父元素返回 null，这是 parentElement 和 parentNode 之间的主要区别。在许多情况下，可以使用其中的任何一个，在大多数情况下，它们是相同的。例如：

  // returns the document node
  document.documentElement.parentNode; 
  
  // returns null
  document.documentElement.parentElement; 
  

  HTML 元素 (document.documentElement) 没有作为元素的父元素，它是一个节点，因此，父元素为空。

  支持的浏览器： parentNode和DOM parentElement 属性支持的浏览器如下：

  • 谷歌浏览器
  • IE浏览器
  • 火狐
  • 苹果浏览器
  • 歌剧