常用DOM

获取Dom

document.getElementById() //通过id 查找节点

document.getElementsByTagName() //通过 标签名

document.getElementsByClassName(); //通过class 类名

document.querySelector()//里面可以写入css选择器 查找单个

document.querySelectorAll()//查找所有

通过关系获取

nextElementSibling 获取下一个兄弟

perviousElementSibling 获取上一个兄弟

children 获取所有子节点

parentNode 获取父级节点

创建节点

document.createElement()

删除节点

remove()

removeChild()

替换节点

replaceChild()

克隆节点

cloneNode()

操作节点

setAttribute() 设置 getAttribute() 获取 removeAttribute() 删除节点

类名操作

className = "xxx"

classList.add() 添加

classList.remove() 删除

classList.toggle() 切换

classList.contains() 判断是否存在

向标签内部写入

innerText 写入文本 和innerHTML写入文本或标签

事件

onclick 点击 onmouseenter 移入 onmouseleave 移出 onmousemove 鼠标移动

事件冒泡

event.stopPropagation();阻止事件冒泡

event.preventDefault();阻止默认行为

输入框

onblur onfocus oninput onchange

键盘事件

onkeydown onkeyup (键盘码 keyCode)

绑定事件

节点.onclick = function(){}

事件监听

节点.addEventListener()