DOM:Document Object Model 文档对象模型
DOM分类:Dom core;HTML Dom;Css Dom;
一、根据层次访问节点:
parentNode 返回节点的父节点
childNodes 返回子节点集合,childNodes[i]
firstChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
childNodes 返回子节点集合,childNodes[i]
firstChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
二、解决浏览器兼容问题:
firstElementChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
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>
五、元素属性:
//第一种方式:元素.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 返回元素的可见高度
offsetTop 返回当前元素上边界到它上级元素的上边界的距离,只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器,即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
六、元素属性应用:
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;
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";
}
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";
}