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

语法:parentNode.appendChild(child)

功能:向父节点的子节点列表的末尾添加新的子节点

语法:parentNode.removeChild(child)

功能:从子节点列表中删除某个节点

语法:document.createElement(‘标签名’)

功能:创建元素节点

语法:parentNode.insertBefore(新节点,被插队的节点)

功能:在已有的子节点前插入一个新的子节点

语法:parentNode.replaceChild(新节点,被替换的节点)

功能:替换节点

语法:document.createTextNode(‘文本内容’)

功能:创建文本节点

语法:元素.cloneNode(true)

功能:克隆一个节点

#一.课堂案例

#1.轮播图

效果图:

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

功能思路分析:

1.选中项下标初始化为0,随着切换方式的改变而改变

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

2.封装公用切换方法,排他思想给所有导航信息和图片去掉类名,给当前选中项加上类名

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

3.点击导航信息,修改选中项下标,调用切换方法

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

4.点击左右按钮,修改选中项下标,调用切换方法

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

5.设置定时器,修改选中项下标,调用切换方法

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

#2.五大校区

效果图

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

功能思路分析:

\1. 找到所有的复选框循环绑定点击事件

\2. 每一个复选框都有选中和取消选中两种状态。在选中时,创建对应的内容到上面的盒子;取消选中时删除被创建的元素。

\3. 判断点击的每一个复选框的checked属性,为真表示选中,为假表示取消选中。

\4. 选中后,创建一个p标签(**document.createElement( ** ‘p’)),设置p标签的内容为复选框下一个元素兄弟(nextElementSibling)的内容,将p标签放入上面的盒子中(appendChild());

\5. 取消选中时,找到所有被选中的p标签,循环每一个跟当前点击的复选框的下一个元素兄弟的内容进行比较,相同则删除(removeChild())

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

#二.今日小结

1.创建节点: document.createElement() document.createTextNode()

2.插入节点: 父元素.appendChild() 父元素.insertBefore()

3.删除克隆节点: 父元素.removeChild() 元素.cloneNode()

上一篇:DB2 重新设定表自增字段的当前值


下一篇:[java学习笔记]java语言核心----面向对象之构造函数