原生DOM操作

查找DOM

Ele.getElementByClassName()

Ele.getElementsByTagName()

Ele.querySelector() | Ele.querySelectorAll('.warp a')//快速查找warp下的所有a

给DOM添加样式

Ele.style.width = 12

给元素添加class

Ele.className = 'aaa'//直接覆盖之前的类名

Ele.classList.add = 'aaa'//不覆盖

Ele.className += 'aaa'//不覆盖

判断元素上是否有某个类名

Ele.classList.contains('aaa')

新增属性

Ele.setAttribute('data-id', 1)

获取属性值

Ele.getAttribute("data-id");

删除属性

Ele.removeAttribute("data-id");

创建DOM元素

 const p = document.createElement("p");

删除DOM元素

 Ele.remove(); // 删除ELe
 
 Ele.removeChild(clildEle) // 删除ELe中的子元素 childEle

复制DOM

Ele.cloneNode( true | false ) //true深层复制（如果节点内还有节点，子节点也可以复制）

插入DOM

Ele.appendChild(ele) 在Ele的最后插入ele

Ele.insertBefore(newele,ele) // 在Ele元素中的 ele元素前插入 newele

替换DOM

parentEle.replaceChild(newEle,oldEle)

删除DOM

parentEle.removeChild(ele)//删除EleParent中的ele元素

遍历节点

parentNode : 查找指定节点的父节点

nextSibling : 查找指定节点的下一个节点

previousSibling : 查找指定节点的上一个节点

firstChild : 查找指定节点的第一个字节点 空格换行也算节点

lastChild : 查找指定节点的最后一个字节点 空格换行也算节点

childElementCount : 返回子元素的个数，不包括文本节点和注释

firstElementChild : 返回第一个子元素

lastElementChild : 返回最后一个子元素

previousElementSibling : 返回前一个相邻兄弟元素

nextElementSibling : 返回后一个相邻兄弟元素

获取浏览器高度

获取实际屏幕宽高

const W  =  window.screen.width 
const H  =  window.screen.height

获取浏览器宽高

const W = window.outerWidth;
const H = window.outerHeight;

获取当前窗口宽高（浏览器视口宽高）

const W = window.innerWidth;
const H = window.innerHeight;

获取元素布局宽高

const W  =  window.screen.width 
const H  =  window.screen.height

获取元素内容宽高

const W = element.scrollWidth;
const H = element.scrollHeight;

获取滚动后被隐藏页面的宽高

const H = document.documentElement.scrollTop;
const W = document.documentElement.scrollLeft

获取元素距离顶部和左边距离

const top = Ele.offsetTop;
const left = Ele.offsetLeft