Dom基础

Posted 2020-07-17 distant-遥远

DOM基础

•什么是DOM

•浏览器支持情况

lDOM节点

•childNodes  nodeType

–获取子节点

–children

•parentNode

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

•offsetParent

–例子：获取元素在页面上的实际位置

 

DOM节点

•首尾子节点

有兼容性问题

firstChild、firstElementChild

lastChild 、lastElementChild

•兄弟节点

–有兼容性问题

nextSibling、nextElementSibling

previousSibling、previousElementSibling

 

操作元素属性

元素属性操作

•第一种：oDiv.style.display=“block”;

•第二种：oDiv.style[“display”]=“block”;

•第三种：Dom方式

DOM方式操作元素属性

•获取：getAttribute(名称)

•设置：setAttribute(名称, 值)

•删除：removeAttribute(名称)

 

DoM元素灵活查找

用className选择元素

•

–通过className条件筛选

•如何用className选择元素

–选出所有元素

•封装成函数

 

知识点

DOM节点：parentNode、childNodes、nodeType、children

元素属性：getAttribute、setAttribute、removeAttribute

用class选取元素