Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

从子元素中搜索

  以前用 jQuery 的时候我们可以在 find 方法的选择器中使用第一个字符为「>」的选择器来表示从当前元素开始搜索子元素而不是全部后代元素后代元素。如果是浏览器原生的 querySelectorAll 就不好用了,虽然规范里也有 :scope 可以满足这个需求,但目前仍然有很多环境不支持。
  现在有一个 UL/LI 的结构,LI 中有一个 class="active" 的元素,但是 LI 里面可能还嵌套了别的 UL,这时候我们就得搜索当前 UL 元素的所有子元素中包含 class="active" 的元素。那么,怎么样才能在子元素中搜索东西呢?最古老的办法就是遍历嘛,比如 <ul id="ul"> <li>此处省略 18 层 UL 嵌套</li> <li class="active">此处省略 18 层 UL 嵌套</li> <li>此处省略 18 层 UL 嵌套</li> </ul> <script> for (let i = ul.firstElementChild; i; i = i.nextElementSibling) { if (i.className === 'active') { i.innerHTML = '&#x1F631;'; break; } } </script>   如果 :scope 可以用就简单了 <ul id="ul"> <li>此处省略 18 层 UL 嵌套</li> <li class="active">此处省略 18 层 UL 嵌套</li> <li>此处省略 18 层 UL 嵌套</li> </ul> <script> let active = ul.querySelector(':scope > .active'); if (active) active.innerHTML = '&#x1F631;'; </script>   如果使用 XPath 去查文档的也可以很简单 <ul id="ul"> <li>此处省略 18 层 UL 嵌套</li> <li class="active">此处省略 18 层 UL 嵌套</li> <li>此处省略 18 层 UL 嵌套</li> </ul> <script> let active = document.evaluate('*[@class=active]', ul).iterateNext(); if (active) i.innerHTML = '&#x1F631;'; </script>   但是 XPath 这个逼装得我只能给 8 分(如果满分是 100 分的话),因为浏览器对这些冷门 API 并没做什么优化,以至于他的性能渣到爆。比如下面这个性能测试:
<script src="https://share.web-tinker.com/performance.js"></script> <ul id="ul" style="display:none;"></ul> <script> let str = '<li></li>'; for (let i = 0; i < 16; i++) str = str + str; let ul = document.getElementById('ul'); ul.innerHTML = str; ul.lastElementChild.className = 'active'; </script> <button> for (let i = ul.firstElementChild; i; i = i.nextElementSibling) { if (i.className === 'active') { i.innerHTML = '&#x1F631;'; break; } } </button> <button> let active = ul.querySelector(':scope > .active'); if (active) active.innerHTML = '&#x1F631;'; </button> <button> let active = document.evaluate('*[@class="active"]', ul, null, null, null).iterateNext(); if (active) active.innerHTML = '&#x1F631;'; </button>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^