JavaScript操作DOM对象
DOM:Document Object Model 文档对象模型
DOM分类:Dom core;HTML Dom;Css Dom;
一、根据层次访问节点:
parentNode 返回节点的父节点
childNodes 返回子节点集合,childNodes[i]
firstChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
二、解决浏览器兼容问题:
firstElementChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
例如:ONext = OParent.nextElementSibling || OParent.nextSibling
三、节点信息:
nodeName:节点名称
nodeValue:节点值
nodeType:节点类型
四、操作节点样式:
<script type="text/javascript"> //第一种方式:元素.style.样式属性 function whtmouseover(){ //要让张三字体变小 颜色变绿 document.getElementById("zs").style.fontSize="15px"; document.getElementById("zs").style.color="green"; }; function whtmouseout(){ //要让张三字体变小 颜色变绿 document.getElementById("zs").style.fontSize="8px"; document.getElementById("zs").style.backgroundColr="pink"; }; //第二种方式:元素.className 事先在样式中创建名为.className的值的样式列表 function lbmouseover(){ document.getElementById("zhao").className="zhao"; }; function lbmouseout(){ document.getElementById("zhao").className="zhao"; }; //第三种方式:元素.style.cssText="css属性值" function llmouseover(){ document.getElementById("ww").style.cssText="color:red;font-size:10px"; } function llmouseout(){ document.getElementById("ww").style.cssText="color:black;font-size:60px"; } </script>
五、元素属性:
offsetLeft 返回当前元素左边界到它上级元素的左边界的距离,只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离,只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器,即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
六、元素属性应用:
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;
七、制作固定广告:
var adver; window.onload=function(){ adver=document.getElementById("adver"); } //onscroll:滚动条滚动时触发 window.onscroll=function(){ //获取滚动条滚动大小 var scorlltop=document.documentElement.scrollTop||document.body.scrollTop; var scorllleft=document.documentElement.scrollLeft||document.body.scrollLeft; //元素跟随滚动条一起变化 adver.style.top=scorlltop+30+"px"; adver.style.left=scorllleft+10+"px"; }