发现复习DOM最好的方法是学习youmightnotneedjquery.com
可以对原生JS的DOM操作有一个全面的把握

1.元素（element）节点举例：html,head,meta,title,body,div,ul,li,script
2.属性（attr）节点举例：lang,charset,id,class
3.文本（text）节点
4.注释（comment）节点
...

图片.png

创建元素节点
createElement(tagName)
添加子元素
document.body.appendChild(h1)
查找元素
document.getElementById(id)
element.childNodes[i]
element.getEkementByTagName(tagName)
element.getElementByClassName(className)
element.querySelector(query)
element.querySelectorAll(query)
添加/修改文本内容
h1.textContent = "something"
设置类属性
h1.setAttribute("class", "title")
h1.className = "title"
h1.classList.add("title")
h1.classList.remove("title")

DOM事件

鼠标事件
onclick()：点击
oncontextmenu()：右键打开上下文菜单
ondblclick()：双击
onmousedown()：按下
onmouseenter()：移动到元素上时
onmouseleave()：移出元素时
onmousemove()：移动
onmouseover()：移到元素上
onmouseout()：从元素上移开
onmouseup()：按键松开