本文介绍了 DOM 的基础知识，包括节点的操作、元素属性的修改以及如何添加、删除和插入 DOM 元素。重点讲解了兼容性问题及文档碎片的使用，以提高 DOM 操作性能。最后，还包括了基础练习，鼓励读者实现留言板功能。

1. JavaScript–DOM

2. 刘遵强 | liuzunqiang@staff.hexun.com

3. DOM 基础 (1)
DOM 基础
• 什么是 DOM
• 浏览器支持情况
DOM 节点
• children
– 获取子节点
• parentNode
– 例子：点击链接，隐藏整个 li

4. DOM 基础 (2)
DOM 节点 (2)
• 首尾子节点
– 有兼容性问题
– firstChild
– lastChild
• 兄弟节点
– 有兼容性问题
– nextSibling
– previousSibling

5. 操纵元素属性
元素属性
• 第一种： oDiv.style.display=“block”;
• 第二种： oDiv.style[“display”]=“block”;
• 第三种： Dom 方式
DOM 方式操作元素属性
• 有兼容性问题，不要使用
• 获取： getAttribute( 名称 )
• 设置： setAttribute( 名称 , 值 )
• 删除： removeAttribute( 名称 )

6. 创建 DOM 元素
• createElement( 标签名 ) 创建一个节点
• appendChild( 节点 ) 追加一个节点
– 例子：为 ul 插入 li
插入元素
• insertBefore( 节点 , 原有节点 ) 在已有元素前插入
– 例子：倒序插入 li
删除 DOM 元素
• removeChild( 节点 ) 删除一个节点
– 例子：删除 li

7. 文档碎片
文档碎片
• 文档碎片可以提高 DOM 操作性能 ( 理论上 )
• 文档碎片原理
• document.createDocumentFragment()

8. 用 className 选择元素
• 如何用 className 选择元素
– 选出所有元素
– 通过 className 条件筛选
• 封装成函数

9. 本课 知识 点 知识内容
DOM 节点：
parentNode 、 childNodes 、 nodeType
获取属性：
getAttribute 、 setAttribute 、 removeAttribute
DOM 元素的添加、删除、修改

10. 本课练习 (1)
基础
• 删除 li
• 点击页面，创建 div
必做
• DOM ：模拟留言板

12. 2012 年 12 月 16 日