自定义属性及节点操作
今日重点
一、排他操作
排他思想：
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
（1）所有元素全部清除样式（干掉其他人）
（2）给当前元素设置样式 （留下我自己）
（3）注意顺序不能颠倒，首先干掉其他人，再设置自己
二、百度换肤案例
核心算法：把当前图片的src路径取过来，给body做为背景即可（this.src就是我们点击图片的路径）
三、表格隔行变色案例
（1）核心思路：鼠标经过tr行，当前行变背景颜色，鼠标离开去掉背景颜色
（2）鼠标经过：onmouseover 鼠标离开：onmouseout
（3）注：第一行thead里面的行不需要变色，我们获取的是tbody里面的行
四、全选案例
（1）全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
（2）下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。
（3）可以设置一个变量，来控制全选是否选中。
五、自定义属性操作
1、获取属性值
1）element.属性
2）element.getAttribute('属性')
两者区别：
（1）element.属性 获取内置属性值（元素本身自带的属性）
（2）element.getAttribute('属性')；主要获得自定义的属性（标准）我们程序员自定义的属性
2、设置属性值
1）element.属性= '值'
2）element.setAttribute('属性', '值');
两者区别：
（1）element.属性 设置内置属性值
（2）element.setAttribute('属性'); 主要设置自定义的属性（标准）
3、移出属性
element.removeAttribute(属性)
4、Tab栏切换案例
（1）规律：下面的模块显示内容和上面的选项卡一一对应，相匹配
（2）核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号
（3）当我们点击tab_list里面的某个小li，让tab_con里面对应序号的内容显示，其余隐藏（排他思想）。
5、 H5自定义属性
（1）自定义属性获取是通过getAttribute(‘属性’) 获取。
（2）H5规定自定义属性data-开头做为属性名并且赋值。
（3）元素对象.setAttribute('data-index',2)//设置修改自定义属性
6、H5新增获取data-开头的自定义属性方式
（1）兼容获取自定义属性：元素对象.getAttribute('data-index'); **
（2）element.dataset.index (注意：index属性不要再加data)
（3）如果出现多个横杠的自定义属性，如：
六、节点操作
1、节点概述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
2、节点层级
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
3、父级节点
（1）儿子对象. parentNode 属性 --- 不管父亲是否有定位，返回的都是最近一级的亲父爸爸 。 **
（2） 没有返回 null 。
4、子节点
（1）parentNode.childNodes（标准），包含了所有的子节点，包括元素节点，文本节点等
（2）parentNode.children（非标准）只返回子元素节点
5、第一个子节点和最后一个子节点
（1）parentNode.firstChildren/parentNode.lastChildren
（2）parentNode.firstElementChildren/parentNode.lastElementChildren
（3）如果想要第一个子元素节点，使用 --- 父亲对象.children[0] **
如果想要最后一个子元素节点，使用 -- 父亲对象.children[父亲对象.children.length - 1] **
6、新浪下拉菜单
核心原理：当鼠标经过li里面的第二个孩子ul显示，当鼠标离开，ul隐藏
7、兄弟节点
（1）下一个兄弟元素节点（有兼容性问题)
nextElementsibling
（2）上一个兄弟元素节点（有兼容性问题）
previousElementsibling
8、创建节点
document.createElement('html元素') （动态创建元素节点）
9、添加节点
（1）父亲对象.appendChild() 末尾
（2）父亲对象.insertBefore(child,指定元素) 前面
（3）注意：只有先创建节点 ----再把节点添加给需要的盒子(父盒子/页面)
10、简单版发布留言
（1）核心思路：点击按钮之后，动态创建一个li，添加到ul里面
（2）创建li的同时，把文本域里面的值通过li.innerHTML赋值给li
（3）用appendChild和insertBefore
七、补充
穷举思想：
例如：不知道循环多少次？
1.Infinity -- 无穷大
2. 直接占位
有关DOM介绍、获取元素及事件基础请点击a=href"https://www.cnblogs.com/kk199578/p/14117817.html"
