原生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等等。