JavaScript–DOM

刘遵强 | liuzunqiang@staff.hexun.com

DOMDOM 基础基础 (1)(1)

DOM基础• 什么是 DOM• 浏览器支持情况

DOM节点• children

– 获取子节点• parentNode

– 例子：点击链接，隐藏整个 li

DOMDOM 基础基础 (2)(2)

DOM节点 (2)• 首尾子节点

– 有兼容性问题– firstChild– lastChild

• 兄弟节点– 有兼容性问题– nextSibling– previousSibling

操纵元素属性元素属性• 第一种： oDiv.style.display=“block”;• 第二种： oDiv.style[“display”]=“block”;• 第三种： Dom方式

DOM方式操作元素属性• 有兼容性问题，不要使用• 获取： getAttribute(名称 )• 设置： setAttribute(名称 , 值 )• 删除： removeAttribute(名称 )

创建 DOM元素• createElement(标签名 ) 创建一个节点• appendChild(节点 ) 追加一个节点– 例子：为 ul插入 li

插入元素• insertBefore(节点 , 原有节点 ) 在已有元素前插入

– 例子：倒序插入 li

删除 DOM元素• removeChild(节点 ) 删除一个节点– 例子：删除 li

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

用 className选择元素• 如何用 className选择元素

– 选出所有元素– 通过 className条件筛选

• 封装成函数

本课知识点DOM节点：

parentNode 、 childNodes 、 nodeType获取属性：

getAttribute 、 setAttribute 、 removeAttribute

DOM元素的添加、删除、修改

知识内容

本课练习 (1)

基础• 删除 li• 点击页面，创建 div

必做• DOM：模拟留言板

2012 年 12 月 16日