JS获取元素getElementById、节点选择器querySelector与querySelectorAll区别及用法

林中明月间。

已于 2023-07-20 15:04:06 修改

阅读量2k

点赞数

分类专栏： JavaScript 文章标签： javascript html dreamweaver

于 2018-07-10 23:22:09 首次发布

本文链接：https://blog.csdn.net/a772116804/article/details/80993560

版权

JavaScript 专栏收录该内容

120 篇文章 9 订阅

订阅专栏

原生获取

1) var a = document.getElementById('id'); //单个
2) var b = document.getElementsByClassName('.div'); //集合数组
3) var c = document.getElementsByTagName('p'); //集合数组

1.ID获取
1) var _table = document.getElementById(‘date’).innerHTML =ajaxHtml;
2) var _table = document.querySelector(’#date’).innerHTML =ajaxHtml//里面参数是CSS选择器
3) var _table = document.querySelectorAll(’#date’)[0].innerHTML =ajaxHtml;

2.Class类获取
1) var _table = document.getElementsByClassName(‘date’)[0].innerHTML =ajaxHtml;
2) var _table = document.querySelector(’.date’).innerHTML =ajaxHtml;
3) var _table = document.querySelectorAll(’.date’)[0].innerHTML =ajaxHtml;

3.标签获取

1) var _table = document.getElementsByTagName(“table”);
2) var _table = document.querySelectorAll(“table”)[0].innerHTML =ajaxHtml;//ul标签集合

<body>
<div id="test">
    <p class="text">1</p>
    <p class="text">2</p>
    <p>3</p>
    <p>4</p>
</div>
    <script>
    /*
    querySelector与querySelectorAll是H5提供的选择器，可用document.querySelector()选择元素操作节点，
    用法与jQuery里的$()选择器类似,但有些细微区别:
    1. querySelector只能选择第一个匹配的节点；
    2. querySelectorAll可以选择多个节点,以","分隔开,返回的是个数组；
    其他高级用法与jq基本一致,如后代选择器document.querySelector()
    document.querySelector("#app1>.item1");
    var Span = document.querySelector('#box span');
    3.document.getElementsByClassName('box');获取的是一个集合再进行for循环操作(s);
*/
        var oDiv = document.querySelector('#test');
        var oDiv2 = document.querySelector('.test');
        var oP = document.querySelectorAll('p')[0];//只选中第一个p
        var oPs1 = oDiv.querySelectorAll('p');//oDiv下面的所有P
        var oPs2 = document.querySelectorAll('p.text');//只选中p中class="text"
        var oPs3 = document.querySelectorAll('#test>p');//选中id为test下面的所有P
        //oPs1 = oPs3 两种选择方式相同
        oDiv.style.background = 'red';
        oP.style.background = 'yellow';
        for(var i=0;i<oPs1.length;i++){
            oPs1[i].style.background = 'yellow';
        }
        for(var i=0;i<oPs2.length;i++){
            oPs2[i].style.background = 'pink';
        }
        for(var i=0;i<oPs3.length;i++){
            oPs3[i].style.background = 'blue';
        }
    </script>
</body>