BOM和DOM的基础篇

一、BOM

BOM的顶级对象叫 window(属性和方法)

提供了一套操作浏览器的api（属性和方法）

1.属性 ：window.innerWidth 浏览器的可视宽度(包含滚动条)

window.innerHeight 浏览器的可视高度(包含滚动条)

2.方法 ： window. 可以省去

（1） window.alert () 弹出框

（2）window.prompt () 输入框

返回值：点击确定，返回true

点击取消，返回false

(3) window.confirm () 确认框

返回值： 点击确定，返回true

点击取消，返回false

(4) window.setInterval () 间隙定时器

三种语法： setInterval(function(){代码块}，1000)

setInterval(fn,1000)

function fn(){代码块}

setInterval("fn()",1000) 不推荐写法

function fn(){代码块}

含义：每隔1S执行一次函数

 window.clearInterval() 清除间隙性定时器

          语法：clearInterval(定时器的名称)

(5) window.setTimeout() 超时定时器

语法同上

含义：1s后执行一次函数(执行了一次)

（6）打开和关闭浏览器窗口

window.open('地址')

window.close()

3. window的子对象

document 、location 、history 属于windw的属性

（1）window.location 用于获取根地址栏的相关信息

window.location.href 用于获取(location.href)和设置(location.href=) 地址信息的

location.reload() 刷新页面

location.replace() 跳转过去就回不去了，前进后退被破坏

（2） window.history 用于获取跟历史记录相关的信息

window.history.back() 后退一个页面

window.history.forward() 前进一个页面

window.history.go(正整数 /0/ 负整数)

正整数： 前进

负整数： 后退

0： 刷新

（3）window .document DOM 的方法

4. 浏览器的常见事件

浏览器的相关事件： 浏览器触发的事件

（1）window.onscroll = function(){} 滚动浏览器的时候触发

(2) window.onresize = function(){} 浏览器窗口尺寸大小变化时触发

(3) window.onload = function(){} 当页面的html结构，图片，视屏，音频等加载完毕的时候触发。

onclick: 点击事件 用户触发的事件

ondbclick: 双击事件 用户触发的事件 (在这提一嘴)

二、DOM

Document Object model: 文档对象模型

简单来说 ，提供了一套操作文档流的属性和方法

本质就是JS去操作html

1. 获取页面元素

语法1：document.getElementById('box') 通过ID名获取元素，只能获找到一个

语法2：document.getElementsByTagName('div') 通过标签名获取元素 (获取到的是一组数据，伪数组)

document.getElementsByTagName('div')[0] 获取数组的第一个元素

语法3：document.getElementsByClassName('box') 获取的是所有类名叫做box的(获取到的是一个，伪数组)

document.getElementsByClassName('box')[0]

语法4：document.getElementsByName('text') 获取到的是所有name值叫text的 (获取到的是一个伪数组)

document.getElementsByName('text')[0]

非常规的：

（1） document.documentElement 获取html标签

（2） document.body 获取body标签

（3） document.title 获取的title标签

（4） document.head 获取head标签

语法5：

通过选择器( .box #box ul>li ) 来获取页面元素

document.querySelector('.box') 获取页面中类名叫box的第一个

document.querySelecyorAll('.box') 获取页面中所有类名叫box的元素

2. 操作元素的内容(四种)

获取元素的内容： 元素 . innerHTML 可以获取标签，可以将box里面的内容修改成标签

设置元素的内容： 元素 . innerHTML =xxx

获取元素的文本内容： 元素 . innerText 不可以获取标签，不可以将box里面的内容修改成标签

设置元素的文本内容： 元素 . innerText=xxx

获取元素本身和内容： 元素 . outerHTML (获取元素本身和类容，以字符串的形式返回)

设置元素本身的内容： 元素 . outerHTML=xxx

针对表单控件：

获取元素的内容： 元素 . value

设置元素的内容： 元素 . value=xxx

3. 设置元素的样式(四种)：

元素 . style . 属性名=属性值 获取元素样式 ： 元素 . style . 属性名 (没啥用)

元素 . className = '类名' 元素存在多类名，需要使用类名来确认元素时，可以用 ES6新增的 includes() 包含来确认

元素 . classList. add('类名') 追加类名

元素 . classList . remove('类名')

4.设置元素的属性

属性分为固定属性 (元素自身携带的属 性 src value id) 和 自定义属性

设置自定义属性 (也可以设置固有属性)

元素 . setAttribute('属性名'，'属性值') 设置属性

元素 . getAttribute('属性名') 获取属性值

元素 . removeAttribute('属性名') 删除属性

设置固有属性

元素 . 属性名= " 属性值 " 设置固有属性

元素 . 属性名 获取固有属性

img.src="xxxx"

元素 . id

表单元素 . vlaue id是每个元素都有固有属性 元素也是对象，所以也可以用 对象的 . 点语法获取和设置属性

5. DOM 节点

DOM节点：把DOM树中每一部分都转成节点，节点种类12种

扩展 ： 节点的属性：nodeType (节点类型的值) 、nodeName 、ndeValue

（1） 元素节点 1

（2） 属性节点 2

（3） 文本节点 3

（4） 注释节点 8

（5） 文档节点 9

6. DOM节点的访问

节点(所有的节点) 的获取 (文本和注释和元素) :

节点 . firstChild 节点内第一个元素节点

节点 . nextSibling 访问下一个兄弟节点

节点 . previousSibling 访问上一个兄弟节点

节点 . lastChild 访问节点内最后一个节点

节点 . childNodes 访问节点内所有的子节点，包括 元素、属性、文本、注释、文档节点

元素节点的获取 (元素) ：

节点 . firstElementChild 节点内的第一个元素节点

节点 . nextElementSibling 访问下一个兄弟元素节点

节点 . previousElementSibling 访问上一个兄弟元素节点

节点 . lastElementChild 访问最后一个元素节点

父节点： parentNode (常用的)

parentElementNode 父元素节点(父元素节点，存在兼容性问题，有些浏览器不支持它)

其它的访问方式：

查找元素节点 (获取页面元素)

查找属性节点（获取元素属性）

查找文档节点 （）

根据节点的名字查找节点(通过节点名字查找，节点名字都是元素节点的大写，事件委托名节点的名字nodeName)

7. 节点的操作：

增加节点 （创建节点，追加节点，成功添加到页面：需要经过创建节点，追加节点两个步骤）

删除节点

替换节点

插入节点

克隆节点

(1) 创建节点

(1.1) 创建节点 document . creatElement ('标签名')

(1.2) 追加节点 父节点 . appendChild(子节点/新节点)

（2）删除节点

父节点 . removeChild (子节点)

节点 . remove () 删除节点x本身 ，自杀式删除法

(3) 替换节点

父节点 . replaceChild (新节点 ， 老节点)

（4）插入节点

父节点 . inserBefore (新节点 ，谁的前面)

(5) 克隆节点

节点 . cloneNode ( true /false ) 参数是可选的

true : 克隆节点本身 ，包括节点的子节点

falase: 只克隆节点本身 , 不克隆节点的子节点 克隆完要追加到页面中

8. 各种位置大小

（1）浏览器的可视窗口宽度 ：

包含滚动条的宽度和高度

window . innerHeight 高度

window . innerWidth 宽度

不包括滚动条的宽度：

document.documentElement . clientHeight 高度

document.body.clientHeight 高度

（2）滚动条滚出去的高度

window.documentElement.scrollTop

window.body.scrollTop

（3） oDiv . clientWidth 获取元素的可视宽度(指的是元素border以内的，不包含border)

oDiv . offsetWidth 获取元素的占位宽度(指的是元素border以内，包含border)

oDiv . offsetLeft 获取元素距离最近的具有定位元素的做偏移量

三、 事件

1. 事件的概念：用户触发浏览器产生的行为

事件的三要素：事件触发的源头(元素)

事件的类型： 事件是那种类型(click daclick mouseover mouseout......)

事件的处理函数：事件触发后要做的事情 function() { }

注意：在事件处理函数里面的 this 都是事件源

let oDiv=document . getElementById('div')

oDiv.ondbclick=function(){

要做的事

}

2. DOM0 级绑定事件法：

语法： 事件源 . on事件类型 = 事件处理函数

缺点： 不能对同一个对象的同一个事件进行多次绑定

优点： 书写简单，兼容性好

DOM2 级绑定事件法：(事件监听，兼容性不好)

2.1 标准浏览器支持

语法： 事件源 . addEventListener('事件类型', 处理函数，布尔值) 布尔值默认是false 冒泡

优点： 可以对同一个事件进行多次绑定

缺点： 写法复杂 ，兼容性不好 (IE低版本不支持)

2.2 语法：事件源 . attachEvent('事件类型' , 处理函数 )

优点： 可以对同一个对象的同一个事件进行多次绑定

缺点： 只是IE低版本支持

HTML事件绑定法：

点我触发

点击div , 触发fn（）函数

事件绑定的其他写法：

oDiv . onclick = fn

function fn(){代码块}

fn() 就是调用函数 ，把fn（）的执行结果undefined

fn 是 fn 函数存在的指定

3. 事件的解绑

DOM0级解绑: 事件源 . on事件类型 =null;

DOM2级解绑： 事件源 . removeEventListener('事件名' , 事件处理函数的名称)

强调： 移出事件时需要将事件处理函数单独定义在外边

绑定： oDiv . addEventListener ('mouseover' , fn ,false)

function fn(){

代码块

}

点击 解绑： oDiv . removeEventListener ('click' , function(){

oDiv . removeEventListener(' mouseover' , fn)

} , false)

4. 事件类型

(1) 鼠标事件

click 单击

dbclick 双击

mouseover 鼠标移入

mouseout 鼠标移出

mousedown 鼠标按下

mousemove 鼠标移动

mouseup 鼠标抬起

mouseenter 鼠标移入

mouseleave 鼠标移出

区别：不论鼠标指针穿过被选元素或者它的子元素，都会触发mouseover事件。对应mouseout

只有在鼠标穿过被元素时 ，才会触发 mouseenter 事件 。对应 mouseleave

造成以上现象本质上是 mouseenter 事件不支持冒泡所致。

(2) 键盘事件

不是所有元素都能触发这几个事件，表单元素， document ， window 可以触发

kewdown 按下键盘(不松开会一直触发)

keypress 按下并按住键盘(会一直触发)

区别：

keydown: 是用户在键盘上按下某键时发生。一直按着某键则会不断触发(opera浏览器除外)

keypress: 用户按下一个按键，并产生一个字符时发生的(也就是类似shift 、alt、ctrl之类的键，它不产生字符，是不会触发keypress的,用户按住了一个能在屏幕上输出字符的按键keypress事件才会触发)

keypress:只能捕获单个字符

keydown和keyup 可以捕获组合键

是否按下了组合键(ctrl键、shift键、alt键)

哪个键被触发： e.keyCode(每个键盘对应的键值码 enter---->13) 这里要注意ctrlKey等 k是发泄

兼容性写法：e.which

是否按下了组合键(ctrl键、shift键、alt键)

e.ctrlKey 返回的是布尔值

e.altKey 返回的是布尔值

e.shiftKey 返回的是布尔值

if(e.keyCode==13&&e.ctrKel){

console.log(999)

}

(3) 浏览器事件

window.onload 页面资源加载完毕后触发(DOM结构，图片，视屏，音频等加载完成)

window.resize 浏览器窗口大小变化时触发

window.scroll 滚动条滚动时触发

(4) 表单事件

change 表单的value值发生变化时触发

input 只要输入了就会触发(输入或删除内容了都会触发)

focus 获得焦点的时候触发

blur 失去焦点的时候触发

submit 提交(点击提交按钮的时候触发) 需要写到from标签上

reset 重置(点击重置按钮时触发) 需要写在from标签上

(5)触摸事件

ontouchstart 触摸开始

ontouchmove 触摸中

ontouchend 触摸结束

5. 事件对象：

（1） 概念： 记录了本次事件发生时的一系列相关信息

（2）获取事件对象：

（2.1）标准浏览器下的获取： 在事件处理函数的形参位置直接写一个参数（这个参数就是事件对象）

oDiv . οnclick=function(e){ e就是事件对象 }

（2.2） IE低版本浏览器的获取

oDiv . onclick = function(evevt){ window.event 这就是事件对象 }

兼容性写法: var ev=e||window . event ;

（3）鼠标对象的相关信息

三大坐标系：

（3.1） 事件对象 . clientX 和 . clientY:

事件对象 . clientX 获取点击位置距离浏览器窗口X坐标

（3.2） 事件对象 . pageX和 . pageY

事件对象 . pageX 获取点击位置距离页面的X坐标

(3.3) 事件对象 . offsetX和 . offsetY

事件对象 . offsetX 获取点击位置距离自身的X坐标

6. 事件传播(事件流)

概念：当你触发一个元素的某种行为时，会按照腹肌结构依次传播

浏览器大战时1997年：

网景公司 ：事件捕获 先父在子

IE公司 : 事件冒泡 先子在父

W3C指定了标准：

事件的三大阶段：

(1) 事件先捕获：事件触发时，事件是按照最不具体的元素依次传播到最具体

(2) 目标阶段(你点击的那个元素)

(3) 冒泡阶段：事件触发时，事件是按照最具体的元素依次传播到最不具体

现在主流的浏览器支持冒泡，如果想设置捕获，需要用DOM设置

oDiv . addEventListener('click' ，fn ,true) ---->设置捕获

7. 阻止事件冒泡

如何阻止事件冒泡：

标准浏览器： e.stopPropagation()

IE低版本 ： e.cancelBubble = true

在事件函数里面 加上 阻止事件冒泡

8. 阻止事件默认行为

标签自带的行为： a的跳转 ，from的跳转 ，鼠标右键弹出菜单

如何阻止默认行为：

标准浏览器： e.preventDefault() 只支持DOM0和DOM2级

return false ; 只支持DOM0级

IE低版本： e.returnValue=false;

9. 事件委托

什么是事件委托：

事件委托也叫事件代理，JS高程上讲：十几件委托就是利用事件冒泡原理，只指定一个时间处理程序，就可以管理某一类型的所有事件。

特点：解决动态元素(刚进入页面时，元素不在页面内) ，无法绑定事件问题

将子元素的事件委托到父元素身上来处理 ，减少绑定的次数，提高性能

兼容性写法：

e . target 返回触发事件的对象(标准写法)

e . srcElement 返回触发事件的对象

var t=e.target||e.srcElement

四、正则

1. 正则表达式： RegExp(引用数据类型)

2. 正则表达式的创建

(2.1) 字面量 var reg=/abc/

(2.2) 构造函数法 var reg=new RegExp('abc')

3. 正则表达式的方法：

语法： reg . test('字符串')

返回值： false 或者 true

满足返回true 不满足规则返回false

含义：判断字符串中是否含有reg的规则

4. 正则表达式的元字符

\d :表示一位数字

\D : 表示一位非数字

\w ：表示一位数字，字母下划线中的任意一个

\W : 表示一位非（数字，字母下划线）中的任意一个

\s ：匹配空白字符 （空格）

\S : 非空白

. :

5. 正则表达式的限定符

* :匹配一次或者多次 (出现0次 、或者1次 、或者多次都可以)

+ ：匹配一次或者多次

? : 匹配0次或者1次

{n} : 匹配正好n次 a {5}

{m , n} :匹配m --- n次

{n,} : 匹配n 次以上

6. 正则表达式的边界符：

^：以........开始 ^(abc) 以abc 开始

$: 以.......结束 (abc)$ 以abc 结束

7. 正则表达式的特殊符号:

[ ] :匹配 [ ] 中的任意一个

[^a-z] : 匹配 [ ]中的任意一个非小写字母

- : a-z(abc........z)

(): c abc{2} c出现两次 (abc){2} (abc)整体出现两次

| ：或者 a | b 就是 a或者b

{ } : {n} {n,m}

8. 补充知识点 ：

特殊符号:

| ：就是或的意思

. 代表任意字符:

如果相匹配 . 的话需要转意 ， \ .

如果相匹配 \ 的话需要转意 ， \\ .

如果相匹配 * 的话需要转意 ， \ *

如果相匹配 ? 的话需要转意 ， \ ?