第十三章 JavaScript操作DOM对象

本章目标

了解DOM的分类和节点间的关系

熟练使用JavaScript操作DOM节点

访问DOM节点

能够熟练的进行节点的创建、添加、删除、替换等

能够熟练的设置元素的样式

能够灵活运用JavaScript获取元素位置的属性来完成网页效果

DOM：Document Object Model（文档对象模型）

节点与节点之间的关系

访问节点

使用getElement系列方法访问指定节点

getElementById()、getElementsByName()、getElementsByTagName()

根据层次关系访问节点

节点属性

element属性

oNext = oParent.nextElementSibling || oParent.nextSibling  

oPre = oParent.previousElementSibling || oParent.previousSibling  

oFirst = oParent. firstElementChild  ||  oParent.firstChild  

oLast = oParent.lastElementChild || oParent.lastChild

节点信息

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型

操作节点

操作节点的属性

getAttribute("属性名")

setAttribute("属性名","属性值")

创建和插入节点

删除和替换节点

style属性

示例

function out(){      

document.getElementById("cart").style.backgroundColor="#f9f9f9";         document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";         document.getElementById("cartList").style.display="none";    

}

className属性

HTML中元素属性

语法

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

或者

document.body.scrollTop;

document.body.scrollLeft;

总结