js下 Day04、DOM操作--自定义属性

语法: 元素.getAttribute(‘自定义属性名’)

功能：获取自定义属性

语法: 元素.setAttribute(‘自定义属性名’,’值’)

功能：设置自定义属性

语法: 元素.removeAttribute(‘自定义属性名’)

功能：删除自定义属性

#一．课堂案例

#1. 标签库

效果图:

功能思路分析:

\1. 找到标签库按钮，绑定点击事件。由于1个按钮既要展开又要做收起，所以需要用一个开关变量来判断(var flag = false;)。为假时点击展开，为真时点击收起。

\2. 循环给每一个li绑定点击事件。由于每一个li既要做选中又要做取消选中，所以需要用类名来判断( classList.contains() )。如果当前类名不存在，点击后则选中:

A. 添加类名( classList.add() )

B. **克隆(cloneNode(true))**一个副本，添加到指定区域( appendChild() )

如果当前类名存在，则取消选中：

A. 删除类名(classList.remove())

B. 找到已选中的所有标签，判断每一个选中的元素和点击的元素**自定义属性(getAttribute())**是否一致

C. 一致则删除(removeChild())

\3. 给克隆的元素绑定点击事件，实现双向删除,并去掉对应标签的类名。

\4. 个数限制，最多只能添加6个，通过选中标签的个数（sel.children.length）来判断。小于6个才可以选中标签，否则显示提示信息。当取消选中标签时，隐藏提示信息。

#二．今日小结

元素.getAttribute(‘自定义属性名’) 获取自定义属性

元素.setAttribute(‘自定义属性名’,’值’) 设置自定义属性

元素.removeAttribute(‘自定义属性名’) 删除自定义属性

元素.checked 复选框的选中状态

#三．作业

效果图:

功能思路分析:

功能一:渲染数据

\1. 声明两个数组存放数据，将第一个数组的内容渲染到第一个盒子，将第二个数组的内容渲染到第二个盒子（渲染: **map(function(item){}).join( ** ‘’)）;

功能二:标签转移

\2. 点击第一个盒子中的标签添加到第二个盒子中(appendChild())

\3. 点击第二个盒子中的标签添加到第一个盒子中