【Web前端学习之路】JavaScript必会 DOM \ BOM操作（黑马课程笔记）

1、Web APIs阶段

•  Web APIs 是W3C组织的标准
•  Web APIs 是JS独有的部分，是JS的应用，主要用于网页交互功能

API是一些预先定义的函数，目的是给程序员提供一种工具以便于更轻松实现功能，并不需要了解其内部工作机制，相当于一个接口。

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

2、DOM简介

DOM是文档对象模型，是W3C组织推荐处理的可扩展标记语言（HTML或者XML）的标准编程接口，通过这些接口可以改变网页的内容、样式和结构。

可以将整个页面看作一种树形结构，称作DOM树

• 一个页面就是一个文档，DOM中用document表示
• 页面中的所有标签都是元素，DOM中用element表示
• 网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用Node表示

DOM把以上内容都看作是对象

3、获取页面元素

• 根据ID获取

使用getElementById()方法获取

• 根据标签名获取

使用getElementsByTagName()方法获取带有指定标签名的对象的集合

若想获取某个父元素内部的指定标签的集合，则需先指定父元素

可以有两种方法：一是通过在文档中选择父级标签元素，再在父级标签元素的伪数组中选择子级标签元素；二是给父级标签元素设置id，通过获取id获取其子元素标签

• 通过HTML5新增方法获取

使用getElementsByClassName()方法获取类选择器的对象的集合

//注意：以下两种方法其参数中选择器都需要加符号 类选择器加.  id选择器加#

使用querySelector()方法获取任意选择器的第一个元素

使用querySelectorAll()方法获取任意选择器的全部元素，以伪数组形式存储

• 特殊元素获取

使用document.body方法获取body元素

使用document.documentElement方法获取html元素

4、事件基础

事件是可以被JavaScript侦测到的行为，简单理解为某个行为触发一种响应

事件三要素：事件源   事件类型   事件处理程序

事件源：被触发的对象

事件类型：如何触发

事件处理程序：触发之后的行为，通常用函数赋值方式完成

执行事件的步骤：获取事件源（btn）-> 注册事件/绑定事件（btn.onclick等）-> 添加事件处理程序（采取函数赋值形式）

 5、操作元素（介绍属性）

修改元素内容：element.innerText

鼠标点击之后--------》 

 element.innerText与element.innerHTML的区别：前者不能识别html标签，会自动剔除，且空格换行也会剔除；后者可以识别html标签，且保留空格与换行  

                                                       

 

 
修改元素属性值

 

修改表单属性时，改变输入框中的文字：element.value

登录密码可见/不可见案例

一个按钮要实现两个状态的转换，可以利用一个flag变量，通过判断flag的值来设置变换效果

 

 

 注：若通过JS修改样式属性，则是行内样式，权重比内嵌式写法高。

精灵图循环分布案例

因为精灵图的图片排列是有规律的，所以可以利用for循环改变精灵图的位置，从而使不同的小图片在其对应的Li标签中

 

密码框验证信息案例

失去焦点/获得焦点