第3课 DOM对象概要.ppt

表示HTML文档中的元素 属性 nodeName/nodeType：节点名称/节点类型 childNodes：返回子节点集合，NodeList类型 attributes：返回属性集合，NamedNodeMap类型 firstChild/lastChild：第一个/最后一个子节点 parentNode：返回元素的父节点 方法 appendChild()：添加子节点，包括子元素、文本节点等 getAttribute()：获取指定属性的值 setAttribute()：添加/修改属性 Element类型 包括元素、文本、属性、注释等，可以通过节点类型来判断 表示XML文档中的文本节点 属性 data：文本数据 length：数据长度 方法 appendData：向节点追加数据 deleteData：从节点删除数据 insertData：向节点中插入数据 replaceData：替换节点中的数据 Text类型 表示XML元素的属性 属性 name：属性名 value：属性值 Attr类型 表示节点的集合类型 属性 length：节点数量 方法 item()：获取指定索引位置的节点，在JavaScript中可以使用[ ]代替 NodeList类型 表示元素属性的集合类型 属性 length：节点数量 方法 item()：获取指定索引位置的属性对象，在JavaScript中可以使用[ ]代替 getNamedItem()：获取指定名称的属性对象 NamedNodeMap类型 创建新元素： document.createElement(元素名) 设置文本内容（支持文本内容的元素）： 元素.appendChild(document.createTextNode(文本内容)) 设置属性： 元素.setAttribute(属性名，属性值) 找到父元素： document.getElement…… 追加： 父元素.appendChild(新元素) document写操作的步骤 document操作可分为两类：读操作、写操作 元素创建示例 var parent=document.getElementById(d1); var node=document.createElement(span); node.id=“sp1”; parent.appendChild(node); node.appendChild( document.createTextNode(AppendText)); //上述代码可以写为：node.innerHTML=“……” 其它元素操作 插入：parent.insertBefore(新的节点,已经存在的节点) 删除：parent.removeChild(要删除的节点) 替换：parent.replaceChild(新的节点,被替换的节点) 克隆：node.cloneNode(true|false是否包括内容) 元素克隆示例 //d1是一个span的id，该span的父元素是一个div var src=document.getElementById(d1); //克隆出一个与src完全相同的元素，参数true表示克隆所有子、孙级内容 var dest=src.cloneNode(true); //将克隆出的span添加到div中 src.parentNode.appendChild(dest); 练习-动态添加数据 将页面下方表单中的数据添加到上方的表格中 JavaScript访问CSS样式 style属性 单一单词的CSS样式属性，直接使用“对象名.style.样式名”来访问，如obj.style.color=“red”; 复合词，将复合符号“-”去掉，并将其后的单词首字母改成大写，如obj.style.fontSize=“18px” className属性 当修改的样式比较多时，可以借助于样式表，为不同状态下的样式分别定义一个类选择器，在脚本中使用“对象名.className”来访问 使用style属性制作菜单 如何制作当鼠标移动菜单上时，菜单背景变化？ 1、鼠标移到菜单上时改变菜单样式 2、鼠标移出菜单时恢复为原来的样式 在事件所绑定的回调函数中，this表示事件源（发生事件的元素） 练习- 层切换效果 练习-复选框全选和取消效果 需求说明 “全选”选中时，所有复选框被选中 “全选”取消选中时，所有复选框也取消选中 跟踪选中行 将鼠标所在位置的表格行高亮显示 练习-带按钮的轮播广告 训练要点 使用position定位网页元素 使用display属性控制层的显示和隐藏 使用JavaScript动态的改变CSS属性 使用setTimeout()实现图片轮流显示 * * * * * * * * * * * 网博课程研