浏览器window对象常用属性及方法有哪些

admin 管理员组

文章数量: 887017

一、BOM的概念
1.1 什么是BOM?
       BOM：Browser Object Model 是浏览器对象模型，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象也是核心对象，其他对象都是该对象的子对象。

1.2 BOM包含哪些内容？
      浏览器介绍BOM对象包含(1)window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是
(1)   window 对象的属性。
(2)   location 对象，浏览器当前URL信息；
(3)   navigator 对象，浏览器本身信息；
(4)   screen 对象，客户端屏幕信息；
(5)   history 对象，浏览器访问历史信息；
(6)   document 对象，文档对象；

1.3 BOM和DOM的关系

(1)DOM通过document对象来访问、控制、修改html和xhtml等文档中的内容

(2)BOM通过 window 对象来访问、控制、修改浏览器中的内容

联系：BOM包含DOM。区别：DOM描述了处理网页内容的方法和接口，即操作页面内部

BOM描述了与浏览器进行交互的方法和接口，即操作页面之间

二、 window对象中常用的属性

        在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
       所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
      全局变量是 window 对象的属性。
      全局函数是 window 对象的方法。

2.1 window对象

因为window对象是js中的顶级对象，因此所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。
例如：
打开窗口 window.open(url); 【等价于open(url);】
关闭窗口 window.close(); 【等价于close();】
获取事件 window.event 【等价于event;】
获取文档 window.document 【等价于document】
window对象中常用的方法：

alert()方法，信息提示窗口
prompt()方法，可以输入信息的提示窗口，带返回值（返回输入的内容）
confirm()方法，确认窗口，有返回值（返回布尔）
open()、close()方法，打开、关闭窗口
resizeBy()、resizeTo() 重设窗口大小。
scrollBy()、scrollTo() 滚动当前窗口中的HTML文档。
setTimeout()、clearTimeout() 设置、删除定时器。
closed 该属性返回-一个 boolean值，用于判断该窗口是否处于关闭状态。
frames[] 返回该窗口内包含的Frame对象，每个Frame对象又是一个window对象。
history 返回该窗口的浏览历史。
location 返回该窗口装载的HTML文档的URL
navigator 返回浏览当前页面的浏览器。
parent 如果当前窗口是一个Frame,则该属性返回包含本Frame的窗口, 即该Frame的直接父窗口。
screen 返回当前浏览者的屏幕对象。
self 返回自身。
top 如果当前窗口是-一个Frame，则该属性指向包含本Frame的顶级父窗口。
setInterval()、clearlnterval() 也是设置定时器。推荐使用setInterval() 和clearlnterval ()。
moveBy()、moveTo() 移动窗口。
defaultStatus、status 返回浏览器状态栏的文本
name 返回该窗口的名字。
print() 打印当前窗口或Frame。
document 返回该窗口内装载的HTML文档

addEventListner() 来添加事件监听器

//element.addEventListener(event, function, options);
window.addEventListener("click", function() {
    console.log("Hello World!");
});

// options参数是一个可选对象，通常用于指定在事件发生时向事件处理程序传递哪些特定信息。该参数具有以下三个属性：

//    capture：如果该值为 true，则表示在事件流的捕获阶段调用事件监听器，默认值为 false。
//    once：如果该值为 true，则表示事件监听器最多只调用一次，在调用后会自动被删除，默认值为false。
//    passive：如果该值为 true，则表示事件监听器不会调用 preventDefault()。该属性只适用于 //passive事件监听器，一些用户代理会将其优化以改善滚动性能。

//例如，下面是一个将passive属性设置为true的scroll事件监听器的示例：
window.addEventListener("scroll", function() {
console.log("Scrolled!");
}, {
    passive: true
});

 window.removeEventListener 删除添加事件

function fn(){
console.log('我在滚动')
}
window.addEventListener('scroll', fn, true);
window.removeEventListener('scroll', fn, true)

2.2.1 window名称（name）属性

       window.name是window对象的一个属性，默认值为空。特性：window.name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的name值（2MB左右）
     window.screenX 浏览器距离屏幕的横向距离
      window.screenY 浏览器距离屏幕的纵向距离

2.2.2 window尺寸属性
window.outerHeight  属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
window.outerWidth   属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动条）。
window.innerheight  返回窗口的文档显示区的高度。
window.innerwidth   返回窗口的文档显示区的宽度。

2.2.3 window.navigator对象

window.navigator  对象包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用。（这个对象和event一样是一个全局变量，并且是唯一的）
navigator.appCodeName  浏览器代码名的字符串表示
navigator.appName    官方浏览器名的字符串表示
navigator.appVersion   浏览器版本信息的字符串表示
navigator.userAgent     返回和浏览器内核相关的信息
navigator.cookieEnabled  如果启用cookie返回true，否则返回false
navigator.javaEnabled()  如果启用java返回true，否则返回false
navigator.platform 浏览器所在计算机平台的字符串表示
navigator.plugins  安装在浏览器中的插件数组
注：如果window.navigator.userAgent出现了Mobile，可以确定用户使用的是移动设备。

2.2.4 Location 对象
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）

2.2.6 screen对象

注意：没有应用于screen 对象的公开标准，不过所有浏览器都支持该对象。
screen.availHeight     返回屏幕的高度（不包括Windows任务栏）
screen.availWidth     返回屏幕的宽度（不包括Windows任务栏）
screen.colorDepth     返回目标设备或缓冲器上的调色板的比特深度
screen.height         返回屏幕的总高度
screen.pixelDepth     返回屏幕的颜色分辨率（每象素的位数）
screen.width         返回屏幕的总宽度

2.2.7 document对象

getElementById()    返回对拥有指定id的第一个对象的引用
getElementsByName()    返回带有指定名称的对象集合
getElementsByClassName()    返回文档中所有指定类名的元素集合，作为NodeList对象
getElementsByTagName()    返回带有指定标签名的对象集合
querySelector()           返回文档中匹配指定的CSS选择器的第一元素
querySelectorAll()    document.querySelectorAll()是HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

document.createElement(tagname)   创建html标签，并显示在页面上

document.createElement("");              创建元素节点
document.body.appendChild("");           向节点最后添加一个子节点
document.createTextNode("文本")          创建一个文本节点
documnet.createAttribute("style")        创建一个属性节点
setAttributeNode()                       用于添加新的属性节点。
getAttribute( "属性名");                 通过名称获取属性的值
setAttribute("属性名" ,"属性值")         添加指定的属性，并为其赋指定的值
removAttribute("属性名")                 删除元素的属性值

element.getAttribute() 返回元素节点的指定属性值。
element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
element.id   设置或返回元素的 id。
element.removeAttribute() 从元素中移除指定属性。
element.setAttribute() 把指定属性设置或更改为指定值。
nodelist.length 返回 NodeList 中的节点数。

removeChild() 方法指定元素的某个指定的子节点。以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

const myList=document.getElementById("myList");
myList.removeChild(myList.childNodes[0]);

replaceChild() 方法用新节点替换某个子节点。这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。

document.getElementById("myList").replaceChild(newnode,oldnode);

本文标签： 属性 浏览器 对象 常用 方法