欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

DOM操作的基本步驟

1,  設(shè)定 html css           

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

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

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

! DOM操作 只能對(duì)一個(gè)標(biāo)簽對(duì)象進(jìn)行操作

querySelector()

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

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

獲取 結(jié)果是 一個(gè)獨(dú)立的標(biāo)簽對(duì)象

可以直接進(jìn)行DOM操作

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

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

querySeletorAll()

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

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

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

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

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

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

通過(guò) []語(yǔ)法 從偽數(shù)組中獲取一個(gè)獨(dú)立的標(biāo)簽對(duì)象 進(jìn)行操作

通過(guò) 循環(huán)語(yǔ)法 對(duì) 偽數(shù)組中 每一個(gè)獨(dú)立的標(biāo)簽對(duì)象 進(jìn)行操作

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

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

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

括號(hào)中的參數(shù)：           

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

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

例如：                   

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

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

具體操作 案列 別看簡(jiǎn)單 跟著敲幾遍你會(huì)更熟練!

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

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

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

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

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

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

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

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

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

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

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

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

相關(guān)文章

最新評(píng)論