二、選擇器

document.querySelector(selectors) 　　　　 　　　  // 接受一個CSS選擇器作為引數，返回第一個匹配該選擇器的元素節點。
document.querySelectorAll(selectors) 　　　　 　　 // 接受一個CSS選擇器作為引數，返回所有匹配該選擇器的元素節點。
document.getElementsByTagName(tagName)           // 返回所有指定HTML標籤的元素
document.getElementsByClassName(className)       // 返回包括了所有class名字符合指定條件的元素
 

document.getElementsByName(name) 　　　　          // 用於選擇擁有name屬性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等）
document.getElementById(id) 　　　　　　　　        // 返回匹配指定id屬性的元素節點。
document.elementFromPoint(x,y) 　　　　　　        // 返回位於頁面指定位置最上層的Element子節點。

二、class操作

Element.classList.add(className);           //新增類名
 

Element.classList.contains(className);      //是否包含
Element.classList.remove(className);        //移除類名
Element.classList.replace();                //新增一個類
Element.classList.toggle(className);        //切換className的有無

二、元素屬性操作

Element.getBoundingClientRect()  // 返回一個包含元素自身屬性的物件 (包含 top,left,right,bottom,width,height)
 

Element.getAttribute()           // 讀取指定屬性
Element.setAttribute()           // 設定指定屬性
Element.hasAttribute()           // 返回一個布林值，表示當前元素節點是否有指定的屬性
Element.removeAttribute()        // 移除指定屬性

二、css操作

let style = document.querySelector('.test').style;
style.cssText="color:#fff;"    　　　　　　　　　　　　  // 增
style.background = '#000';                           // 增2
style.removeProperty('background-color');            // 刪
style.cssText = 'background:pink;';                  // 改
style.background = 'pink';                           // 改2
style.getPropertyValue('background')                 // 查

二、選擇

二、選擇

二、選擇