20141207 querySelector

先來測試在CodePen上用MathJax，參自20141105 MathJax，使用Math Jax test | CodePen來測試，已成功，接著要嘗試像mike-map那樣收放式的對話窗，已成功在對話窗裡顯示方程式，實作於Retractable Dialog with MathJax | CodePen。

querySelector
我們來看Retractable Dialog with MathJax | CodePen的code，裡面的querySelector是以前我沒看過的，不免俗先搜尋一下資料

• Finding Elements In The DOM Using querySelector | kirupa.com
• 比 jQuery 更高效的原生 DOM 選擇器 - querySelector and querySelectorAll | InspireGate 
• document.querySelector() - Web API Interfaces | MDN
• W3C CSS Selectors API- The querySelector() and querySelectorAll() methods
• HTML DOM querySelector() Method | W3School

手邊有點資料後，以querySelector practice | CodePen實作之。先閱讀Finding Elements In The DOM Using querySelector | kirupa.com與querySelector() | W3School的paradigm這兩篇，並比較Retractable Dialog with MathJax | CodePen裡的querySelector的寫法。
querySelector是用來快速搜尋你的DOM裡有哪些elements，並且讓我們對原本的element進行修改，使它產生新的效果。其syntax如下，document.querySelector("CSS Selector")。如果你想要選取DOM裡面的id，則要寫document.querySelector("#someId")。若你要選取DOM裡的class，則要寫document.querySelector(".someClass")。若是出現相同的id或class，則querySelector會選取第一個找到的(頁面最上面的)element。另外值得我們回憶，在CSS裡，id是用"#idName"，class是用".className"，若是在CSS裡寫b.special{...}，則代表<b class="special"></b>。

解讀Code時又遇到，忘記if的簡寫如何寫，於是辜狗讀關於 if @ 韌體開發筆記 :: 痞客邦 這篇。在coding時遇到一個有趣的寫法，

element.style.display = element.style.display === "none" ? "block" : "none"

如上面所見，可以看到element.style.display被重複寫了兩次。先說一下後面的那段code是幹麻的， "none" ? "block" : "none"這段是讓我們的<div id=infoPopup>可以縮放，已測試過只寫 element.style.display = "none" ? "block" : "none"，出來的結果只能打開無法收納。



現在要讓雙血條至於網頁畫面的左上角。  (尚未寫完，已知如何寫，在style加入right: 10px，請見querySelector practice | CodePen)，現在已經玩過可以在<div id=infoPopup>裡放雙血條，明天早上測試操控它。

(以下2014/12/08新增)

設定按鈕位置時，遇到position的問題，參考資料：CSS Position 位置與position | CSS-Tricks。蹲馬桶時想到，可以設個div，把buttons放在div裡，這樣把整個div移下去，就不會影響到，已在querySelector practice | CodePen測試成功。

到這一步，已經成功弄好基本的血條介面querySelector practice，以及題目問答視窗Retractable Dialog with MathJax。

(以上2014/12/08新增)
思考：
另外如果要產生互動式的學習體驗，可以善用:hover以及querySelector來讓element產生不同效果。