Selectors API

HTML5向Web API新引入了

document.querySelector
document.querySelectorAll

兩個(gè)方法用來(lái)更方便地從DOM選取元素,功能類似于jQuery的選擇器。這使得在編寫(xiě)原生JavaScript代碼時(shí)方便了許多旧找。

querySelector

該方法返回滿足條件的單個(gè)元素回俐。按照深度優(yōu)先和先序遍歷的原則使用參數(shù)提供的CSS選擇器在DOM進(jìn)行查找,返回第一個(gè)滿足條件的元素诱建。

querySelectorAll

該方法返回所有滿足條件的元素其障,結(jié)果是個(gè)nodeList集合。查找規(guī)則與前面所述一樣涂佃。

<!DOCTYPE html>
<html>
    <body>
        <h3> h3 元素</h3>
        <h2> h2 元素</h2>
        <script>
            //querySelector會(huì)給所有元素的第一個(gè)元素加上樣式
            document.querySelector("h2, h3").style.backgroundColor = "red";
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <body>
        <h2> h2 元素</h2>
        <h3> h3 元素</h3>
        <script>
            //querySelectorAll獲取所有元素励翼,返回一個(gè)list集合
            var o2 = document.querySelectorAll("h2, h3");
            for(var i in o2){
                o2[i].style.backgroundColor = "red"; 
            }
        </script>
    </body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市辜荠,隨后出現(xiàn)的幾起案子汽抚,更是在濱河造成了極大的恐慌,老刑警劉巖伯病,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件造烁,死亡現(xiàn)場(chǎng)離奇詭異否过,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)惭蟋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門苗桂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人告组,你說(shuō)我怎么就攤上這事煤伟。” “怎么了木缝?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵便锨,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我我碟,道長(zhǎng)放案,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任矫俺,我火速辦了婚禮吱殉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘厘托。我一直安慰自己考婴,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布催烘。 她就那樣靜靜地躺著沥阱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪伊群。 梳的紋絲不亂的頭發(fā)上考杉,一...
    開(kāi)封第一講書(shū)人閱讀 51,679評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音舰始,去河邊找鬼崇棠。 笑死,一個(gè)胖子當(dāng)著我的面吹牛丸卷,可吹牛的內(nèi)容都是我干的枕稀。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼谜嫉,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼萎坷!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起沐兰,我...
    開(kāi)封第一講書(shū)人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤哆档,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后住闯,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體瓜浸,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡澳淑,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了插佛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片杠巡。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖雇寇,靈堂內(nèi)的尸體忽然破棺而出氢拥,到底是詐尸還是另有隱情,我是刑警寧澤谢床,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布兄一,位于F島的核電站厘线,受9級(jí)特大地震影響识腿,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜造壮,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一渡讼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧耳璧,春花似錦成箫、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至攀隔,卻和暖如春皂贩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背昆汹。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工明刷, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人满粗。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓辈末,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親映皆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子挤聘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 基本概念 事件是一些特定動(dòng)作發(fā)生時(shí)所發(fā)出的信號(hào),JavaScript中的事件是可以被 JavaScript 偵測(cè)到...
    Zd_silent閱讀 461評(píng)論 0 1
  • ps:了解這個(gè)知識(shí)點(diǎn)的原因 前兩天我在重溫js dom編程的時(shí)候,看到了獲取dom元素這一章捅彻,然后看到了getEl...
    var_Change閱讀 1,362評(píng)論 0 3
  • 基本介紹 文檔對(duì)象模型 (DOM) 是HTML和XML文檔的編程接口檬洞。它給文檔(結(jié)構(gòu)樹(shù))提供了一個(gè)結(jié)構(gòu)化的表述并且...
    草鞋弟閱讀 438評(píng)論 0 0
  • 實(shí)際前端開(kāi)發(fā)工作中,我們經(jīng)常會(huì)遇到要獲取某些元素沟饥,以達(dá)到更新該元素的樣式添怔、內(nèi)容等目的湾戳。而文檔對(duì)象模型 (DOM) ...
    _Dot912閱讀 1,982評(píng)論 0 8
  • 我們總是說(shuō)著畢業(yè)遙遙無(wú)期可是真的到來(lái)的那一刻卻又不知從何說(shuō)起艾杏。 我記得你我第一次相識(shí)是在我們期待卻也有些恐懼的高三...
    小白TL閱讀 579評(píng)論 0 0