js下 Day03、DOM操作--节点方法

语法：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()