JavaScript BOMDOM

BOM

window、document、location、navigator 和 screen等，把它们统称为BOM（Browser Object Model，浏览器对象模型）

window对象

window对象位于BOM的顶层。由浏览器创建，也对应JavaScript本地对象Global ；var声明的全局变量属于window对象的属性；全局函数也属于window对象的属性；

打开新窗口

window.open([url] [, name] [, options]) options参数可选 -> height: 窗口的高度，单位为像素； width：窗口的宽度，单位为像素； left：窗口的左边缘位置； top：窗口的上边缘位置；

系统对话框

window.alert([message]) alert()接受一个参数，即弹出对话框要显示的内容。调用alert()语句后浏览器将创建一个单按钮的消息框。

window.confirm([message]) 该方法显示一个确认提示框，其中包括“确定”和“取消”按钮。用户单击“确定” / “取消”按钮时，window.confirm返回true / false；

window.prompt([message] [, default]) 该方法将显示一个消息提示框，接受两个参数（第1个参数是显示给用户的文本，第二个参数为文本框中的默认值）。点击“确定” / “取消” 返回用户输入的字符串 / null ；

定时操作

①周期性地执行脚本：每隔一段时间执行一次脚本；setInterval：[定时器名=] setInterval (<表达式或函数对象> ，毫秒) clearInterval：终止/清除定时器格式： clearInterval(定时器名)

②将某个操作延时一段时间执行； setTimeout：[定时器名=] setTimeout(<表达式或函数对象>，毫秒) clearTimeout：终止/清除定时器格式： clearTimeout(定时器名)

地址栏控制（location对象）

主要是分析和设置页面的 URL 地址，它是 window 对象和 document 对象的属性，为同一对象；

herf 属性

location对象的 href 属性表示当前文档的URL地址：window.location.href = "http://www.baidu.com" 执行后将跳转到百度的主页；

replace()方法

replace()方法，该方法也能转到指定的页面，但不能返回到原来的页面了：window.location.replace ( “http://www.baidu.com” ) 执行后将跳转到百度的主页，并且不能通过【后退】按钮退回到上一页；

history属性

可以访问历史页面，但不能获取到历史页面的URL；

如果希望浏览器返回前一页： history.go(-1); 或 history.back(); 如果希望前进一页： history.go(1); 或 history.forward(); 如果希望刷新显示当前页： history.go(0); 或 history.refresh

navigator对象

navigator对象是用来检测客户端浏览器的类型、版本以及操作系统的类型等信息；

最常用的属性userAgent，可以判读浏览器及操作系统 document.write(navigator.userAgent);

screen对象

返回当前渲染窗口中和屏幕有关的属性：主要用来获取用户电脑的屏幕信息，包括屏幕的分辨率，屏幕的颜色位数，窗口可显示的最大尺寸；

DOM

DOM（Document Object Model）文档对象模型用于将每个 HTML 文档描述成文档对象；

节点

每一个节点表示一个Node对象，可以通过 nodeType 属性来获取节点类型，常见节点类型包括：

Document类型：表示整个HTML页面文档，document对象也是window对象的一个属性，可以作为全局对象来访问；

Element类型：元素节点，通过访问其id、title等属性，可以获得该节点的相关属性信息； (Element Node ), <html>,<head>、<body>、<p>和<ul>等标签都是元素节点。

Attr类型：属性节点；属性节点(Attribute Node)，属性节点总是被包含在元素节点当中，可以通过元素节点对象调用 getAttribute( ) 方法来获取属性节点。

Text类型：纯文本节点，不包含HTML代码；文本节点(Text Node),文本节点包含在元素节点内，如h1、p等节点就可以包含一些文本节点；

DOM获取元素结点

通过 getElementById ( ) 方法访问节点 var s=document.getElementById(id);

通过 getElementsByName ( ) 方法访问节点 var s=document.getElementsByName(name);

通过 getElementsByTagName ( ) 方法 var s=document.getElementsByTagName(tagname);

通过 querySelector ( ) 方法访问节点返回与指定选择器或选择器组匹配的第一个 HTMLElement对象。如果找不到匹配项，则返回null。 var s=document. querySelector(selectors);

通过 querySelectorAll ( )方法访问节点返回与指定选择器或选择器组匹配的所有 HTMLElement对象组成的 NodeList 对象。如果找不到匹配项，则返回空NodeList。 var s=document. querySelectorAll(selectors)

DOM节点操作

创建新元素分为两个步骤：首先通过 createElement() 方法创建元素，然后通过 appendChild() 方法添加新节点。例如,在id为“myForm”的表单中添加一个文本框:

<form id="myForm"></form>
<script>let newNode = document.createElement("input");newNode.type = "text";newNode.name = "username";document.getElementById("myForm").appendChild(newNode);
</script>

节点属性访问

访问 html | body结点： html结点：document.documentElement ；body结点：document.body 访问子结结点：子结点列表：childNodes 第一个子结点：firstChild 最后一个子结点：lastChild；访问父结点 parentNode 属性，用于访问该结点的父结点；访问兄弟结点 ->上一个兄弟结点：previousSibling ；下一个兄弟结点：nextSibling；

InnerText：元素中的内容，但它将去除HTML标签，可读、可写该属性；

innerHTML: 元素中的全部内容,包括HTML标签。可读、可写该属性

DOM事件

事件类型

DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程称为DOM事件流；

事件顺序有两种类型：事件捕获和事件冒泡；事件冒泡和事件捕获都是一种事件传递的机制，可以使事件在不同级的元素间传递。事件冒泡是从事件触发的源节点，向父节点传递，直到到达最顶节点。而事件捕获则是从最顶节点，逐步向下传递，直到到达事件触发的源节点。

DOM标准同时支持捕获型事件与冒泡型事件，但是捕获型事件先发生；

事件流会从 document对象开始，也在 document对象结束（大部分兼容标准的浏览器会继续将事件捕捉/冒泡延续到 window对象）：首先是捕获式传递事件，接着是冒泡式传递；所以，如果一个处理函数既注册了捕获型事件的监听，又注册冒泡型事件监听，那么在DOM事件模型中它就会被调用两次。

事件绑定

事件句柄方式

HTML事件处理

DOM 0级事件处理

需要首先获得要进行事件处理的对象的引用，然后将函数赋值给对应的事件句柄（事件属性）：

事件句柄优点：简单方便，在HTML中直接书写处理函数的代码块，在JS中给元素对应事件属性赋值即可；

缺点：事件句柄时一次只能有一个事件处理函数，如要为同一事件注册多个事件处理函数，就不能采用这方法

事件监听器方式

这种处理方式就不受一个元素同一事件句柄只能绑定一次的限制【DOM 2级事件处理程】

两者区别：使用事件句柄时一次只能有一个事件处理函数，但对于事件监听器，一次可以添加多个事件处理函数；

在支持DOM 2级标准的浏览器中，可以使用 addEventListener 方法。该方法既支持注册冒泡型事件处理，又支持捕获型事件处理。移除已注册的事件监听器调用 element 的 removeEventListener方法即可，参数相同；

addEventListener 方法接受三个参数：

第①个参数是事件类型名，这里事件类型名称与事件句柄不同，事件类型名称不以 on开头; 第②个参数 eventListener 是回调处理函数（即监听器函数）; 第③个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用。此参数为 false 时在事件冒泡阶段调用，如果设置为 true，就表示创建一个捕捉事件监听器。

事件对象

在DOM中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型、与特定事件相关的任何其他数据；

在事件处理函数内部，可能会看到一个固定指定名称的参数，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。事件对象是传给事件处理程序的唯一参数；

事件对象的属性

currentTarget：当前事件处理程序所在的元素； target：事件目标,返回引发事件的元素的引用； type：被触发的事件类型；键盘事件的事件对象：keyCode、ctrlKey、key …… 鼠标事件的事件对象：clientX、clientY、offsetX、offsetY ……

阻止事件的默认行为

（1）调用event对象的 preventDefault() 方法

（2）(事件句柄的)事件处理函数返回false ；(HTML标记的)事件句柄属性=“return 函数名(参数);"

浏览器根据返回值的类型决定下一步如何操作。当返回值为 true，进行默认操作；当返回值为 false，阻止浏览器的下一步操作；

阻止事件传播

通过调用 event 对象的 stopPropagation 方法将阻止事件在DOM结构中传播，取消后续的事件捕获或冒泡。但是它不能防止任何默认行为的发生；例如，对链接的点击仍会被处理。如果要停止这些行为，使用 preventDefault() 方法，它可以阻止事件触发后默认动作的发生。它也不能阻止附加到相同元素的相同事件类型的其它事件处理器，如果要阻止这些处理器的运行，请参见 stopImmediatePropagation() 方法；