吸顶条-DOM
一、获取可视区宽和高
宽 document.documentElement.clientWidth
高 document.documentElement.clientHeight
二、处理getElementsByClassName兼容性问题
/**
* [getByClassName 处理getElementsByClassName兼容性问题]
* @param {object} obj 父级对象
* @param {string} className class值
* @return {array} 返回对象集合
*/
function getByClassName(obj, className)
{
//如果浏览器支持这种写法直接返回
if (obj.getElementsByClassName) {
return obj.getElementsByClassName(className);
}
//如果此sb用户使用的时低级浏览器
var oTotal = obj.getElementsByTagName('*');
//声明空数组 保存符合条件的
var aObj = [];
for (var i=0; i<oTotal.length; i++) {
//获取所有标签class的值
var cName = oTotal[i].className;
var aName = cName.split(' ');
for (var j=0; j<aName.length; j++) {
if (aName[j] == className) {
aObj.push(oTotal[i]);
}
}
}
return aObj;
}
三、节点操作
1、获取
获取方式(高级浏览器) | 说明 |
---|---|
children | 根据爹找所有儿子 |
parentNode | 根据儿子找爹 |
firstElementChild | 长子 |
lastElementChild | 老幺 |
previousElementSibling | 哥哥 |
nextElementSibling | 弟弟 |
获取方式(低级浏览器) | 说明 |
---|---|
firstChild | 长子 |
lastChild | 小儿子 |
previousSibling | 哥哥 |
nextSibling | 弟弟 |
2、添加和删除
方式 | 说明 |
---|---|
createElement | 创建节点 |
removeChild | 杀儿子 |
appendChild | 追加节点 追加儿子 |
insertBefore | 插入到某个节点之前 |
四、设置自定义属性
setAttribute
getAttribute
五、
1、滚动事件 onscroll
方式 | 说明 |
---|---|
offsetTop | 当前元素距离顶部的距离 |
offsetLeft | |
offsetHeight | 当前元素和高度 |
offsetWidth | 当前元素的宽度 |
scrollTop | 卷起的高度 |