事件和BOM和DOM

一、事件

1.事件类型

onclick	点击事件
onload	加载事件
onblur	失焦事件
onfocus	聚焦事件
onchange	改变域事件
onmouseover	鼠标悬停事件
onmouseout	鼠标移开事件
onmousemove	鼠标移动事件
onkeyup	键盘松开事件
onkeydown	键盘按下事件
oninput	输入事件

事件流

事件捕获

先找到document对象，然后由大到小向下传播，直到事件源

事件冒泡

先找到事件源，由小到大向上传播，直到document对象

2.事件处理程序

事件：

事件源 html中的元素/标签

监听者 window窗口

事件名 onclick、onblur等...

事件处理程序 处理的函数

事件处理程序

事件处理程序的名字以“on”开头，因此 click 事件的事件处理程序就是 onclick

HTML 事件处理程序

耦合度高，不方便调试

三个参数：

事件名

处理函数

true或false true：事件捕获阶段调用事件处理程序 false：事件冒泡阶段调用事件处理程序

注意：

1、可以同时为一个元素绑定同一事件多次

2、还可删除事件处理函数，在删除的时候，不能删除匿名处理函数。

二、BOM

1.系统对话框

alert()

弹出一个带提示信息和确认按钮的弹出框

prompt()

输入框

参数一：显示的文本信息

参数二：文本框默认现实的饿文本

confirm()

确认框，有确认按钮和取消按钮，如果点击确认执行对应的函数

2.打开窗口

打开窗口

window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口

打开空白窗口

window.open();

打开模式：

_self、_blank、_parent、_top

3.关闭窗口

关闭窗口

window.close()

注：只能关闭被open()打开的窗口

4.时间函数

时间函数

setTimeout

var id = setTimeout(function,times)

在指定的毫秒数后调用函数或计算表达式。返回唯一标识符

参数一：要执行的函数

参数二：延时几秒执行，单位毫秒

clearTimeout(id):通过标识符来清除指定函数的执行

setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。

5.history 对象的属性：

length，返回浏览器历史列表中的 URL 数量。

history 对象的方法：

back()：加载 history 列表中的前一个 URL。

forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。

go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面

6.location 对象的属性

location 对象的属性 href：

设置或返回完整的 URL

location 对象的方法

reload()：重新加载当前文档。

replace()：用新的文档替换当前文档。

​
<script type="text/javascript">

// 得到当前访问的路径

var add = location.href;

console.log(add);

// 跳转到指定路径 (没有历史记录)

//location.href = "百度一下，你就知道";

//window.open("百度一下，你就知道","_self");

function reload2() {

location.reload(); //刷新页面}

function replace2() {

location.replace("百度一下，你就知道");}

</script>

​

7.document对象

<script type="text/javascript">

// 输出信息到浏览器中

document.write("Hello");

document.write("<h2>Hello</h2>");

</script>

三、DOM

1.节点

节点类型 HTML内容 例如

文档节点 文档本身 整个文档 document

元素节点 所有的 HTML 元素 <a>、<div>、<p>

属性节点 HTML 元素内的属性 id、href、name、class

文本节点 元素内的文本 hello

注释节点 HTML 中的注释 <!-- -- >

2.获取节点

注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:

（1）把 script 调用标签移到 html 末尾即可；

（2）使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS。

window.onload = function () { //预加载 html 后执行};

方法 描述

getElementById() 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准

getElementsByTagName() 根据标签名获取 dom 对象数组

getElementsByClassName() 根据样式名获取 dom 对象数组

getElementsByName() 根据 name 属性值获取 dom 对象数组，常用于多选获取值

设置属性

dom对象.属性名 = "属性值";

注：如果属性里面还有属性，dom对象.属性名.属性名 = "属性值";

一般场景，比如style属性：

dom对象.style.color="red" 设置字体颜色

3.创建节点

方法 描述

createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象

createTextNode() 创建一个文本节点，可以传入文本内容

innerHTML 也能达到创建节点的效果，直接添加到指定位置了

4.插入节点

方法 描述

write() 将任意的字符串插入到文档中

appendChild() 向元素中添加新的子节点，作为最后一个子节点

insertBefore() 向指定的已有的节点之前插入新的节点

newItem：要插入的节点

exsitingItem：参考节点

需要参考父节点

注：如果使用appendChild()方法追加时，被追加的元素是已经存在的元素，则会被直接剪切到指定位置

5.间接查找节点

方法|属性 描述

childNodes 返回元素的一个子节点的数组 属性 获取的是 文本节点和元素节点

firstChild 返回元素的第一个子节点 属性

lastChild 返回元素的最后一个子节点 属性

nextSibling 返回元素的下一个兄弟节点 属性

parentNode 返回元素的父节点 属性

previousSibling 返回元素的上一个兄弟节点 属性

6.替换节点

方法|属性 描述

replaceChild(newNode,oldNode) 用新的节点替换旧的节点

oldNode.parentNode.replaceChild(newNode,oldNode)

首先通过旧节点定位到父节点，然后用新的节点替换旧节点

替换时，原来的元素会被删除，所以替换只能执行一次

6.克隆节点

克隆节点

方法|属性 描述

cloneNode() 制节点

var 复制好的节点 = 被复制的节点.cloneNode([true/false]);

true：深度克隆，可以克隆结构和内容

false(默认值)：只克隆结构

7.删除节点

删除节点

方法|属性 描述

removeChild() 从元素中移除子节点

从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象