一个不常用的DOM原生API，closest

1.closest

1.1 功能详解

功能：返回当前节点最近的匹配选择符的祖先元素

var el = document.querySelector(childSelector).closest(parentSelector);

如下网页结构：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>closest</title></head><body><div class="con"><span class="list"></span></div></body>
</html>

1.1.1 比如想要通过`.list`来选取`.con`

document.querySelector('.list').closest('.con');

结果：会返回.con元素

1.1.2 如果`childSelector`参数和`parentSelector`参数相同

document.querySelector('.list').closest('.list');

结果：会返回.list元素

1.1.3 如果`parentSelector`没找到

document.querySelector('.list').closest('.tip');

结果：会返回null

1.2 应用案例

需求说明：用事件委托来获取当前点击区块的data-option值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div class="con"><div class="con-list" data-option="1"><span class="con-list-name">小明</span><span class="con-list-gender">男</span></div><div class="con-list" data-option="2"><span class="con-list-name">小华</span><span class="con-list-gender">男</span></div><div class="con-list" data-option="3"><span class="con-list-name">小美</span><span class="con-list-gender">女</span></div></div><script>document.querySelector('.con').addEventListener('click', function(e) {console.log(e.target.closest('.con-list').dataset.option);})</script>
</body>
</html>

转载于:https://www.cnblogs.com/cococe/p/9719652.html

一个不常用的DOM原生API，closest相关推荐

Zookeeper_原生API操作（一）
讲了zookeeper的简单的介绍,以及环境搭建,还有zkClient的使用,基本上很简单,作为HelloWorld,今天继续往下走,既然已经把简介和环境搭建完了,然后一会来说说配置,配置也没有什么说 ...
JavaScript调用原生API获取手机型号
跨平台技术简介针对原生开发面临问题,人们一直都在努力寻找好的解决方案,而时至今日,已经有很多跨平台框架,根据其原理,主要分为三类: H5+原生(Cordova.Ionic.微信小程序) JavaSc ...
api怎么写_使用Node.js原生API写一个web服务器
Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...
dom html api,JavaScript常用DOM的API
在介绍DOM的API之前,先介绍下一些DOM基本概念. DOM,文档对象模型,把文档树当成对象来看的模型. DOM 是 JavaScript 操作网页的接口,全称为"文档对象模型" ...
原生API编写简单富文本编辑器001
原生API编写简单富文本编辑器001 系列文章快速阅读: 富文本编辑器开发系列-1-基础概念富文本编辑器开发系列2-document.execCommand 的API 富文本编辑器开发系列3-sel ...
IOS7使用原生API进行二维码和条形码的扫描
使用IOS7原生API进行二维码条形码的扫描 IOS7之前,开发者进行扫码编程时,一般会借助第三方库.常用的是ZBarSDK,IOS7之后,系统的AVMetadataObject类中,为我们提供了解析 ...
Jquery第二篇【选择器、DOM相关API、事件API】
tags: Jquery 前言前面已经介绍过了Jquery这门语言,其实就是一个javaScript的库...能够简化我们书写的代码....本博文主要讲解使用Jquery定位HTML控件[定位控件就 ...
Elastic search入门到集群实战操作详解(原生API操作、springboot整合操作)-step1
Elastic search入门到集群实战操作详解(原生API操作.springboot整合操作)-step2 https://blog.csdn.net/qq_45441466/article/de ...
Js - Dom原生对象和jQuery对象的联系、区别、相互转换
Dom原生对象和jQuery对象的联系.区别.相互转换: 联系: 1.jQuery对象:通过jQuery包装DOM对象后产生的对象: 2.两者之间可以相互转换: 区别: 1.jquery选择器得到的j ...
【Android 内存优化】Android 原生 API 图片压缩原理 ( 图片质量压缩方法 | 查找 Java 源码中的 native 方法对应的 C++ 源码 )
文章目录一. 图片质量压缩方法二. 查找对应的 Native 方法源码三. 分析 Bitmap.cpp 中动态注册 Native 方法在博客 [Android 内存优化]图片文件压缩 ( An ...

一个不常用的DOM原生API，closest

1.closest

1.1 功能详解

1.1.1 比如想要通过`.list`来选取`.con`

1.1.2 如果`childSelector`参数和`parentSelector`参数相同

1.1.3 如果`parentSelector`没找到

1.2 应用案例

一个不常用的DOM原生API，closest相关推荐

最新文章

热门文章

一个不常用的DOM原生API，closest

1.closest

1.1 功能详解

1.1.1 比如想要通过.list来选取.con

1.1.2 如果childSelector参数和parentSelector参数相同

1.1.3 如果parentSelector没找到

1.2 应用案例

一个不常用的DOM原生API，closest相关推荐

最新文章

热门文章

1.1.1 比如想要通过`.list`来选取`.con`

1.1.2 如果`childSelector`参数和`parentSelector`参数相同

1.1.3 如果`parentSelector`没找到