首页 > 其他分享> > html 两个元素的最近的公共父元素

html 两个元素的最近的公共父元素

2021-08-12 18:00:06 作者：互联网

根据id查找，两个元素的最近的公共父元素

<!DOCTYPEhtml>
  <htmllang="en">

    <head>
      <metacharset="UTF-8">
        <metahttp-equiv="X-UA-Compatible"content="IE=edge">
          <metaname="viewport"content="width=device-width, initial-scale=1.0">
            <title>Document</title>
    </head>

    <body>
      <div>
        <div></div>
        <div>
          <div></div>
          <div>
            <div id="a">
          </div>
          <div></div>
        </div>
        <div id="b">
      </div>
      </div>
      </div>
      <div></div>
    </body>
    <script>
      // function findNearestCommonParentNode(elementNode1, elementNode2){
      //   // code
      //   let id1 = elementNode1.id
      //   let id2 = elementNode2.id
      //   let find1 = elementNode1.querySelector('#'+id2)
      //   let find2 = elementNode2.querySelector('#'+id1)
      //   if(find1){
      //     return elementNode1
      //   }else if(find2){
      //     return elementNode2
      //   }
      //   let parent = elementNode1.parentElement
      //   while(!parent.querySelector('#'+id2)){
      //     parent = parent.parentElement
      //   }
      //   return parent
      // }
      function findNearestCommonParentNode(elementNode1, elementNode2){
        let node1 = elementNode1
        let node2 = elementNode2
        
        while(node1 != node2){
          node1 = (node1.parentElement.tagName.toLowerCase() === 'body') ? elementNode2 : node1.parentElement
          node2 = (node2.parentElement.tagName.toLowerCase() === 'body') ? elementNode1 : node2.parentElement
        }
        return node1
      }
      console.log(findNearestCommonParentNode(document.querySelector('#a'), document.querySelector('#b')));
    </script>

    </html>

标签：parentElement,parent,元素,html,let,公共,node1,elementNode1,elementNode2
来源： https://www.cnblogs.com/yanjianjiang/p/15134002.html