2020/08/03~08/09周报

小咪咪 2022-11-25 11:43 186阅读 0赞

【本周任务】

## BOM ##

##### window对象 #####

1.BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，  
它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。  
（1）全局变量不可以通过delete删除，但是window对象上直接定义的属性可以。  
（2）尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。  
2.窗口位置screenTop、screenLeft  
screenTop:浏览器窗口相对于电脑窗口上边的位置  
screenLeft：浏览器窗口相对于电脑窗口左边的位置  
调整位置：  
moveTo()接收的是新位置的 x 和 y 坐标值  
moveBy()接收的是在水平和垂直方向上移动的像素数  
3.窗口大小innerWidth、innerHeight、outerWidth、outerHeight  
innerWidth、innerHeight：返回页面可视区大小（减去了边框）  
outerWidth、outerHeight： 返回浏览器本身的尺寸  
clientWidth、clientHeight：保存了页面视口信息

documetn.documentElement.clientWidth
    document.documentElement.clientHeight

调整大小：  
resizeTo(X,Y):接收的是新的宽和高  
resizeBy(X,Y):接收的是高度差，如果X,Y是正的，就在原有宽高上加上这么多，如果是负的就减去这么多  
4.导航和打开窗口window.open()，window.close()仅适用于通过 window.open()打开的弹出窗口  
window.open()可以接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

//打开页面
    <input type="button" value="open" οnclick="window.open('close.html'); "/>
    //关闭页面
    <input type="button" value="close" οnclick="window.close()"/>

5.间歇调用和超时调用  
（1）间歇调用  
设置间歇调用的方法是 setInterval()，要执行的代码（字符串或函数）和每次执行之前需要等待的毫秒数。  
setInterval(代码，毫秒数)：返回一个数值ID  
（2）超时调用  
超时调用需要使用 window 对象的 setTimeout()方法，它接受两个参数：要执行的代码和以毫秒  
表示的时间（即在执行代码前需要等待多少毫秒）  
setTimeout(代码，毫秒数)：返回一个数值ID  
6.系统对话框  
（1）alert（"hello world "）；  
（2）confirm(“hello world”);  
（3）prompt()；  
![在这里插入图片描述][20200808165014956.png]  
![在这里插入图片描述][20200808165022511.png]

![在这里插入图片描述][20200808165041536.png]

##### location对象 #####

location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一  
些导航功能。  
assign()方法并为其传递一个 URL  
location.assign(“http://www.wrox.com”);

##### navigator对象 #####

window.navigator.userAgent
    alert(window.navigator.userAgent); //判断浏览器类型

##### BOM 中还有两个对象：screen 和 history，但它们的功能有限。screen 对象中保存着与客户端显示器有关的信息，这些信息一般只用于站点分析。history 对象为访问浏览器的历史记录开了一个小缝隙，开发人员可以据此判断历史记录的数量，也可以在历史记录中向后或向前导航到任意页面 #####

## DOM ##

DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

##### 节点层次 #####

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。  
1、Node类型  
结点类型都继承自node类型，结点类型由在node类型中定义的12个常量值表示。文档中所有的节点之间都存在这样或那样的关系。节点间的各种关系可以用传统的家族关系来描  
述，相当于把文档树比喻成家谱。

每个结点都有一个childNodes属性，访问childNodes属性可以用  
someChild.childNodes\[0\]或someChild.childNodes.item(0)  
每个结点都有一个parentNodes属性，与childNodes属性访问方式相同  
children与childNodes类似，但它只对元素结点有操作，不会对文本结点进行操作  
parentNode：是指某一元素在结构上的父级，是固定的，不同情况不会有区别  
offsetNode：是指已定位的父级，不一定是结构上的父级，会改变

收尾子节点：firstElementChild、lastElementChild  
兄弟节点：  
nextSibing、nextElementSibing  
preciousSibing、previousElementSibing

DOM操纵结点：  
appendChild()，用于向 childNodes 列表的末尾添加一个节点。  
insertBefore()，这个方法接受两个参数：要插入的节点和作为参照的节点。  
replaceChild()方法接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个  
方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

其他方法：  
cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个布尔值参数，表示是否执行深复制。  
normalize()，这个方法唯一的作用就是处理文档树中的文本节点。

2、document类型  
（1）文档的子节点：  
DocumentType、Element、ProcessingInstruction、Commom  
（2）文档信息：document . title：包含的是< title >的内容通过这个属性可以取得当前页面的  
标题，也可以修改当前页面的标题并反映在浏览器的标题栏中  
（3）查找元素  
（a）getElementById（）；  
（b）getELementsByTagName（）；  
（4）文档写入  
（a）两个都接收的是字符串，只不过第二个会自动添加 \\n  
write（）；  
writeIn（）；  
（b）打开和关闭网页  
open（）；  
close（）；

3.Element类型  
（a）子节点：Element、Text、Comment、ProcessingInstruction、CDATASection 或  
EntityReference  
（b）HTML元素  
所有 HTML 元素都由 HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表示。  
id：元素的唯一标识符  
title：元素的附加说明  
lang：元素的语言代码  
dir：语言的方向  
className:与元素的class 特性对应  
（c）获取特性：getAttribute（）；  
（d）设置特性：setAttribute（）；  
（e）删除：removeAttribute（）；  
（f）创建元素：createElement（）；

4.Text类型（纯文本内容）  
文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML 字符，但不能包含 HTML 代码。  
（a）创建文本节点：document.createTextNode（），这个方法接受一个参数——要插入节点中的文本。  
（b）normallize():在包含两个或多个文本元素的父节点上调用该方法，会把许多文本节点合并成一个  
（c）splitText():将一个吻吧分成两个文本节点，按照指定位置分隔

5.Comment类型  
注释在 DOM 中是通过 Comment 类型来表示的。  
Comment 类型与 Text 类型继承自相同的基类，因此它拥有除 splitText()之外的所有字符串操作方法。与 Text 类型相似，也可以通过 nodeValue 或 data 属性来取得注释的内容。  
使用 document.createComment()并为其传递注释文本也可以创建注释节点。

6.CDATASection类型  
CDATASection 类型只针对基于 XML 的文档，表示的是 CDATA 区域。与 Comment 类似，CDATASection 类型继承自 Text 类型，因此拥有除 splitText()之外的所有字符串操作方法。

7.DocumentType类型  
DocumentType 类型在 Web 浏览器中并不常用，仅有 Firefox、Safari 和 Opera 支持它。

8.DocumentFragment类型  
在所有节点类型中，只有 DocumentFragment 在文档中没有对应的标记。DOM 规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用  
额外的资源。  
创建文档片段：document.createDocumentFragment();  
可以通过appendChild()和insertBefore()把文档片段添加到文档中

9.Attr类型  
（a）方法：getAttribute()、setAttribute()、removeAttribute()  
（b）属性：  
name:特性名称  
value:特性的值  
specified:布尔值，用来区别特性是在代码中是指定的还是默认的

## 事件 ##

JavaScript 与 HTML 之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

##### 事件流 #####

1.事件冒泡：  
IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深  
的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。  
2.事件捕获：  
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。  
3.DOM事件流  
事件流包含三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

##### 事件处理程序 #####

事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover，都是事件的名字。  
而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头，因此click 事件的事件处理程序就是 onclick，load 事件的事件处理程序就是 onload。为事件指定处理  
程序的方式有好几种。  
1.DOM0级处理程序  
将一个函数赋值给一个事件处理程序属性

btn.οnclick=onClick(); //添加事件
    //btn.οnclick=null; //删除事件处理程序

2.DOM2级处理程序  
用于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。添加处理指定和删除事件处理程序

btn.addEventListener("click", onClick, false); //添加事件
    btn.removeEventListener("click", onClick, false); //移除事件

3、IE事件处理程序  
IE 实现了与 DOM 中类似的两个方法：attachEvent()和 detachEvent()。这两个方法接受相同  
的两个参数：事件处理程序名称与事件处理程序函数。

##### 事件对象 #####

在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的  
信息。

##### 事件类型 #####

###### UI事件 ######

1、load事件  
当页面完全加载后(包括所有图像、javascript文件、CSS文件等外部资源)，就会触发window上的load事件

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Load Event Example</title> 
    </head> 
    <body onload="alert('Loaded!')"> 
    </body> 
    </html> 
    LoadEventExample02.htm

2.unload事件  
该事件在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面，就会触发unload事件。

//使用JavaScript：
    EventUtil.addHandler(window,"unload",function(){
        alert("Unload");
    });
    //第二种方法，为body元素添加一个特性
    <!DOCTYPE html>
    <html>
    <head>
        <titile>Unload Event Example</title>
    </head>
    <body onunload = "alert('Unloaded!')">
    </body>
    </html>

3.resize事件  
当浏览器窗口被调整到一个新的高度或宽度时，就会触发 resize 事件。

EventUtil.addHandler(window, "resize", function () {
        alert("Resized");
    });

4、scroll事件

###### 焦点事件 ######

焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与 document.hasFocus()方法及  
document.activeElement 属性配合，可以知晓用户在页面上的行踪。有以下 6 个焦点事件。

1.blur:在元素失去焦点时触发。这个事件不会冒泡。所有浏览器都支持他。  
2.DOMFocusIn:在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。只有Opera支持这个事件。ＤＯＭ３级事件肥企鹅了DOMfocusIn,选择了focusin.  
3.DOMFocusOut:在元素失去焦点时触发。这个事件是ＨＴＭＬ事件blur的通用版本。只有Opera支持这个事件。DOM3 级事件废弃了 DOMFocusOut,选择了focusout.  
4.focus:在元素获得焦点时触发，这个事件不会冒泡，所有浏览器都支持他。  
5.focusin:在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。支持这个事件的浏览器有IE5.5+，Safari5.1+、Opera11.5+和Chrome  
6.focusout:在元素失去焦点时触发，这个事件是HTML事件blur的通用版本。  
当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：  
(1) focusout 在失去焦点的元素上触发；  
(2) focusin 在获得焦点的元素上触发；  
(3) blur 在失去焦点的元素上触发；  
(4) DOMFocusOut 在失去焦点的元素上触发；  
(5) focus 在获得焦点的元素上触发；  
(6) DOMFocusIn 在获得焦点的元素上触发。

###### 鼠标事件 ######

1.click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保  
易访问性很重要，意味着 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。  
2.dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。从技术上说，这个事件并不  
是 DOM2 级事件规范中规定的，但鉴于它得到了广泛支持，所以 DOM3 级事件将其纳入了标准。  
3.mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。  
4.mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且  
在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件，但 DOM3 级事件将它  
纳入了规范。IE、Firefox 9+和 Opera 支持这个事件。  
5.mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且  
在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件，但 DOM3 级事件将它  
纳入了规范。IE、Firefox 9+和 Opera 支持这个事件。  
6.mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。  
7.mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另  
一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。  
8.mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触  
发。不能通过键盘触发这个事件。  
9.mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

###### 键盘事件 ######

1.keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。  
2.keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。  
按下 Esc 键也会触发这个事件。Safari 3.1 之前的版本也会在用户按下非字符键时触发 keypress  
事件。  
3.keyup：当用户释放键盘上的键时触发

[20200808165014956.png]: /images/20221124/cc3e1d6b6b4f4304b531402560e2c76a.png
[20200808165022511.png]: /images/20221124/0aecc444a1d34150a5b319a596dc2413.png
[20200808165041536.png]: /images/20221124/b033dbe7a1584c289e7fd0d369fe2a73.png