js 常用的DOM,BOM操作

dom是一种树结构,常用的dom操作有:获取dom节点,修改dom节点,以下是列举一些常用的dom操作:

1.获取DOM节点

1 document.getElementById('div1');//返回匹配id的元素
2 document.getElementsByTagName('div');//返回匹配标签名的元素集合
3 console.log(divs.length);//div1就是标准的js对象,所以可以有属性。
4 console.log(divs[0]);
5 
6 document.getElementsByClassName('link');//返回匹配class的元素集合
7 document.querySelectorAll('.div');//接收一个css选择符,返回与该模式匹配的所有元素的集合集合
8 document.querySelector('.div')//接收一个css选择符,返回与该模式匹配的第一个元素

2.修改DOM节点

1 var img=document.createElement('img');//创建元素
2 img.src='.....'//设置img属性
3 document.body.appendChild(img);//在一个元素内部的末尾插入子节点
4 console.log(img.nodeName);//IMG
5 console.log(img.nodeType); //1
6 document.body.removeChild(img);//删除最后一个子节点
7 document.body.childNodes;//查询子节点
8 document.body.parentNode;//查询父节点

BOM(browser object model)指的是浏览器对象模型,常用的BOM对象有location对象,navigator对象,history对象,screen对象

1.location对象

1 console.log(location.href);//当前页面url地址,当然也可以给它赋值,下面的也可以赋值
2 console.log(location.protocol);//协议名
3 console.log(location.host);//域名
4 console.log(location.pathname);//路径
5 console.log(location.search);//参数
6 console.log(location.hash);//哈希

2.navigator对象,最常用于判断浏览器类型

1 //navigator浏览器
2 var ua=navigator.userAgent();
3 var isChrome=ua.indexOf('Chrome');
4 console.log(isChrome);

3.history对象

1 history.back();//后退
2 history.forback();//前进

4.screen对象

1 console.log(screen.width);//屏幕的像素宽度
2 console.log(screen.height);//屏幕的像素高度

 

posted @ 2018-03-11 19:53  shuangcherry  阅读(255)  评论(0编辑  收藏  举报