【前端学习笔记】深入学习Javascript:DOM和BOM的方法及属性总结

DOM相关方法————————————————————-

自定义getElementsByClssName—————————–

1.利用getElementsByTagName获取所有元素
2.利用split函数将得到的元素的className通过空格截断为数组，然后一一判断是否和所找的className元素相等
3.第一次找到后就退出内循环，以免给返回的数组push重复的元素

function getElementsByClassName(parent,tagname,classname){

    var aElems=parent.getElementsByTagName(tagname);
    var resArr=[];

    for(var i = 0;i < aElems.length;i++)
    {
        var aClassName=aElems[i].className.split(' ');
        for(var j = 0;j < aClassName.length;j++)
        {
            if(aClassName[j]==classname)
            {
                resArr.push(aElems[i]);
                break;
            }
        }

    }
    return resArr;
}

//正则方法
function getByClassName(obj,classname){
        var pattern = new RegExp('\\b'+classname+'\\b','i');
        var aElem = obj.getElementsByTagName('*');
        var result = [];
        for(var i = 0; i < aElem.length; i++)
        {
            if(pattern.test(aElem[i].className) === true)
            {
                result.push(aElem[i]);
            }
        }
        return result;
    }

class的添加和删除方法————————————————————————

function arrIndexOf(arr,key){
    for(var i=0;i<arr.length;i++)
    {   if(arr[i]===key)
        {
            return i;
        }
    }
    return -1;
}

function addClass(obj,classname){
    var oldClassName=obj.className;
    //obj的class是空的时候,直接赋值
    if(obj.className==='')
    {
        obj.className=classname;
    }
    //obj还有其他的className的时候
    else{
        //判断是否和之前就有的class重复
        var arrOldClass=oldClassName.split(' ');
        if(arrIndexOf(arrOldClass,classname)===-1)
        {//当新增class并不存在的时候
            obj.className+=' '+classname;
        }

        //当class已存在的时候就什么都不干

    }


}

function removeClass(obj,classname){

    var oldClassName=obj.className;
    //obj的class是空的时候，什么都不做

    if(obj.className===''){}
    //obj还有其他的className的时候
    else{
        //判断要删除的class是否存在于原来的className中
        var arrOldClass=oldClassName.split(' ');
        var _index=arrIndexOf(arrOldClass,classname);
        if(_index!==-1)
        {//如果存在,去掉数组中的这个值,然后重新拼接成字符串赋值给obj.className
            arrOldClass.splice(_index,1);
            obj.className=arrOldClass.join(' ');
        }
        //如果不存在也不用干任何事


    }
}

表格元素属性———————————————————————————–
tHead : 表格头
tBodies : 表格正文
tFoot : 表格尾
rows : 行
cells : 列
用法
alert(oTab.tBodies[0].rows[1].children[0].innerHTML);

表单元素操作————————————————————————

表单中的input元素一般可以通过name属性操作
如<input type="text" name="text1" />

获取：oForm.text1 //该种方式兼容浏览器

oInp.onchange = function(){alert();}

onchange : 当值反生改变时触发
    text : 在编辑完内容后，如果值改变了，才响应
    radio、checkbox : 标准下点击的时候只要值变了那么就会触发
            非标准下焦点【离开】的时候如果值变了就会触发
    select : 

单选radio : 要把供选择的radion input的name设置一致

对于单选radio多个元素同name的情况下 oForm[radioNme]返回的是一个数组

select元素 : oForm[selectName].value返回的是选中的值(有Selected属性)

判断radio、checkbox有没有被选中的值 oForm[name].checked

表单事件———————————————————————————————

onsubmit : 事件 当提交表单的时候触发 return false;能阻止触发
oForm.submit();表单提交方法

onreset : 表单重置事件

confirm( '您确定？');确认方法，弹出一个对话框，有确定和取消，会阻止后续代码

BOM相关方法及属性—————————————————————-

BOM : Browser Object Model 浏览器对象模型

window.open(窗口地址url,打开方式) 方法 打开一个新的窗口 (页面)
    如果url地址为空，默认打开一个空白页
    如果代开方式为空，默认为新窗口方式打开

返回值：新打开窗口的window对象

window.close(); 方法 关闭窗口
1.fiefox:默认无法关闭
2.chrome:默认直接关闭
3.IE:默认询问关闭

可以关闭本窗口中通过jS创建的窗口对象

window.navigator.userAgent ->浏览器信息 返回字符串

可用window.navigator.userAgent.indexOf('')来判断浏览器

window.location : 浏览器地址信息
window.location.href : url
window.location.search : url?后面的内容
window.location.hash : url#后面的内容

窗口尺寸———————————————————————————————–

document.documentElement//该元素是可视区
    //可视区尺寸
    document.documentElement.clientWidth
    document.documentElement.clientHeight

    //滚动条滚动距离
    document.documentElement.scrollTop //非chrome
    document.body.scrollTop //chrome
    //兼容性方案
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

obj.scrollHeight : 内容实际宽高(和可视宽高区别开)


ie : 如果内容没有可视区高，那么文档高就是可视区
alert( document.documentElement.offsetHeight );

window的两个事件——————————————————————————–

onscroll : 当滚动条滚动的时候触发,滚动时5ms触发一次

onresize : 当窗口大小发生变化的时候触发