BOM操作querySelector?querySeletorAll獲取標簽對象
DOM操作的基本步驟
1, 設(shè)定 html css
2, 獲取 html標簽對象
3, 操作 html標簽對象
內(nèi)容 屬性 id class css樣式 ....
! DOM操作 只能對一個標簽對象進行操作
querySelector()
var 變量 = document.querySelector('條件');
只 獲取 第一個符合條件的標簽對象
獲取 結(jié)果是 一個獨立的標簽對象
可以直接進行DOM操作
沒有符合條件的標簽 獲取結(jié)果是 null
! 沒有獲取到正確的標簽對象 不能執(zhí)行DOM操作
querySeletorAll()
var 變量 = document.querySelectorAll('條件');
獲取 所有 符合條件的標簽對象
獲取 結(jié)果是 一個偽數(shù)組
有 length屬性 有 索引下標
但是 函數(shù)方法 和 正式的數(shù)組 不同
! DOM操作 不能 直接對 偽數(shù)組進行操作
通過 []語法 從偽數(shù)組中獲取一個獨立的標簽對象 進行操作
通過 循環(huán)語法 對 偽數(shù)組中 每一個獨立的標簽對象 進行操作
沒有符合條件的標簽 獲取結(jié)果是 空數(shù)組
也就是 length 是 0 的數(shù)組
! 沒有獲取到正確的標簽對象 不能執(zhí)行DOM操作
括號中的參數(shù)：
以 字符串形式 定義 獲取標簽對象的 條件
條件的內(nèi)容 可以是 所有 html css 支持的語法形式
例如：
標簽名稱 id屬性 class屬性 標簽支持的屬性 自定義屬性 css選擇器 結(jié)構(gòu)偽類...
還有了解不具體的同學(xué)可以仔細看一下
具體操作 案列 別看簡單 跟著敲幾遍你會更熟練!
<ul>
<li>我是第一個li標簽</li>
<li>我是第二個li標簽</li>
<li>我是第三個li標簽</li>
<li>我是第四個li標簽</li>
<li>我是第五個li標簽</li>
<li>我是第六個li標簽</li>
<li>我是第七個li標簽</li>
</ul>
<script>
// // 獲取 整個文檔中 第一個標簽名稱是 div 的標簽
// var oDiv1 = document.querySelector('div');
// console.log( oDiv1 );
// // 獲取 整個文檔中 所有標簽名稱是 div 的標簽
// var oDivs = document.querySelectorAll('span');
// console.log( oDivs );
// 通過 標簽名稱 獲取 標簽對象
var oDiv1 = document.querySelector('div'); 標簽是div 的項
console.log( oDiv1 );
// 通過 id屬性值 獲取 標簽對象
var oDiv2 = document.querySelector('#div1'); ID 為div1 的項
console.log( oDiv2 );
// 通過 class屬性值 獲取 標簽對象
var oDiv3 = document.querySelector('.div2'); 類名 .div2 的項
console.log( oDiv3 );
// 通過 屬性屬性值 獲取 標簽對象
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獲取標簽對象的詳細內(nèi)容，更多關(guān)于BOM操作querySelector querySeletorAll的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Javascript使用post方法提交數(shù)據(jù)實例
這篇文章主要介紹了Javascript使用post方法提交數(shù)據(jù),實例分析了javascript實現(xiàn)post提交數(shù)據(jù)的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
window.event.srcElement 得到事件源對象
window.event.srcElement 得到事件源對象代碼，大家可以參考腳本之家以前發(fā)的代碼，多瀏覽兼容的。2009-05-05
這篇文章主要介紹了Ajax請求時無法重定向的問題解決代碼詳解，當(dāng)使用Ajax請求時，如果后臺進行重定向到其他頁面時是無法成功的，只能在瀏覽器地址欄輸入才能夠?qū)崿F(xiàn)重定向。下面我們來看看解決方法吧2019-06-06
JavaScript中的6種變體函數(shù)的區(qū)別和應(yīng)用
JavaScript?中函數(shù)調(diào)用有許多獨特的變體方式,例如?~function、-function?等,這些變體不僅展現(xiàn)了?JavaScript?語言的靈活性,也可以在某些場景下讓代碼更加簡潔,本文將通過示例代碼和解析,來全面剖析這些特殊的函數(shù)調(diào)用方式及其返回值的區(qū)別2025-01-01
uni-app可通過process.env.NODE_ENV判斷當(dāng)前環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境,下面這篇文章主要給大家介紹了關(guān)于uni-app多環(huán)境部署的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
做音樂播放器小程序時,因為swiper的問題耽誤不少時間,所以下面這篇文章主要給大家介紹了關(guān)于uni-app使用swiper實現(xiàn)輪播圖的相關(guān)資料,需要的朋友可以參考下2022-11-11
javascript實現(xiàn)根據(jù)函數(shù)名稱字符串動態(tài)執(zhí)行函數(shù)的方法示例
這篇文章主要介紹了javascript實現(xiàn)根據(jù)函數(shù)名稱字符串動態(tài)執(zhí)行函數(shù)的方法,結(jié)合實例形式分析了JS函數(shù)名的判斷及函數(shù)動態(tài)調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
layui問題之渲染數(shù)據(jù)表格時,僅出現(xiàn)10條數(shù)據(jù)的解決方法
今天小編就為大家分享一篇layui問題之渲染數(shù)據(jù)表格時,僅出現(xiàn)10條數(shù)據(jù)的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑欄過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
大家一定遇到過這樣的情況，有兩個日期對象，然后需要判斷他們是否相等，下面來說下判斷的方法2013-09-09