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. 点击第二个盒子中的标签添加到第一个盒子中