语法:parentNode.appendChild(child)
功能:向父节点的子节点列表的末尾添加新的子节点
语法:parentNode.removeChild(child)
功能:从子节点列表中删除某个节点
语法:document.createElement(‘标签名’)
功能:创建元素节点
语法:parentNode.insertBefore(新节点,被插队的节点)
功能:在已有的子节点前插入一个新的子节点
语法:parentNode.replaceChild(新节点,被替换的节点)
功能:替换节点
语法:document.createTextNode(‘文本内容’)
功能:创建文本节点
语法:元素.cloneNode(true)
功能:克隆一个节点
#一.课堂案例
#1.轮播图
效果图:
功能思路分析:
1.选中项下标初始化为0,随着切换方式的改变而改变
2.封装公用切换方法,排他思想给所有导航信息和图片去掉类名,给当前选中项加上类名
3.点击导航信息,修改选中项下标,调用切换方法
4.点击左右按钮,修改选中项下标,调用切换方法
5.设置定时器,修改选中项下标,调用切换方法
#2.五大校区
效果图
功能思路分析:
\1. 找到所有的复选框循环绑定点击事件
\2. 每一个复选框都有选中和取消选中两种状态。在选中时,创建对应的内容到上面的盒子;取消选中时删除被创建的元素。
\3. 判断点击的每一个复选框的checked属性,为真表示选中,为假表示取消选中。
\4. 选中后,创建一个p标签(**document.createElement( ** ‘p’)),设置p标签的内容为复选框下一个元素兄弟(nextElementSibling)的内容,将p标签放入上面的盒子中(appendChild());
\5. 取消选中时,找到所有被选中的p标签,循环每一个跟当前点击的复选框的下一个元素兄弟的内容进行比较,相同则删除(removeChild())
#二.今日小结
1.创建节点: document.createElement() document.createTextNode()
2.插入节点: 父元素.appendChild() 父元素.insertBefore()
3.删除克隆节点: 父元素.removeChild() 元素.cloneNode()