Lecture11Manipulating+DOM+with+JavaScript(中文版)规范.ppt

* * * * * * * * * * * * * * * * * * * * * * * * * Web 2.0 Programming – Manipulating DOM with JavaScript * / 30 * South China University of Technology Web Programming School of Computer Science and Engineering, South China University of Technology Lecture 11 使用JavaScript操纵DOM 概要 DOM 树 操纵 DOM 复杂的DOM 操纵问题 在JavaScript中，我们如何实现以下每项的内容? 每一项都涉及到对一组元素的每个个体进行修改... 当Go按钮被点击， 把所有class属性为puzzle 的div 放置到坐标为x/y随机位置上去. 当用户悬停在迷宫边界，将迷宫的所有墙变成红色. 在ul列表中，将id属性为TA的项的背景色设置为灰色 . DOM 树 网页中的元素被插入到一个由对象组成的树状结构中– DOM树 DOM 拥有遍历该树的属性跟方法 DOM 节点的类型 元素节点 (HTML 标签) 可以拥有子节点 或者属性 文本节点 (在块元素中的文本) 属性节点 (属性/值对 ) 文本/属性 是元素节点中的子节点 不可以拥有子节点或属性 在绘制DOM树的时候通常不画出来 遍历DOM 树 每个节点的DOM对象拥有以下属性: 完整的DOM节点属性列表 浏览器不兼容信息(IE 最差劲) 属性名 描述 firstChild, lastChild 该节点的子节点列表的开始/结尾节点 childNodes 该节点的子节点数组　 nextSibling, previousSibling 有相同父节点的邻节点 parentNode 该节点的父节点 DOM 树遍历示例 元素vs. 文本节点 Q: 上面的div有多少个子节点? A: 3 元素节点p 两个 文本节点 “\n\t” (在段落的前/后 ) Q: 该段落具有多少个子节点? 那个a 标签呢? 概要 DOM树 操纵DOM Prototype的 DOM元素 方法 类别: CSS类, DOM 树遍历/操纵, 事件, 样式 absolutize addClassName classNames cleanWhitespace clonePosition cumulativeOffset cumulativeScrollOffset empty extend firstDescendant getDimensions getHeight getOffsetParent getStyle getWidth hasClassName hide identify insert inspect makeClipping makePositioned match positionedOffset readAttribute recursivelyCollect relativize remove removeClassName replace scrollTo select setOpacity setStyle show toggle toggleClassName undoClipping undoPositioned update viewportOffset visible wrap writeAttribute Prototype的 DOM 树遍历方法　 Prototype 去除了不需要的文本 注意，这些都是方法, 因此你需要加上括号() 方法 描述 ancestors, up 元素的父节点　 childElements, descendants, down 元素的子节点 (非文本节点 ) siblings, next, nextSiblings, previous, previousSiblings, adjacent 有相同父节点的元素 (非文本节点) 选择多组DOM对象 在文档或其它DOM对象 中访问后代节点: 名称 属性 getElementsByTagName 选择指定标签元素的后代，例如 “div”，以数组形式返回。 getElementsByName 选择带有给定name属性的元素的后代，以数组形式返回。 (在表单控制的时候很有用) 选择特定类型的所有元素 高亮本文档中的所有段落 : 与getElementById联合使用 高亮这部分中所有ID为address的段落 : Pro