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);//屏幕的像素高度