亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

BOM操作querySelector?querySeletorAll獲取標(biāo)簽對象

 更新時間：2022年11月01日 14:58:57   作者：貴陽前端小王子  
這篇文章主要為大家介紹了BOM操作querySelector?querySeletorAll獲取標(biāo)簽對象步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

DOM操作的基本步驟

1,  設(shè)定 html css           

2,  獲取 html標(biāo)簽對象        

3,  操作 html標(biāo)簽對象

內(nèi)容 屬性 id class css樣式 ....

! DOM操作 只能對一個標(biāo)簽對象進行操作

querySelector()

var 變量 = document.querySelector('條件');

只 獲取 第一個符合條件的標(biāo)簽對象

獲取 結(jié)果是 一個獨立的標(biāo)簽對象

可以直接進行DOM操作

沒有符合條件的標(biāo)簽 獲取結(jié)果是 null

! 沒有獲取到正確的標(biāo)簽對象 不能執(zhí)行DOM操作

querySeletorAll()

var 變量 = document.querySelectorAll('條件');

獲取 所有 符合條件的標(biāo)簽對象

 獲取 結(jié)果是 一個偽數(shù)組

有 length屬性 有 索引下標(biāo) 

但是 函數(shù)方法 和 正式的數(shù)組 不同

! DOM操作 不能 直接對 偽數(shù)組進行操作

通過 []語法 從偽數(shù)組中獲取一個獨立的標(biāo)簽對象 進行操作

通過 循環(huán)語法 對 偽數(shù)組中 每一個獨立的標(biāo)簽對象 進行操作

沒有符合條件的標(biāo)簽 獲取結(jié)果是 空數(shù)組

也就是 length 是 0 的數(shù)組

! 沒有獲取到正確的標(biāo)簽對象 不能執(zhí)行DOM操作

括號中的參數(shù)：           

以 字符串形式 定義 獲取標(biāo)簽對象的 條件                   

條件的內(nèi)容 可以是 所有 html css 支持的語法形式                                        

例如：                   

標(biāo)簽名稱  id屬性  class屬性  標(biāo)簽支持的屬性  自定義屬性  css選擇器  結(jié)構(gòu)偽類...             

還有了解不具體的同學(xué)可以仔細(xì)看一下

具體操作 案列 別看簡單 跟著敲幾遍你會更熟練!

<ul>
        <li>我是第一個li標(biāo)簽</li>
        <li>我是第二個li標(biāo)簽</li>
        <li>我是第三個li標(biāo)簽</li>
        <li>我是第四個li標(biāo)簽</li>
        <li>我是第五個li標(biāo)簽</li>
        <li>我是第六個li標(biāo)簽</li>
        <li>我是第七個li標(biāo)簽</li>
 </ul>
<script>
    // // 獲取 整個文檔中 第一個標(biāo)簽名稱是 div 的標(biāo)簽 
    // var oDiv1 = document.querySelector('div');
    // console.log( oDiv1 );
    // // 獲取 整個文檔中 所有標(biāo)簽名稱是 div 的標(biāo)簽 
    // var oDivs = document.querySelectorAll('span');
    // console.log( oDivs );

// 通過 標(biāo)簽名稱 獲取 標(biāo)簽對象

    var oDiv1 = document.querySelector('div');  標(biāo)簽是div 的項
    console.log( oDiv1 );

// 通過 id屬性值 獲取 標(biāo)簽對象

    var oDiv2 = document.querySelector('#div1');  ID 為div1 的項
    console.log( oDiv2 );

// 通過 class屬性值 獲取 標(biāo)簽對象

    var oDiv3 = document.querySelector('.div2');  類名  .div2 的項
    console.log( oDiv3 );

// 通過 屬性屬性值 獲取 標(biāo)簽對象

    var oDiv4 = document.querySelector('[name="div3"]');  name div3 的項
    console.log( oDiv4 );
    var oDiv5 = document.querySelectorAll('[name*="v"]'); 帶有 V 的項
    console.log( oDiv5 );

// 通過 結(jié)構(gòu)偽類選擇器獲取

    var oUlLis1 = document.querySelectorAll( 'ul>li' ); ul 下的 li
    console.log( oUlLis1 );
    var oUlLis2 = document.querySelectorAll( 'ul>li:first-child' );第一個li
    console.log( oUlLis2 );
    var oUlLis3 = document.querySelectorAll( 'ul>li:last-child' ); 最后一個li
    console.log( oUlLis3 );
    var oUlLis4 = document.querySelectorAll( 'ul>li:nth-child(odd)' ); 奇數(shù)項
    console.log( oUlLis4 );
    var oUlLis5 = document.querySelectorAll( 'ul>li:nth-child(even)' );偶數(shù)項
    console.log( oUlLis5 );

以上就是BOM操作querySelector querySeletorAll獲取標(biāo)簽對象的詳細(xì)內(nèi)容，更多關(guān)于BOM操作querySelector querySeletorAll的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論