项目6 DOM进阶操作.pptx

项目6DOM进阶操作

02任务6.2JavaScript与CSS交互01任务6.1节点操作目录

任务6.1节点操作删除和复制节点3按层次关系访问节点1创建和添加节点2替换节点4

6.1.1按层次关系访问节点属性名称描述parentNode返回当前节点的父节点childNodes返回当前节点的子节点集合firstChild返回当前节点的第一个子节点，常用在访问元素的文本节点lastChild返回当前节点的最后一个子节点nextSibling返回当前节点的下一个节点previousSibling返回当前节点的上一个节点表6-1节点属性列表

6.1.2创建和添加节点//创建节点varnewNode=document.createElement(“标签名”);//将新节点添加到指定父节点的列表末尾parentNode.appendChild(“创建的新节点变量名(newNode)”);//将新节点添加到父节点中指定的某一个节点之前parentNode.insertBefore(创建的节点(newNode),指定的节点);

6.1.3删除和复制节点1.删除子节点，删除子节点也必须先获取到要删除节点的父节点，格式如下：parentNode.removeChild(子节点);//删除指定的子节点2.复制子节点，复制子节点必须先获取到要复制的节点元素，格式如下：Node.cloneNode(Boolean);//复制子节点，Node为节点元素CloneNode()方法中的参数为Boolean值，默认值为false，不复制子节点；true，复制子节点。

6.1.4替换节点替换节点parentNode.replaceChild(new_node,old_node)parentNode为替换节点的父节点，参数new_node为指定新的节点，old_node为被替换的节点

任务6.2JavaScript与CSS交互操作元素样式1相关实例2

6.2.1操作元素样式1.操作style属性var变量=元素名.style.样式名;//获取元素的样式元素名.style.样式名=值;//设置元素的样式2.操作className属性var变量名=元素名.className;//获取元素类样式名;元素名.className=类样式名;//设置元素类样式;

6.2.1操作元素样式名称描述backgroundImage设置或返回元素的背景图片display设置或返回元素的显示类型，属性值一般为：block、nonefontSize设置或返回元素的字号大小width设置或返回元素的宽度height设置或返回元素的高度left设置或返回元素距离文档内容左侧的宽度top设置或返回元素距离文档内容顶部的宽度border设置或返回元素的边框表6-1操作元素内容常用的属性列表

6.2.2相关实例Tab栏目切换鼠标进入缩略图切换大图首页滚动显示对联宣传图标图片放大特效实训6：购物车操作

总结