js简单的选择器区别

简单的js选择器区别

<ul>
        <li id="li1">1</li>
        <li class="li2">2</li>
        <li name="li3">3</li>
        <li>4</li>
    </ul>
    <script>
        /*
         * 区分选择器功能:
         * getElementById           // 根据id来选择
         * getElementsByTagName     // 根据标签名来选择 返回集合(以伪数组形式)
         * getElementsByClassName    // ie 9以上支持根据类名来选择 返回集合
         * getElementsByName        // 根据给定的name 返回一个在 (X)HTML document的节点列表集合。(参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByName)
         * getElementsByTagNameNS   // (参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByTagNameNS)
         */
        var li1 = document.getElementById('li1')
            // console.log(li1)
        var lis = document.getElementsByTagName('li')
            // console.log(lis)
        var li2 = document.getElementsByClassName('li2')
            // console.log(li2[0])
        var li3 = document.getElementsByName('li3')
            // console.log(li3[0])
        var li4 = document.getElementsByTagNameNS('C:\Users\咬紧牙关\Desktop\javascript_text', "ul")
        console.log(li4)
    </script>