一個不常用的DOM原生API，closest
阿新 • • 發佈：2018-09-28
lis get tor ase html target oct ont utf 1.1.1 比如想要通過
1.1.2 如果
1.1.3 如果
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>
一個不常用的DOM原生API，closest