JavaScript之BOM与DOM操作

1. 事件
事件 (Event) 是 JavaScript 应⽤跳动的⼼脏 ，进⾏交互，使⽹⻚动起来。事件可能是⽤户在某些内容上的点击、⿏标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发⽣的事情。

• 作用 （1）验证⽤户输⼊的数据。 （2）增加⻚⾯的动感效果。 （3）增强⽤户的体验度。
• 事件中的几个名词 事件源: 谁触发的事件 事件名: 触发了什么事件 事件监听: 谁管这个事情，谁监视？ 事件处理: 发⽣了怎么办
• 事件类型 1.JavaScript可以处理的事件类型为： ⿏标事件、键盘事件、HTML事件。 2.Window事件属性：针对 window 对象触发的事件（应⽤到 标签）。 Form事件：由 HTML 表单内的动作触发的事件（应⽤到⼏乎所有 HTML 元素，但最常⽤在 form 元素中）。 Keyboard事件 : 键盘事件。 Mouse事件：由⿏标或类似⽤户动作触发的事件。 Media事件：由媒介（⽐如视频、图像和⾳频）触发的事件（适⽤于所有 HTML 元素，但常⻅于媒介元素中，⽐如 、、、 以及 ）。 3.常⽤的事件： onload：当⻚⾯或图像加载完后⽴即触发。 onblur：元素失去焦点。 onfocus：元素获得焦点。 onclick：⿏标点击某个对象。 onchange：⽤户改变域的内容。 onmouseover：⿏标移动到某个元素上。 onmouseout：⿏标从某个元素上离开。 onkeyup：某个键盘的键被松开。 onkeydown：某个键盘的键被按下。
• 事件流和事件模型 1.事件顺序有两种类型：事件捕获和事件冒泡。 2.冒泡和捕获其实都是事件流（⻚⾯接受事件的顺序）的不同表现。 3.IE的事件流是事件冒泡，Netscape的事件流是事件捕获流。 事件冒泡： 事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（⽂档）。 如果点击了⻚⾯中的<div>元素，click 事件⾸先在<div>元素上发⽣，⽽这个元素就是我们单击的元素。然后，click 事件沿DOM 树向上传播，在每⼀级节点上都会发⽣，直到传播到document对象。 事件捕获： 不太具体的节点应该更早接收到事件，⽽最具体的节点应该最后接收到事件。⽤意在于在事件到达预定⽬标之前捕获它。 单击 <div> 元素，document 对象⾸先接收到 click 事件，然后沿DOM树依次向下，⼀直传播到事件的实际⽬标，即 <div> 元素。 4.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于⽬标阶段和事件冒泡阶段。⾸先发⽣的是事件捕获阶段，为截获事件提供了机会。然后是实际的⽬标接收到事件。最后⼀个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
• 事件处理程序 事件就是⽤户或浏览器⾃身执⾏的某种动作。例如 click、load 和 mouseover 都是事件的名字，⽽响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头。 1.HTML事件处理程序：直接绑定在html元素中。 特点：与元素标签耦合度过高，可能存在时差问题。 使用方式： <button type="button" on事件名="处理程序">按钮</button> 2.DOM0级事件处理程序 特点：不能为同一个元素绑定同一个事件的多个处理程序，如果有，则进行覆盖。 使用方式： 1.通过id获取元素对象 var 变量名 = document.getElementById("元素的id属性值"); 2.通过元素对象绑定事件 变量名.on事件名 = function(){ //处理程序 } 3.DOM2 级事件处理程序 包括： 1.addEventListener 添加事件的监听 2.removeEventListener 移除事件监听 特点：可以为同一个元素绑定同一个事件的多个处理程序。 使用方式： 1.通过id获取元素对象 var 变量名 = document.getElementById("元素的id属性值"); 2.添加事件的监听 变量名.addEventListener('事件名',function(){ //处理程序 }); 或 变量名.addEventListener('事件名',函数名); 3.移除事件监听：只能移除有函数名的处理程序。 变量名.removeEventListener('事件',函数名); 注意： 1.所有DOM节点都包含这两个⽅法，并且他们都接受3个参数：要处理的事件名、作为事件处理程序的函数和⼀个布尔值。最后这个布尔值参数如果是true，则表示在捕获阶段调⽤事件处理程序；如果是false则表示在冒泡阶段调⽤事件处理程序。 2.在移除的时候，不能移除匿名处理函数。 3.事件中不建议使用alert对话框，它会阻止代码的运行。

2. BOM对象

• Window对象方法 1.系统对话框 （1）消息框: alert，常用。 alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。 （2）输入框: prompt，返回提示框中的值。 prompt() 方法用于显示可提示用户进行输入的对话框。 参数（可选）： 第一个参数：要在对话框中显示的纯文本。 第二个参数：默认的输入文本。 （3）确认框:confirm，返回 true/false. confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。 2.打开窗⼝ window.open(); 打开一个空的窗口。 window.open(url地址); 打开链接。 3.关闭窗口 window.close(); 关闭当前窗口。 4.时间函数 setTimeOut() 返回当前时间函数的唯一标识。 var 唯一标识 = setTimeout(function,times); 在指定times毫秒数之后执行函数/程序。 清除时间函数：clearTimeOut(唯一标识); setInterval() 返回当前时间函数的唯一标识 var 唯一标识 = setInterval(function,times); 以指定times毫秒数为周期，循环执行函数/程序。 清除时间函数：clearInterval(唯一标识);
• history对象 属性：length，返回浏览器历史列表中的URL数量。 方法： back() 加载 history列表中的前一个URL。 forward() 加载历史列表中的下一个URL。当页面第一次访问时，还没有下一个url。 go(number|URL) URL 参数使用的是要访问的URL。 number 参数使用的是要访问的URL在History的URL列表中的相对位置。 go(-1) 到上一个页面。
• location对象 属性：href，设置或返回完整的URL。 window.location.href 获取当前页面地址 方法： ​reload() 重新加载当前文档。 replace() 用新的文档替换当前文档。

3. DOM对象
（Document Object Model ）文档对象模型。

• 节点
• 获取节点 方法： getElementById() 根据id获取dom对象，如果id重复，那么以第一个为准 getElementsByTagName() 根据标签名获取dom对象数组 getElementsByClassName() 根据样式名获取dom对象数组 getElementsByName() 根据name属性值获取dom对象数组，常用于多选获取值 注意： 1.a标签正常会执行跳转的操作，设置href="javascript:void(0)" 表示伪协议，将不会跳转。 2.操作dom必须等节点初始化完毕后，才能执行。 处理方式两种: 1.把script调用标签移到html末尾即可. 2.使用onload事件来处理JS，等待html加载完毕再加载 onload事件里的JS。 window.onload = function(){}
• 创建节点和插入节点 1.创建节点 createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象。 createTextNode() 创建一个文本节点，可以传入文本内容。 innerHTML 也能达到创建节点的效果，直接添加到指定位置了。 2.插入节点 write() 将任意的字符串插入到文档中。 appendChild() 向元素中添加新的子节点，作为最后一个子节点 。 如果追加的元素不存在，则添加新的； 如果追加的元素存在，则会将原有的元素添加到新的位置（剪切）。 insertBefore() 向指定的已有的节点之前插入新的节点。 newItem：要插入的节点。 exsitingItem：参考节点，需要参考父节点。
• 间接查找节点 childNodes 返回元素的一个子节点的数组。 firstChild 返回元素的第一个子节点。 lastChild 返回元素的最后一个子节点。 nextSibling 返回元素的下一个兄弟节点。 parentNode 返回元素的父节点。 previousSibling 返回元素的上一个兄弟节点。
• 删除节点 removeChild() 从元素中移除子节点。 自我删除：目标节点.父节点.removeChild(目标节点);

4. 表单

• 获取表单 前两种比较常用： 1.document.表单名称 2.document.getElementById(表单 id); 3.document.forms[表单名称] 4.document.forms[索引]; //从 0 开始
• 获取表单元素 元素分类 表单元素： 元素节点.value 取值/内容 元素节点.value = 值 设置值/内容 非表单元素： 元素节点.innerHTML = 值 设置值/内容 元素节点.innerHTML 取值/内容 1.获取input元素 1.通过id获取 document.getElementById(元素 id); 2.通过form.名称形式获取: myform.元素名称; name属性值 3.通过name获取 document.getElementsByName(name属性值)[索引] // 从0开始 4.通过tagName数组 document.getElementsByTagName('input')[索引] // 从0开始 2.获取单选按钮 前提：将⼀组单选按钮设置相同的name属性值。 1.document.getElementsByName("name属性值"); 2.遍历每个单选按钮，并查看单选按钮元素的checked属性： 若属性值为true表示被选中，否则未被选中 ​ 选中状态设定： checked='checked' 或 checked='true' 或 checked ​ 未选中状态设定： 没有checked属性 或 checked='false' 3.获取多选按钮 操作⽅式与单选同理，不同之处在于可以多选。 4.获取下拉选项 1.获取select对象 var ufrom = document.getElementById("ufrom"); 2.获取选中项的索引 var idx = ufrom.selectedIndex; 3.获取选中项options的value属性值 var val = ufrom.options[idx].value; 注意：当通过options获取选中项的value属性值时： 若没有value属性，则取option标签的内容。 若存在value属性，则取value属性的值。 4.获取选中项options的text var txt = ufrom.options[idx].text; ​ 选中状态设定：selected='selected'、selected=true、selected ​ 未选中状态设定：不设selected属性 。
• 提交表单 1.使用普通button按钮+onclick事件+事件中编写代码: 获取表单.submit(); 2.使用submit按钮 + onclick="return 函数()" +函数编写代码: ​ 最后必须返回：return true|false; 3.使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数();" +函数编写代码: 最后必须返回：return true|false;