查找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