DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM，一个HTML文件是以树形结构加载到内存的，开发可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，即通过DOM来操作

DOM又称为文档树模型

文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属

DOM操作

先有按钮，才能获取，获取之后才能注册这个事件
根据id文档中获取这个元素，为当前的这个按钮元素
注册点击事件，添加事件主力函数（匿名函数）
响应事情

实例

1.先有按钮，才能获取，获取之后才能注册这个事件


<a id="ak" href="[https://www.hao123.com](https://www.hao123.com)">hao123</a>

<script>

2-3.根据id（或其他属性）获取元素，注册点击事件，添加事件处理函数

document.getElementById("btn").onclick=function(){

4.1 根据id获取a标签，设置href的属性（响应）

document.getElementById("ak").href="[https://www.baidu.com](https://www.baidu.com)";

4.2 根据id获取a标签，设置热点文字（响应）

document.getElementById("ak").innerText="百度";

};

获取元素的方式

根据id属性的值获取元素，返回来的是一个元素对象

document.getElementById("id属性的值")

根据标签名字获取元素，返回来的是一个伪数组，里面保存多个DOM对象

document.getElementsByTagName("标签名字")

下面的属于H5，有些浏览器不支持

根据name属性获取元素，返回来的是一个伪数组，里面保存多个DOM对象

document.getElementsByName("name属性的值")

根据类样式的名字获取元素，返回来的是一个伪数组，里面保存多个DOM对象

document.getElementsByClassName("类样式的名字")

根据选择器获取元素，返回来的是一个元素对象

document.querySelector("选择器的名字")

根据选择器获取元素，返回来的是一个伪数组，里面保存多个DOM对象

document.querySelectorAll("选择器的名字")

innerText和textContent

设置标签中的文本内容，使用textContent属性，谷歌，火狐支持IE8不支持

设置标签中的文本内容，使用innerText属性，谷歌，火狐，IE8都支持

innerText和innerHTML

innerText主要是设置文本的，设置标签内容，是没有标签的效果的

innerHTML在标签中设置标签内容，是有标签效果的

自定义属性

1--设置自定义属性：setAttribute("属性的名字"，"属性的值")

2--获取自定义属性：getAttribute("属性的名字")

系统自带的可以指点.(英文)出来，自定义则要用getAttribute("属性的名字")

3--移除属性

移除自定义属性：removeAttribute("属性的名字")

移除系统自带属性

my$("dv").className=""; 值没有了，但是属性还在

removeAttribute("属性的名字")，值和属性一起移除

节点

节点的属性

可以用标签(元素).(点)出来

可以用属性节点.(点)出来

可以用文本节点.(点)出来

nodetype (节点的类型)： 1---标签，2---属性，3---文本

nodeName（节点的名字）

标签节点---大写的标签名字

属性节点---小写的属性名字

文本节点---#text

nodeValue（节点的值）

标签节点---null

属性节点---属性值

文本节点---文本内容

元素的创建

原因：为了提高用户的体验

1：document. write（"标签的代码及内容"）

缺点：如果页面加载完毕后，此时通过这种方式创建元素，那么页面上所有的内容全部消失

2：对象. innerHTML=”标签及代码“

3：document. createElement（"标签的名字"）

创建后，要把元素追加到父级元素中

为元素绑定多个相同事件

对象.on+事件=事件处理函数（这种只能绑定一个事件）

对象.addEventListener("参数1",参数2，参数3);（IE8不支持）

参数1：事件的类型---事件的名字，没有on(字符串类型)
参数2：事件处理函数---函数（命名函数，匿名函数）
参数3：布尔类型，目前就写false

对象.attachEvent("参数1",参数2)（只有IE8支持）

参数1：事件的类型---事件的名字，有on(字符串类型)
参数2：事件处理函数---函数（命名函数，匿名函数）

addEventListener与attachEvent的不同

参数不一样，addEventListener有三个参数，attachEvent只有两个参数

addEventListener：谷歌，火狐，IE11支持，IE8不支持；attachEvent：歌，火狐，IE11不支持，IE8支持

this的不同，addEventListener中this是当前绑定事件的对象；attachEvent中的this是window

addEventListener参数中的事件名字没有on；attachEvent中的事件名字有on

DOM事件

事件：就是一件事有触发，响应和事件源

事件三要素

事件源：触发(被)事件的元素
事件类型：事件的触发方式(例如鼠标点击或键盘点击)（注册点击事件）
事件处理程序：事件触发后要执行的代码(函数形式)（添加事件函数）

常用事件(my$(" id ")为元素)

my$(" id ").onclick----点击事件

my$(" id ").onmouseover---进入事件

my$(" id ").onmouseout---离开事件

my$(" id ").onmousedown---按下事件

my$(" id ").onmouseup---抬手事件

my$(" id ").oncontextmenu---鼠标点击右键，打开上下文菜单

my$(" id ").onkeydown---按下键盘执行代码

解绑事件用什么方式绑定事件，就用对应的方式解绑事件

事件冒泡多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了

阻止事件冒泡

window.event.cancelBubble=true;（低版本火狐不支持）
（对象）e .stopPropagation();（IE8支持）
 window.event和e都是事件参数对象，一个是IE的标准，一个是火狐的标准，事件参数e在IE8的浏览器中是不存在的，此时用window.event来代替

事件三个阶段

1：事件捕获阶段：从外向内（第三个参数为true）
2：事件目标阶段：最开始选择的那个目标
3：事件冒泡阶段：从里向外（第三个参数为false）
(对象)e.eventPhase：可以查看当前的事件是什么，一般默认为3：事件冒泡阶段，很少为1：捕获阶段

BOM

BOM是浏览器对象模型，浏览器对象模型独立于内容，可以于浏览器进行交互的对象结构 BOM的顶级对象window 调用window下的属性和方法时，可以省略window window.name输出时是空（完全的空不是null） window有时可以用top代替

移动元素

div要移动,要脱离文档流---position:absolute
如果样式的代码是在style的标签中设置,外面是获取不到（要想获取用offset）
如果样式的代码是在style的属性设置,外面是可以获取
获取div的当前位置：offsetleft（左边，顶部，宽，高）

三大属性

offset系列（元素需要脱标才能获取）

offsetLeft:距离左边位置的值
offsetTop:距离上面位置的值
offsetWidth:元素的宽(有边框)
offsetHeight:元素的高(有边框)

scroll系列

scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽
scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高
scrollTop：向上卷曲出去的距离
scrollLeft：向左卷曲出去的距离

client系列:可视区域

clientWidth:可视区域的宽(没有边框),边框内部的宽度
clientHeight:可视区域的高(没有边框),边框内部的高度
clientLeft:左边边框的宽度
clientTop :上面的边框的宽度

定时器

1、什么是定时器，定时器分两个，分别是setTimeout和setInterval

function fn(){console.log("我是定时器执行的");}

setTimeout(fn,1000);//1000毫秒后让fn方法运行一次

setInterval(fn,1000)//每隔1000毫秒让fn方法运行一次

以下文中所说的定时器方法，就是指这两个方法

2、理解定时器是怎么工作的，当定时器方法运行的时候，会把它的fn第一个参数安排到一个时间队列里(就是让这个方法fn开始排队,排多久的时间，则第二个参数决定）

setTimeout是让fn排队一次，等1000毫秒后fn执行一次

setInterval是让fn方法每隔1000毫秒就排队并且执行一次，永远执行下去

3、定时器的返回值

当定时器方法运行的时候，它会返回一个正整数。默认情况下，第一次定时器运行返回的这个数是1（即从1开始，除非浏览器已经运行定时器。），第二次运行返回的就是2了，依次递增。
也就是说定时器的返回值，是一个定时器安排的等待队列（一个排队的序号），好比你去银行办理业务的时候，会去取一个流水号一样，比如说你拿到了8号，则表示你排在了第八个队列中。
定时器的返回值是有有效期的，即它表示一个等待的过程。比如下述代码：
var timer=setTimeout(fn,1000);
当上一行代码执行，setTimeout会让fn在1000毫秒后执行，那这个等待的过程就算是一个队列。 setTimeout还会返回一个整数，如果是第一次运行，则返回的这个整数就是1（现在把它的返回值1赋给了timer这个变量）。
但是这个1表示的这个等待过程（或者叫：队列、定时器队列）只在1000毫秒内是有效的，到了1000毫秒fn就执行了，则这个等待过程的使命就完成了，这个编号也会随之失效。
还有一种情况也会让这个编号失效，就是手动清除这个编号为1的等待队列，代码如：
clearTimeout(timer);//这样到1000毫秒的时候，fn也不会运行了。
值得注意的是：这个编号失效了，但是timer这个变量里的值还是1，只是1表示的那个定时器队列失效了，而并非把timer里的值清空。理解这一点很重要。
重要的是理解定时器的返回值的意义，这个返回值是个数字

4、清除定时器的方法（就是在排队等待执行这个队列失效的方法）

清除定时器的方法有两个，clearTimeout和clearInterval

clearTimeout(1);//使定时器队列号为1的那个队列失效

//或写成

clearTimeout(timer);//使定时器队列号为timer值的那个队列失效

或写成

clearInterval(1);

注意定时器即使清除了，其返回值也不会清除，之后设置的定时器的返回值也会在其返回值的基础上继续向后排，这点类似于银行的排队领号，即使1号的业务办理完了，后边的人仍是从2号开始继续领号，而不是重新从1开

来源：oschina

链接：https://my.oschina.net/u/4149096/blog/4281768

标签

firefox

webapi

DOM