原生js學習 選擇dom

連bootstrap5 都拋棄jquery了，重新使用原生js來寫，所以最近在學習原生js。

一、選擇dom元素：

id

let sure=document.getElementById('sure');

 返回值：是一個dom元素，因為id在一個文檔（document）中，是唯一，所以返回一個dom對象。

class

 let mask=document.getElementsByClassName('mask')[0]

 

返回值：類數組的元素集合

因為className在一個文檔中並不是唯一，我們在使用document查找是從文檔的根節點進行查找，返回是類數組對象，即nodeList 類數組有length 以及可以根據下標獲取元素。

我們也可以修改查找的起點。比如上面的是document開始，我們可以從div或者更小的局部元素進行查找。

querySelector

上面的方法並不靈活，有時候我們根據css選擇器來進行選擇。我們可以使用querySelector(css選擇器)；來進行選擇元素。

 let clkBtns=document.querySelector('.wrap button');

 

返回值：匹配的第一個html元素。

querySelectorAll()

如果我們查找一組元素使用如上方法。返回的也是類數組。

二、dom元素的特性都包含在屬性中。

let box=document.querySelector('#box');
reset.onclick=function (e) {
        box.style.cssText="background:'white',height:'100px',width:'100px'";
    }

 

包含事件以及樣式以及style等等。