獲取document物件除了getElement方法，居然還可以使用css選擇器方法！！！
阿新 • • 發佈：2018-12-26
例子：
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>example</title>
<style type="text/css">
pre{
border: thin solid black;
}
</style>
</head>
<body>
<pre id="results"></pre>
<img id="caomei"src="img/4d0df8064383e78d74e07014e7ccd0ee.jpg" name="image" alt="caomei">
<p id="tblock">
There are lots of different kinds of fruit.There are over 500 varieties of <span id="banana">banana</span> alone.By the time we add the countless types of apples,oranges,and other well-known fruit,we are faced with thousands of choices.
</p>
<img id="apple" src="img/63fddd61e1afe42e38c6ce76910be815.jpg" name="image" alt="apple">
<p>
One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.
</p>
<img id="san" src="img/161026fa577b8f3aa88187bd67b546fd.jpg" alt="san" />
<script>
var resultsElement=document.getElementById("results");
var elems=document.getElementById("tblock").getElementsByTagName("span");
resultsElement.innerHTML+="there are "+elems.length+" span elements(getelement方法)\n";
var elems2=document.getElementById("tblock").querySelectorAll("span");
resultsElement.innerHTML+="there are "+elems2.length+" span elements(getelement+css方法)\n";
var elems3=document.querySelectorAll("#tblock>span");
resultsElement.innerHTML+="there are "+elems3.length+" span elements(css選擇器方法)\n";
</script>
</body>
結果：
there are 1 span elements(getelement方法)
there are 1 span elements(getelement+css方法)
there are 1 span elements(css選擇器方法)