BOM操作
获取浏览器地址栏信息window.location
-
1,
window.location.reload()方法-
页面重新加载/刷新方法
-
不能直接写,否则会一直刷新
-
<script> btn.onclick = function(){ window.location.reload(); } </script>
-
-
2,
window.location.herf-
获取地址栏的信息内容
-
将地址栏信息中文正常显示
decodeURIComponent(window.location.href) -
举例：
window.location.href = 'https://www.baidu.com' -
<script> //设定5秒后跳转 var int = 5; setInterval( function(){ d2.innerHTML = `请您注意,${int}秒之后,跳转至新浪页面`; int--; if(int == -1){ window.location.href = 'https://www.sina.com'; } } , 1000); </script>
-
-
3,
window.location.host- 获取地址栏信息中,主机地址信息
-
4,
window.location.port- 获取地址栏信息中,端口的数值
-
5,
window.location.search- 获取地址栏信息中,传参的数据
- 在浏览器地址栏中,可以实现数据的传递,也就是传递参数
- 格式是 地址?传参的数据
BOM操作之获取浏览器相关信息
window.navigator
- 获取浏览器版本号,内核,型号,等相关信息
console.log(window.navigator.userAgent); - 浏览器软件名称
console.log(window.navigator.appName); - 浏览器软件版本信息
console.log(window.navigator.appVersion); - 本地电脑,操作系统信息
console.log(window.navigator.platform);
BOM 操作之浏览器的跳转 window.history
-
1.
window.history.lenght -
当前窗口一共访问过几个页
-
2.
window.history.back()- 后退功能 返回到上一个访问的页面
-
3.
window.history.forward()- 前进功能 前进到下一个访问的页面
-
4.
window.history.go(数值)- 跳转到指定位置的页面 通过设定跳转几个页面来实现
- +数值 就是前进 -数值 就是后退
BOM操作之浏览器常见事件
-
1.
load事件window.onload = function(){}- 页面加载事件
- 当页面程序都加载结束之后,执行的程序
-
2.
open事件window.open('url地址')- 新窗口打开页面
window.location.href = 'url地址'当前窗口打开页面
-
3.
scroll事件window.onscroll = function(){}-
滚动条事件
-
当浏览器 滚动条 位置发生改变时,触发事件
window.onscroll = function(){
console.log(‘我滚了’);
}
-
-
4.
resize事件window.onresize = function(){}-
当页面大小发生改变时,触发事件
window.onresize = function(){
console.log(‘我改了’);
}
-
-
5.
close事件window.close()-
关闭当前页面事件
关闭页面
c.onclick = function(){
window.close();
}
-
DOM操作
文档对象模型 操作HTML文档
标签对象获取
(1) 通过 id属性值获取 标签对象
document.getElementById('id属性值')- 执行结果,只能获取一个标签对象 注意,id属性值,一定要有引号 HTML中,id属性值一定不能重复设定
var oDiv1 = document.getElementById('div1');
(2) 通过 class属性值 获取标签对象
document.getElementsByClassName('class属性值')- class属性,在JavaScript中,一律定义为 className
- 执行结果,获取到的是,一个伪数组
- 不能被 forEach() 循环遍历
(3) 通过 标签名称 获取标签对象
document.getElementsByTagName('标签名称');- 获取到是一个伪数组
- 数组的单元是符合条件的标签
- 不能被forEach()循环遍历
(4) 通过 标签name属性的属性值 获取标签对象
-
document.getElementsByName('标签name属性的属性值')-
获取到的结果是一个伪数组 数组内容是符合条件的标签
-
可以被forEach()循环遍历
我是span1
我是span2
我是span3
我是span4
var oSpan = document.getElementsByName(‘s’);
console.log(oSpan);
oSpan.forEach(function(v){
console.log(v);
})
-
推荐方法
(5).通过 只要是符合语法规范的方式 就能获取到标签对象
低版本ie不兼容这两种方式
-
1.
document.querySelector()- 获取符合条件的第一个标签
-
2.
document.querySelectorAll()- 获取符合条件的所有标签
- 所有标签是一个数组,可以被**forEach() **循环遍历
// 通过标签的id属性值来获取,要记得写 # 号
var oQuery1 = document.querySelector('#div1');
console.log(oQuery1);// 通过标签的class属性值来获取,要记得写 . 号
var oQuery2 = document.querySelector('.div2');
console.log(oQuery2); // 通过标签的标签名称来获取
// 只获取第一个div标签
var oQuery3 = document.querySelector('div');console.log(oQuery3); // 获取所有div标签
var oQuery4 = document.querySelectorAll('div');
console.log(oQuery4); // 通过属性和属性值获取
// 语法 : (’[属性=“属性值”]’)
// 获取name属性值是s的标签
var oQuery5 = document.querySelectorAll('[name="s"]');
console.log(oQuery5); // 获取type属性值是text的标签
var oQuery6 = document.querySelectorAll('[type="text"]');
console.log(oQuery6); // 还可以通过标签结构,获取
// ul标签中,子级li标签
// 只要是css语法支持的选择器语法都行
// 父子,后代,兄弟…都支持
var oQuery7 = document.querySelectorAll('ul>li');
console.log(oQuery7);
DOM操作之设定标签属性
-
<div>我是div</div> <script> //获取标签 var oDiv = document.querySelector('div'); // 给 div 标签,添加属性index 属性值是0 oDiv.setAttribute('index' , 0); oDiv.setAttribute('key' , '第一个div'); // 获取标签属性的属性值 console.log( oDiv.getAttribute('index') );//0 // 标签对象.id = 属性值 设定id属性的属性值 oDiv.id = 'div1'; // 标签对象.className = 属性值 设定class属性的属性值 oDiv.className = 'div2'; // 标签对象.id 获取标签对象,id属性值 console.log( oDiv.id ) // 标签对象.className 获取标签对象,class属性值 console.log( oDiv.className ) // 总结 // 1,可以通过 setAttribute() 设定标签所有的属性 包括 id , class // 可以通过 getAttribute() 获取所有标签的属性的属性值 包括 id , class // 所有的属性,设定或者获取,都建议,通过set,get完成 // 2,id和class属性可以直接通过 标签对象.id和标签对象.className来设定或者获取 // 3,根据不同版本的浏览器,有一些不在标签对象本身属性上的,也可以直接设定 // 例如 name , titile // 但是因为浏览器兼容问题,推荐还是使用set,get // 4,这里属性值的设定,是替换操作,会覆盖之前的设定属性 而不是新增添加属性操作
循环遍历添加事件
-
<body> <ul> <li>我是第一个li</li> <li>我是第二个li</li> <li>我是第三个li</li> <li>我是第四个li</li> <li>我是第五个li</li> </ul> <script> // 通过循环遍历,给标签添加事件/操作 // 1,获取标签对象的集合,也就是数组形式的 var oLis = document.querySelectorAll('li'); console.log(oLis); // 2,通过 forEach() 等 方式,循环遍历数组中的对象,给这些标签,添加设定/绑定事件 // 定义的第一个形参,存储的是数组的数据对象,也就是li标签 oLis.forEach(function( itme ){ itme.onclick = function(){ // 输出的是相同的内容 console.log(123); } }) // 通过循环,每次对一个标签进行操作 // 循环结束,对数组中存储的所有标签,都进行操作 // 给数组中的所有标签都绑定 click 事件 </script> </body>
value属性
-
value属性 设定标签的数据/参数 属性 input select textarea input : text password url email number..... 可以输入数据的输入框 value属性,可以获取输入的数据内容 获取的结果都是字符串类型 radio checkbox hidden .... 不能通过输入,来输入数据 只能是通过 标签的 value属性,来设定标签的数据/参数 value获取的就是 标签 value属性 设定的数据 select>option 是一个组合,必须捆绑使用 value属性,定义在option标签上 获取,是通过select标签的value来获取 还有两个特殊的, input>file textarea input>file 不支持在标签中定义value属性 获取结果是空字符串 只能通过选择上传内容,来定义上传的文件等 textatea 不支持在标签中定义value属性 -
<body> <input type="file" value="12345"><br> <button name="btn1">点击</button> <textarea value="12345">请您在此留言</textarea><br> <button name="btn2">点击</button> <script> var oBtn1 = document.querySelector('[name="btn1"]'); oBtn1.onclick = function(){ var oFile = document.querySelector('[type="file"]'); // 设定在标签内部的value属性,不起作用的,获取的结果是 空字符串 // 通过点击选择上传内容之后,可以通过value属性,正确获取数据参数 console.log(oFile.value); } var oBtn2 = document.querySelector('[name="btn2"]'); oBtn2.onclick = function(){ var oText = document.querySelector('textarea'); // 设定在标签内部的value属性,不起作用的,获取的结果是 空字符串 // 设定标签内容,或者写入内容之后,可以通过value属性获取标签数据 console.log(oText.value); } </script> </body>
注意:
在事件中:forEach 可以使用 参数1 , 也可以使用this
for/for…in 只能使用this方法,不能使用 伪数组[下标]
-
<script> oLis.forEach(function(item){ item.onclick = function(){ // 事件中 // itme可以直接使用,获取触发点击事件的标签的属性 console.log( item.getAttribute('index') ); } }) for(var i = 0 ; i <= oLis.length-1 ; i++){ oLis[i].onclick = function(){ // 事件中 console.log( this.getAttribute('index') ); } } </script>
DOM操作之标签的样式
-
<style> div{ font-size: 50px; color: green; } </style> <body> <div style="background:blue">北京</div> <script> var oDiv = document.querySelector('div'); // 设定的是标签的行内样式 oDiv.style.color = 'red'; // 行内样式,正确获取 console.log( oDiv.style.color ); console.log( oDiv.style.background ); // 非行内样式,获取的结果是空字符串 console.log( oDiv.style.fontSize ); // 获取标签执行的样式属性 // 不管行内还是非行内,获取的是,最终执行的样式属性值 // 例如: 外部样式,被行内样式优先级 覆盖, // 获取的结果,就是最终执行的 行内样式 // 一般浏览器 指的是 非低版本IE浏览器 // window.getComputedStyle(标签对象).属性 // 低版本IE浏览器方法 // 标签对象.currentStyle.属性 // 获取的是标签最终执行的样式的属性值 // 如果是颜色,获取的是 rgb() 的形式 // 兼容处理方案 // 使用if方法,只有支持的才会执行,不支持的不会执行,不会有报错 if(window.getComputedStyle){ //浏览器没有window.getComputeStyle 显示判断为undefined 为false // 支持 window.getComputedStyle 的浏览器会执行这里的代码 // 一般浏览器会执行这里的代码 console.log(window.getComputedStyle(oDiv).fontSize); }else{ // 不支持 window.getComputedStyle 的会执行这里的代码 // 低本IE浏览器,会执行这里的代码 console.log(oDiv.currentStyle.fontSize); }
特殊标签的获取方式
-
<script> // 特殊标签的获取方式 // 不是写在body内的标签 // body标签 // document.body console.log(document.body); // head标签 // document.head console.log(document.head); // titile标签 // document.title console.log(document.title); // html标签 // document.documentElement console.log(document.documentElement); </script>
DOM操作之获取元素占位
css样式占位,盒子模型
-
<script> // offsetHeight offsetWidth // 高/宽 + padding + border // clientHeight clientWidth // 高/宽 + padding // clientLeft clientTop // 左/上 border // offsetLeft offsetTop // 左/上 margin // 如果设定了 box-sizing: border-box; // 边框线,margin的数据是不受影响的 // clientHeight clientWidth // 高/宽 + padding ---> width/height - border // 实际就是 定义 width/height - border // offsetHeight offsetWidth // 高/宽 + padding + border ---> width / height // 实际就是 定义的 width / height 数值 console.dir(oDiv) // 边框线和外边距不能设定,要通过style来设定 // 也是不能设定的 oDiv.offsetHeight = '300px'; oDiv.clientHeight = '300px'; // 不能设定 oDiv.clientLeft = '100px'; oDiv.offsetLeft = '100px'; // style可以设定 boder 和 margin oDiv.style.borderLeft = '100px solid red'; oDiv.style.marginLeft = '100px'; </script>
扫一扫
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
