更新：
非同期でHTML要素を取得する「async-query」
Web開発をしていると、動的に変化する属性を元にDOM要素を取得したい場面にしばしば出くわします。
そんなときに使えるライブラリーが見当たらなかったので、「async-query」というnpmライブラリを作りました。この記事では、その概要から特徴、使い方などを詳しく解説します。
(window.powerTag.Init = window.powerTag.Init || []).push(function () {
window.powerAPITag.display("pw_41759");
}); async-queryとは
「async-query」は、querySelector() と querySelectorAll() の非同期版を提供するnpmライブラリです。動的に変更される属性を基に要素を取得したい場合、とくにブラウザー拡張機能を作成する際などに役立ちます。
実際に、私が開発している
Shadowban Scanner
という拡張機能の内部で使われています。
作った理由
Web開発において、DOM要素の属性が動的に変更されるというケースは珍しくありません。しかしながら、そのタイミングを完全にコントロールするのは難しい場合があります。とくに、ブラウザー拡張機能を開発する際には、属性の変更タイミングなどはサイト側に依存するため、コントロールできません。
こうした場合、querySelector() や querySelectorAll() などの同期的なDOM要素取得関数を使うと、取得したい要素が取得できないという問題が発生します。
代わりに、setTimeout() などを使って一定時間待機するという方法がありますが、PCのスペックによっては待機時間が足りない場合もあります。また、高性能なPCでは必要以上に待ち時間が発生してしまうという問題もあります。
こうした課題を解決するために生まれたのが「async-query」です。
async-queryの特徴
「async-query」の大きな特徴は、非同期処理を用いてDOM要素を取得できる点にあります。これにより、ページのロード状況や動的なDOMの変更にも柔軟に対応できます。
基本的な使い方
まずは、基本的な使い方から紹介します。まずは、ライブラリーをプロジェクトにインストールします
try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,`
`);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}
async-queryは次のようなコードで利用できます。
import { asyncQuerySelector, asyncQuerySelectorAll } from "async-query";
const element = await asyncQuerySelector("#my-element");
const elements = await asyncQuerySelectorAll(".my-elements");
これで、IDがmy-elementの要素や、クラスがmy-elementsの要素を非同期処理で取得できます。
(window.powerTag.Init = window.powerTag.Init || []).push(function () {
window.powerAPITag.display("pw_41759");
}); 応用的な使い方
さらに応用的な使い方として、asyncQuerySelector()とasyncQuerySelectorAll()関数は次のシグネチャーを持ちます。
asyncQuerySelector(selectors: string, parentElement: Element | Document, timeoutMs: number): Promise<Element | null>
asyncQuerySelectorAll(selectors: string, parentElement: Element | Document, timeoutMs: number): Promise<NodeListOf<Element>>
セレクター、親要素、タイムアウト（ミリ秒）を指定することで、さらに精密な要素取得が可能です。
また、TypeScriptに対応しており、次のようにすることで戻り値の型を指定できます。
const element = await asyncQuerySelector<HTMLDivElement>("#my-element");
さらに、HTMLタグのみを指定した場合は、戻り値の型が自動的に絞り込まれます。
const element = await asyncQuerySelector("div");
その他
このライブラリーに関するバグの報告や機能の要望があれば、
GitHub
のissueやPull Requestへお願いします。
(window.powerTag.Init = window.powerTag.Init || []).push(function () {
window.powerAPITag.display("pw_41759");
}); まとめ
この記事では、非同期でHTML要素を取得する「async-query」について解説しました。このライブラリーを使うことで、動的に変化する属性を元にDOM要素を取得できます。ぜひ、開発に役立ててみてください。
おすすめアイテム
※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。
-1.png&w=256&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。
