原生js学习 选择dom

连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js。

一、选择dom元素:

id

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

 返回值:是一个dom元素,因为id在一个文档(document)中,是唯一,所以返回一个dom对象。

class

1  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等等。

 

上一篇:原生JS操作DOM节点代码


下一篇:拖拽借口