DOM-1

admin

1. DOM简介、DOM标准、DOM节点
2. 获取元素的子节点：childNodes、兼容性问题
3. 节点类型：nodeType、文本节点、元素节点
4. children的使用
5. 获取元素父节点parentNode
6. 获取定位元素的父节点offsetParent
7. 获取首尾子元素：firstChild、firstElementChild、lastChild、lastElementChild
8. 获取兄弟节点：nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
9. 元素属性操作：“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute
10. 通过className获取元素、封装getByClass函数

admin

DOM基础(1)
lDOM基础

?什么是DOM
?浏览器支持情况

lDOM节点

?childNodes
nodeType

–获取子节点

–children
?parentNode

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

?offsetParent

–例子：获取元素在页面上的实际位置
DOM基础(2)

lDOM节点(2)
?首尾子节点

–有兼容性问题

–firstChild、firstElementChild

–lastChild
、lastElementChild

?兄弟节点

–有兼容性问题

–nextSibling、nextElementSibling

–previousSibling、previousElementSibling
操纵元素属性

l元素属性操作

?第一种：oDiv.style.display=“block”;
?第二种：oDiv.style[“display”]=“block”;
?第三种：Dom方式

lDOM方式操作元素属性

?获取：getAttribute(名称)
?设置：setAttribute(名称, 值)
?删除：removeAttribute(名称)
DOM元素灵活查找

l用className选择元素

?如何用className选择元素

–选出所有元素

–通过className条件筛选

?封装成函数

admin

本课知识点

lDOM节点：parentNode、childNodes、nodeType、children
l元素属性：getAttribute、setAttribute、removeAttribute

l用class选取元素