Saturday, January 6, 2018

[jQuery語法] 找出 DOM 裡的 leaf node

用 JQuery 找出 Dom 裡頭的所有 leaf node ,是做前端時有可能遇到的有趣問題。
整理一下暴力但是好用的解法:

找出所有在 body 裡的 leaf node
$('body *:not(:has(*))')

找出所有本身是 div 的 leaf node
$('div:not(:has(*))')

找出所有最內層的 li 。注意:li 總是存在於 ul 和 ol 裡頭。
$('li:not(:has(ul, ol))')
============================================
Extract value from XML format

仔細想想的話,上述的問題可以歸類於「從 xml 提取值」。
解法大概可以分成兩種:

1. 命令式編程的解法:對 xml 做樹的走訪 (tree walk),邊走邊取值。
    這種設計如果來源資料的 xml 有局部變化,通常就會朝 polymorphism 的方向演化。每一種局部變化會對應獨立的模組 (module)。

2. 宣告式編程的解法:找一個支援 XPath 的 xml parsing library 。用 XPath 做查詢 (query) 取值。
    這種設計如果來源資料的 xml 有局部變化,每一種局部的變化會對應不同的 XPath 設定檔 (config)。