前段時間發現用人有querySelector這個的語法，本來想研究一下的，前段時間有點忙一直沒騰出時間來，今天有時間了趕緊研究一下，這樣的語法出現已經有很長一段時間了，可能是自己不太關注罷了。

據說是HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個方法，用來更方便地從DOM選取元素，功能類似於jQuery也和css非常相似（要不然怎麼能叫做css語法選擇器呢），本文只介紹他的使用方式，其他詳情可以去Web API官網去看，連結如下：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll

<div id="opo">
    <span>
        <p>
            <i>1</i>
        </p>
        <p class="p">
            <b>
                <input type="text" name="tel">
                <input type="text" name="age">
            </b>
        </p>
    </span>
</div>
 

//##querySelector
let c = document.querySelector('#opo');//CSS語法查詢節點
let c1 = document.querySelector('div span .p b input[name=age]');//他可以像css一樣去選擇
console.log(c1)


//##querySelectorAll
let d = document.querySelectorAll('#opo span p');//跟getElementsByTagName很相似，獲取當前選擇的所有標籤
d.forEach((item,index)=>{//也可以迴圈
    
})


//##queryCommandState
let e = document.queryCommandState('#opo',command);
    // 返回 指定命令 在物件內的狀態碼（
    //     1表示指定命令在物件內已執行;
    //     0表示指定命令在物件內未執行，處於可執行狀態;
    //     -1表示指定命令在物件內處於不可用狀態
    // ）


//##queryCommandSupported
let f = document.queryCommandSupported(command);//方法確定瀏覽器是否支援指定的編輯指令。
    // command 待確定是否支援的命令
    // 如果命令不被支援，將觸發 NotSupportedError 異常。
    //如果命令沒有值或未啟用，將返回空字串。


//##queryCommandText
queryCommandText(command);//返回查詢的命令文字。


//##queryCommandValue
queryCommandValue('fontSize');//返回給定命令的文件，範圍或當前選擇的當前值。


//##queryCommandEnabled
let a = document.queryCommandEnabled(command);//方法可查詢瀏覽器中指定的編輯指令是否可用。
//command 待查詢的是否可用的指令.
// 返回 Boolean 值，true 表示指令可用，false表示指令不可用。


//##queryCommandIndeterm
let b = document.queryCommandIndeterm(cmdID);//返回一個布林值，指示指定的命令是否處於不確定狀態。
 

怎麼樣是不是對他們有一些瞭解了呢，其實我們最常用的還是querySelector、querySelectorAll其他的瞭解一下就好了。