判断DOM元素是否为父子关系

代码

/**
 * @param {HTMLElement} node
 * @param {HTMLElement} parent
 * @return {Boolean} found
 */
function hasParent(node, parent) {
  while (node) {
    if (node === parent) {
      return true;
    }
    node = node.parentNode;
  }
  return false;
}

实例

html
<div id="img" style="border: 1px solid red">
      <h3 id="testStr" style="color: #000">sdjfosjdf</h3>
</div>
<div class="node1" style="color: red"><h1>这是另外的标签</h1></div>
js
const node = document.getElementById('img')
function callback(e){
  console.log('hasParent(e.target, node)',hasParent(e.target, node))
}
window.addEventListener('click', callback)

说明:

  • 点击h3标签或者id为img的div返回true. 其余返回false
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,969评论 19 139
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • 你羡慕自由职业吗?我也羡慕也不羡慕。羡慕自由职业不用坐班,不用依附于组织,不用开无聊的会议,不用对有的无的办公室政...
    孟顺顺阅读 167评论 1 2