JavaScript学习笔记03

吸顶条-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	卷起的高度