CSS Selector
注意querySelector系列的參數是使用CSS selector規則，但getElementsXXX系列的不是
querySelector系列不接受數字開頭的id、class命名，但getElementsXXX系列接受
程式碼放在最後面，Okay，Let's start!
點號
A.B，如div.class、.class.class等，select同時符合的所有node
空格
A B，select有B且其為A的子(子)層
逗號
A, B，select有A或者B的
大於符號
A > B，select A的直接子層(不含子子層)中所有有B的
加號
A + B，select A的直接子層(不含子子層)中第一個有B的
波浪符號
A ~ B，select所有同階層前方為A的B
中括號內放屬性
[attribute]，屬性選擇符基本款
以OO開頭的屬性值
[attribute^='OO']
以OO結尾的屬性值
[attribute$='OO']
包含OO在內的屬性值
[attribute*='OO']
更多的select方法，如冒號類的，請看W3C
<!DOCTYPE html>
<html>
<body>
<div id="container" class="the-container">
<div id="1st-wrapper" class="the-1st-wrapper" title="first wrapper">
<div class="2nd-wrapper">
<ul class="inner-2nd-wrapper">
<li id="1st-li" class="good inner-2nd-wrapper" title="first inner li">1st li</li>
<li id="2nd-li" class="good inner-2nd-wrapper" title="second inner li">2nd li</li>
<li id="3rd-li" class="bad inner-2nd-wrapper">3rd li</li>
</ul>
</div>
<ul>
<li class="good outer-2nd-wrapper">1st li(outer)</li>
<li class="good outer-2nd-wrapper">2nd li(outer)</li>
<li class="good outer-2nd-wrapper">3rd li(outer)</li>
</ul>
<ul></ul>
</div>
</div>
<script type="text/javascript">
var obj = document.querySelectorAll("li");
//所有<li>，[6]
console.log(obj);
var obj = document.querySelectorAll(".good.inner-2nd-wrapper");
//同時有.good且.inner-2nd-wrapper，[2]
console.log(obj);
var obj = document.querySelectorAll(".inner-2nd-wrapper.good");
//同時有.inner-2nd-wrapper且.good，[2]，[2]
console.log(obj);
var obj = document.querySelectorAll(".good .inner-2nd-wrapper");
//有.inner-2nd-wrapper且其為.good的子(子)層，所以為空[]
console.log(obj);
// var obj = document.querySelectorAll(".2nd-wrapper");
//會報錯，因為querySelector系列不能搜尋以digit開頭命名
// console.log(obj);
var obj = document.getElementsByClassName("2nd-wrapper inner-2nd-wrapper");
//.2nd-wrapper且.inner-2nd-wrapper，所以為空[]
console.log(obj);
var obj = document.querySelectorAll(".the-container .inner-2nd-wrapper");
//有.inner-2nd-wrapper且其為.the-container的子(子)層，[4]
console.log(obj);
//注意getElementsByClassName和querySelectorAll同樣是class空格class，但選擇規則不同！
var obj = document.getElementsByClassName("good inner-2nd-wrapper");
//good且inner-2nd-wrapper，所以為空[]
console.log(obj);
var obj = document.querySelectorAll(".good, .inner-2nd-wrapper");
//所有good或inner-2nd-wrapper，[7]
console.log(obj);
var obj = document.querySelectorAll(".the-container > .good");
//.the-container下直接子層(不含子子層)有.good的，所以為空[]
console.log(obj);
var obj = document.querySelectorAll(".inner-2nd-wrapper > .good");
//.inner-2nd-wrapper下直接子層(不含子子層)有.good的，[2]
console.log(obj);
var obj = document.querySelectorAll(".inner-2nd-wrapper + .good");
//.inner-2nd-wrapper下直接子層(不含子子層)有.good的第一個，[1]
console.log(obj);
var obj = document.querySelectorAll(".the-container + .good");
//.the-container下直接子層(不含子子層)有.good的第一個，所以為空[]
console.log(obj);
var obj = document.querySelectorAll(".the-1st-wrapper ~ ul");
//所有同階層前方為.the-1st-wrapper的<ul>，所以為空[]
console.log(obj);
var obj = document.querySelectorAll("div ~ ul");
//所有同階層前方為<div>的<ul>，[2]
console.log(obj);
var obj = document.querySelectorAll(".good ~ .inner-2nd-wrapper");
//所有同階層前方為.good的.inner-2nd-wrapper，[2]
console.log(obj);
var obj = document.querySelectorAll("[title]");
//所有有title這個attribute的node，[3]
console.log(obj);
var obj = document.querySelectorAll("li[title]");
//所有li有title這個attribute的node，[2]
console.log(obj);
var obj = document.querySelectorAll("[title='first wrapper']");
//所有有title這個attribute的node，[1]
console.log(obj);
var obj = document.querySelectorAll("[title^='first']");
//所有有以'first'開頭的title attribute的，[2]
console.log(obj);
var obj = document.querySelectorAll("[title$='li']");
//所有有以'li'結尾的title attribute的，[2]
console.log(obj);
var obj = document.querySelectorAll("[title*='st']");
//所有有包含字串'st'的title attribute的，[2]
console.log(obj);
</script>
</body>
</html>