2023-06-23 16:30:17 來源 : 博客園
本文介紹了一種新的HTML元素搜索方法，并提供了一個(gè)實(shí)用的工具來幫助開發(fā)者快速找到所需的元素。這對于那些需要處理大量HTML元素的開發(fā)者來說是非常有用的。文章還通過提供一些常見元素的用法示例，幫助開發(fā)者更好地理解和應(yīng)用這些元素。在眾多元素中找到特定的元素。為了解決這個(gè)問題，文章介紹了一種新的HTML元素搜索方法。
下面是正文
一個(gè)新的語義元素已經(jīng)加入了 HTML 標(biāo)準(zhǔn) 。它代表文檔中用于搜索或過濾的部分。它應(yīng)該包含表單控件（如文本輸入、下拉菜單、按鈕等），搜索/過濾的范圍可以是任何內(nèi)容：從同一文檔到整個(gè)互聯(lián)網(wǎng)。
(相關(guān)資料圖)
在 標(biāo)簽中添加 role="search"以指示該表單用于搜索：
有了這個(gè)新添加的功能，我們可以使用
由于 hack，指定它已經(jīng)具有的 ARIA 角色（類似于 所發(fā)生的情況）。這在未來可能會變得多余，但它可能會為我們的代碼做好準(zhǔn)備，以便在瀏覽器支持新標(biāo)簽時(shí)使用。
...
這看起來有些違反直覺：我們正在移除 role="search" ，但我們正在用
溫馨提示：盡管我們在構(gòu)建搜索組件時(shí)并不強(qiáng)制需要
標(biāo)簽，但是使用它卻能帶來額外的好處（甚至是必須的）。這樣，即使在無JavaScript環(huán)境下，搜索功能也能保持正常運(yùn)行，或者說，這是一種實(shí)踐漸進(jìn)式增強(qiáng)策略的方式。
另一個(gè)需要注意的關(guān)鍵點(diǎn)是，搜索區(qū)域不一定是網(wǎng)站或在線平臺上帶有搜索按鈕的文本輸入框。我們可以使用
Filter results
擁有一個(gè)用于識別搜索區(qū)域的元素是很好的。正如Scott O"Hara在這篇文章中指出的那樣，直到現(xiàn)在，這是唯一一個(gè)在HTML中沒有語義等效項(xiàng)的ARIA地標(biāo)角色：
使用
但是，從程序員的角度來看，它感覺不夠完善或沒有為現(xiàn)有的實(shí)現(xiàn)增加太多東西。其他語義元素可以提高可訪問性并簡化我們編寫特定組件的方式。例如，像
這并不會削弱它的重要性。所有的改進(jìn) - 即使是微小的改進(jìn) - 都是受歡迎的。這也適用于
代碼部署后可能存在的BUG沒法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
