JavaScript–DOM
刘遵强 | [email protected]
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日