3分钟熟练使用querySelector、querySelectorAll，了解queryCommandState、Supported...，每一个的使用方法

今天给大家分享一下querySelector这个的使用方法，前段时间有人问我querySelector语法如何使用，想着有时间分享一下，结果前段时间有点忙一直没腾出时间来，正好今天有时间了 go go go，这样的语法出现已经有很长一段时间了(真的很长时间了)，可能是自己不太关注罢了，但不得不说，挺好用的，今天给大家分享一下。

据说是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其他的了解一下就好了。