前端随心记---------Javascript系列（第八节.BOM）

Posted 2021-03-25 叩首问路 码梦人生

BOM: browser object model 浏览器对象模型 

window 对象的子对象,也是属性

window document:浏览器是代表html的文档对象.
history
location: url对象
screen
navigator

window对象的常见属性和方法:

三个弹出框(内置方法,特点: 都会阻塞浏览器代码执行);
alert( ); 弹出框
confirm( ); 确认框
prompt( ); 输入框

两个定时器;
setInterval( );
setTimeout( );

一个弹窗方法; (window.+)
open("路径","_blank","弹出窗口外观");外观:width height left top
返回值:弹出的子窗口
特点:子窗口和父窗口可以交互操作;
opener:根据子窗口查找父窗口.
close( ):   关闭窗口 focus( )获取焦点;
closed( ):   判断某个窗口是否被关闭,关闭返回true,否则返回false.
window.onscroll   滚动条事件
window.onunload
window.onresize   窗口重置


属性:所有的自定义全局变量都是window对象的属性
方法:所有的自定义全局变量函数都是window对象的方法
全局属性和方法都可以省略window,直接使用即可.

 location:url对象 页面跳转
location.href: href:属性可读写 获取或设置当前页面的url
location.replace("rul"): 替换页面,破坏了前进后退
loacation.assign("url");
页面刷新
location.reload( ); 页面刷新
decodeURI( ) 解码
encodeURI( ) 转码


 history对象
history.go(1) /forward( ); 前进
history.go(-1) /backe( ); 后退
history.go(0) 刷新

 document 文档对象
document.write( ); 通过事件触发后,输出的内容会将页面原内容覆盖.
document.querySelector("css的选择器"); 新增方法,低版本ie7不支持,根据选择器查找一个节点.始终得到选择器的第一个元素。class用点 id用#连接
注意：后代选择器
上一级>下一级标签
document.querySelectorAll("css的选择器"):根据选择器查找元素,返回一个节点集合.考虑兼容性ie7不支持。
document.getElmentById( id的名称 ). 通过元素 id 来查找元素
document.getElenmentsByTagName( 节点名称 ) 集合类型 通过标签名(li 等标签)来查找元素
document.getElementByName( name名 ) :操作表单元素.行内属性
document.getElementsByClassName( name名 ); 通过类名class来查找元素 ie8不兼容

 页面元素操作
操作属性 obj.属性
操作样式 obj.style.样式=值
obj.style.cssText=" ";
obj.className="类名" ;
操作内容
innerHTML; 内容中如果有标签,可以被浏览器解析
innerText; 设置纯文本( 火狐不支持,textContent)
outerHTML;
value;