HTML5 JS API 新的選擇器

新的選擇器

document.queryselector("selector");

selector:根據css選擇器返回第乙個匹配到的元素，如果沒有匹配到，則返回null;

支援： chrome 4.0+, firefox 3.5+, safari 3.2+, opera 10.1+, ie 8+

document.queryselectorall("selector");

selector:根據css選擇器返回所有匹配到的元素陣列，如果沒有匹配到，則返回空陣列;

支援： chrome 4.0+, firefox 3.5+, safari 3.2+, opera 10.1+, ie 8+

document.getelementsbyclassname("selector");

selector:根據類選擇器返回所有匹配到的元素陣列，如果沒有匹配到，則返回空陣列;

支援： chrome 4.0+, firefox 3.0+, safari 3.2+, opera 10.1+, ie 8+

案例如下：

html結構如下:

1

<
div 
class
="content"
>
2<
ul>
3<
li>例項
li>45
<
li class
="exp"
>例項
li>67
<
li class
="exp"
>例項
li>89
<
li class
="exp"
>例項
li>
1011
<
li>例項
li>
1213
ul>
1415
div>

document.queryselector(".content ul li");

2、如果想要獲得所有li元素，我們只需要:

document.queryselectorall(".content ul li");

3、如果想要獲得所有class為w3c的li元素，我們只需要:

document.getelementsbyclassname("w3c");

html5 新的選擇器

1 queryselector 類似於jq裡的 方法，但是只能取到第乙個元素 只能取到乙個集合，即使只有乙個元素 class li2 li class li2 li ul var oli document.queryselectorall li2 oli取到的是乙個類集合，所以加樣式要用for迴圈 ...

Html5新的選擇器

queryselector 選擇器 注 只能選擇乙個元素 queryselectorall 選擇器 注 選擇一組元素 getelementsbyclassname 專門針對class的，獲取一組class元素 獲取class列表屬性 classlist length class的長度 add 新增c...

HTML5 選擇器續

十 萬用字元選擇器 1 作用 給當前介面所有標籤設定屬性 2 注意點 當介面標籤太多時會影響效能，一般不用 選擇器小練習 charset utf 8 選擇器練習title 1 標籤選擇器 p 2 id identity1 identity2 3 類選擇器 para 4 後代選擇器 divp 5 子元...