JavaScript基础学习--零碎

Posted 2020-10-02 霓好

1、如果WINDOW对象是常规html页面，TOP就是SELF 

     var top = document.getElementById(‘top‘);

     top.innerHTML     //undefined

 

2、ev.stopPropagation(); //阻止事件冒泡

li.onmouseout = function(ev) {
    ev.stopPropagation(); //组织事件冒泡
};
oStar.onmouseout = function() {
    for (var i = 0; i < aLi.length; i++) {
        var img = aLi[i].getElementsByTagName(‘img‘)[0];
        img.src = ‘images/darkstar.png‘;
    }
};

 

3、var aLi_right = aUl[1].getElementsByTagName(‘li‘);     // aLi_right instanceof Array  //false

     --它是object，但是不是数组，所以不能用数组拼接方法concat

     --对象转化并拼接成数组的方式：for循环

var aUl = document.getElementsByTagName(‘ul‘);
var aLi_left = aUl[0].getElementsByTagName(‘li‘);
var aLi_right = aUl[1].getElementsByTagName(‘li‘);
var toConcatArray = function(left, right) {
    var arrLi = [];
    for (var i = 0; i < left.length; i++) {
        arrLi.push(left[i]);
    }
    for (var j = 0; j < right.length; j++) {
        arrLi.push(right[j]);
    }
    return arrLi;
};
var aLi = toConcatArray(aLi_left, aLi_right);


//但是，如果某块中不需要排除其他li，只有目标li，可以直接：
//var aLi = document.getElementsByTagName(‘li‘);

 

4、 获取视口大小和文档大小

/*视口的大小，部分移动设备浏览器对innerWidth的兼容性不好，需要
 *document.documentElement.clientWidth或者document.body.clientWidth
 *来兼容（混杂模式下对document.documentElement.clientWidth不支持）。
 *使用方法 ： getViewPort().width;
 */
function getViewPort() {
    if (document.compatMode == "BackCompat") { //浏览器嗅探，混杂模式
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}

//获得文档的大小（区别与视口）,与上面获取视口大小的方法如出一辙
function getDocumentPort() {
    if (document.compatMode == "BackCompat") {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        };
    } else {
        return {
            width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
            height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
        }
    }
}

clientHeight：内容高度+padding高度  ，jQuery中的innerHeight()方法返回的就是这个高度。

 

offsetHeight：内容高度+padding高度+边框宽度  ，jQuery中的outerHeight()方法返回的就是这个高度

 

注意：用document.getElementById(‘bottom‘).style.[ height | width ]   dom.style.width这种方式只能取到行内属性， 而不是css属性