发现复习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)节点
...
创建元素节点
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():按键松开