版权声明：随便转载收藏，不过要加上源作者链接哦！ https://blog.csdn.net/qq_41649515/article/details/80831508

DOM接口

DOM是js与HTML接口( DOM不属于任何语言,他是w3组织维护的规则 )

//DOM接口应用
var div1,a1,auto,i;
div1 = document.getElementById('div1');//id获取
a1 = document.getElementById('a1');//id获取
auto = document.getElementsByClassName('auto');//class获取

//通过id修改标签的style属性
div1.style.width='100px';
div1.style.background='black';
div1.style.fontSize='20px'; //改变字体大小

alert(div1.className); //获取标签id的class参数

a1.href="http://www.baidu.com"; //修改指点id标签的链接属性(其它属性同理）
a1.style.color='pink';

//通过class修改style属性
for (i=0; i<auto.length; i++){ //因为class获取到的是数组,所以用for能修改标签属性
auto[i].style.height='250px';
auto[i].style.borderTop='5px solid pink';
}

 BOM

BOM接口是JS与浏览器沟通的桥梁

var test1,test2;

window.alert('2333');//普通对话框

test1 = window.confirm('确定要退出?'); //选择对话框

window.alert(test1);//选择对话框返回值

test2 = window.prompt('输入年龄',18); //填写对话框(18是默认值,可有可无)

window.alert(test2);

    //浏览器弹窗类open()兼容性不好

//常用的只有3种数类型

function cls(){

test1.close(); //关闭弹出页面函数

}

var test1;

test1 = window.open('http://www.baidu.com','sss1','width=300,height=100,top=100,left=100,scrollbars=yes');//window.open('链接','页面打开方式','位置大小');(页面打开方式: "_self"本页面打开 ; "自定义名字":其他页面打开)

setTimeout(cls,3000);

    //网页重定向二种方法

setTimeout("location.href='http://www.baidu.com'",3000);

//setTimeout("location.assign('http://www.qq.com')",5000);

    //获取屏幕大小

screen.width

screen.height

    //判断浏览器

var pd,PD,test1,list1;

function chk(a){ //根据indexOf(特征字符)返回值判断不同浏览器，返回值“-1”无特征字符，大于“-1”则有特征字符

var i;

if (a.indexOf(‘CHROME’) > -1){

alert('谷歌浏览器');

}

else{

alert('IE浏览器');

}

}

}

pd = navigator.userAgent; //显示浏览器特征信息

PD =pd.toUpperCase(); //特征信息全部大写

//PD.indexOf(‘CHROME’)在PD字符中如果有“CHROME”则返回值大于-1，否则就等于-1

chk(PD); //执行浏览器检测函数

作者留言：

                我比较喜欢以代码实列的形式来阐述JS函数功能！
                如果有所改进之处欢迎留言！
                注意灰色的“注释内容”特别特别重要！！
                嘻 嘻!!!

如果有收获请不要含羞的向我“赞助”吧( 1毛也是心意 )：

阅读更多