排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他循环思想算法
1.所有元素全部清楚样式
2.给当前元素设置样式 顺序不能颠倒
鼠标经过事件 onmouseover
鼠标离开事件 onmouseout
自定义属性操作
获取元素的属性值
element.属性 //获得元素的属性值
element.getAttribute ( ' 属性 ' ) //获得程序员自己新定义的属性
设置元素的属性值
element.属性 = '值'
element.setAttribute (' 属性 ', ' 值 ' ) //设置程序员自己新定义的属性
移除属性
element.removeAttribute( ' 属性' )
H5自定义属性标准
data-开头作为属性名并且赋值
H5获取自定义属性的方法 //考虑兼容性
element.dataset.属性 或 element.dataset[ ' 属性名' ] //只能获取data开头的
如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
节点操作
节点由nodeType(节点类型) nodeName(节点名称) nodeValue(节点值)
nodeType
元素节点 nodeType =1 //重点
属性节点 nodeType=2
文本节点 nodeType=3 (文本节点包含文字，空格， 换行等)
父节点 元素名.parentNode
//得到的是离元素最近的父级节点(亲爸) 如果找不到父节点 就返回 null
子节点 元素名.childNodes //不经常使用
如果只想获得里面的元素节点 需要专门处理 一般不使用
子节点获取
元素名.children //非标准，但经常使用
元素名.firstchild 返回第一个子节点 不管是文本节点还是元素节点
元素名.firstElementchild 返回第一个元素子节点 //考虑兼容性
元素名.lastchild 返回最后一个子节点 不管是文本节点还是元素节点
元素名.lastElementchild 返回最后一个子节点
实际开发 返回第一个元素子节点 返回最后一个子节点
元素名.children[ 0 ] 返回第一个子节点
元素名.children [ children.length-1 ] 返回最后一个子节点
兄弟节点
元素名.nextSibling 返回下一个兄弟节点 包括元素节点 文本节点等
元素名.nextElementSibling 返回下一个兄弟元素节点
元素名.previousSibling 返回上一个兄弟节点 包括元素节点 文本节点等
元素名.previousElementSibling 返回上一个兄弟元素节点
不考虑兼容问题 要封装函数
创建节点
document.createElement( ' 节点名 ' )
添加节点
父级元素名.appendChild(子级) //在父类后面追加元素
父级元素名.insertbBefore(子级，指定元素位置)
删除节点
父节点名称.removechild(child)
复制节点
元素名称.cloneNode ()
参数
括号为空，或里面是false 浅拷贝 只复制标签不复制里面的内容
括号内容为true 深拷贝 复制标签还有里面子节点的内容
三种动态创建元素区别
write
innerHTML
直接写入很慢
内容写入某个DOM节点，不会导致页面全部重绘
创建多个元素效率更高 不要拼接字符串，采取数组形式拼接 结构稍微复杂，但快捷
createElement 相比innerHTML 快 创建多个元素效率稍微低一点，但是结构更清晰
防止链接跳转 javascript:;
