DOM入门基础

天道酬勤，地道酬精，人道酬善，商道酬诚，业道酬精。
DOM身为 JavaScript 三大内容之一，虽然在真正的开发中用的不多，但是也是JS学习中不可或缺的一部分，DOM的学习相对来说比较简单，分享一下我之前的部分DOM笔记。能力有限，水平一般，不足之处，多多包涵。

DOM简介

DOM，全称Document Object Model，文档对象模型。

DOM是一组用来描述 js 代码怎样与 html 文档进行交互和访问的 web 标准，它定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样式和行为。

DOM的版本介绍

DOM0

W3C组织成立之前，形成一个所谓的标准。这一遗留的DOM被所有浏览器厂商采用，并且已经作为“0级别”DOM正式纳入到W3C标准中。它在所有浏览器中有效。0级DOM，主要就是针对Document，定义了一些相关的属性和方法。

1. 定义的属性和方法：
   
2. 获取元素表单
   form表单有特殊性，可以通过表单元素（input、textarea、select）的name属性，就可以获取form中的这些表单元素。而且它们共同构成了一个对象数组。用对象的方式来获取。
   

DOM1

在DOM1中制定了两个子规范：

1. DOM Core（核心部分）：把xml文档设计为树形节点结构，并为这种结构的运行机制制订了一套规范化标准。同时定义了创建、编辑、操纵这些文档结构的属性和方法。

2. DOM HTML：针对HTML文档、标签集合，以及与个别HTML标签相关的元素定义了对象、属性和方法。

DOM1中获取获取元素方式：

• getElementById() 因为id在html标签中是唯一，所以我们通过id获取到的元素也是唯一；这种方法：效率，准确率都很高；不能批量选择元素。

var id = document.getElementById('ID');

• getElementsByTagName() 通过标签名获取元素，这种方法获取到的元素，是一个集合；返回一个由选取到的元素组成的一个类似数组的东西。如果页面中只有一个；那么返回的依然是一个集合，只是集合内的元素个数是1而已；

var lis = document.getElementsByTagName('li');
var li0 = document.getElementSByTagName('li')[0];

DOM0级方式所有的浏览器都支持，但是有一些麻烦，而且，功能不是很全面。节点之间的关系：非常麻烦，而且复杂，有浏览器的兼容性问题；功能较多，在未来，如果浏览器是大统一的时候，这种方式将会非常有用；
标准方法：效率高，获取快速，准确。

DOM2

DOM2增加了事件绑定功能：

• onmouseover 鼠标移上事件
• onmouseout 鼠标移出事件
• onmousemove 鼠标移动事件

DOM3

DOM3增加了验证功能 。

DOM重点

DOM主要是学习四块内容

• 操作节点
• 操作css
• 事件模型
• 定时器

下面就做简单介绍：

操作节点

操作元素节点

操作元素节点说白了就是对HTML中的元素节点进行增删改查。

• createElement（ ）创建元素节点

var div1 = document.createElement('div'); 

注意：创建好的元素，并没有添加进页面，需要手动添加到DOM的节点结构中。

• appendChild（ ）把元素追加到某个标签的最后边

var div1 = document.createElement('div'); 
div.appendChild(div1);

appendChild 把元素追加到某个标签的最后边，具体是添加到哪个节点的最后边，取决于是谁调用了这个方法。

• insertBefore（ ）把元素添加到指定元素的前边

var div2 = document.createElement('div'); 
div.insertBefore(div2);

• cloneNode ( ) 复制一个节点

var div3 = div.cloneNode();

• removeChild ( ) 删除一个节点

div.removeChild(div1);

removeChild 这个方法需要有父节点去调用，表示的是要删除父节点中的某个元素，要删除哪个元素取决于该方法接受的参数

操作属性节点

• 直接使用对象.属性这种方式打点调用，这是DOM0级提出的，只对html中定义的属性起作用，对于自定义属性无效。

    div.title;		//获取属性节点
    div.title = "jianlai";		//设置属性节点:

• 使用DOM 提供的一个方法getAttribute()和setAttribute()，这个是DOM1级提出的。

getAttribute（） 获取属性
由一个元素节点去调用，给它传递一个属性的名字，从而获得这个属性的值。

var res = oImg.getAttribute('abc')

setAttribute（）设置属性
由一个元素节点调用，传递要设置的属性名和属性值；

oImg.setAttribute('abc','123');

操作文本节点

使用 innerHTML 进行赋值

var oList = document.getElementById('list');
oList.innerHTML = 12;

注意如果给innerHTML赋值，它会把标签中原来的内容都删除掉。
如果只是添加内容，怎么办，只要用+=这个运算符就可以了。

操作css

操作行内样式

用js控制行内样式，就是控制节点的style属性，每个节点的style属性中都存储了这个元素的css样式信息，所以，我们可以通过style这个属性去设置或者得到css的样式，但是只针对行内样式。

• 获取行内样式：节点元素 . style. 样式的名称

console.log(oBox.style.backgroundColor);

• 设置行内样式：对节点元素 . style. 样式的名称进行赋值

oBox.style.backgroundColor = 'red';

对于css中类似于text-align、background-color、margin-left …这样的形式，在js中不可以直接这样写，要写成驼峰的形式textAlign、backgroundColor、marginLeft

操作css类

操作css类就是通过 js 控制元素的类名发生变化，从而控制类名所控制的样式，发生改变，主要针对的是非行内样式。
注意，操作 css 类使用 className，因为 class 是ES6的关键字，所以使用 className。
当一个元素有很多的类名时，如果只是想改变其中的一个可以使用 replace来进行替换。

var oBox = document.getElementById('box');
var str = oBox.className;
var newStr = str.replace('one','two')

获取元素尺寸

• client系列

clientWidth：获取盒子或页面可视区域的宽度
clientHeight:：获取盒子或页面可视区域的高度
clientTop：获取盒子的上边框的大小
clientLeft：获取盒子的左边框的大小

• offset系列

offsetWidth：获取盒子或页面可视区域的宽度+border
offsetHeight:：获取盒子或页面可视区域的高度+border
offsetTop：获取一个定位元素相对于参考点的上面的距离
offsetLeft：获取一个定位元素相对于参考点的左面的距离
offsetParent：获取一个定位元素的参考点

• scroll系列:

scrollWidth：获取盒子或页面真实内容的宽度
scrollHeight：获取盒子或页面真实内容的高度
scrollTop：获取页面或盒子向上卷去的高度
scrollLeft：获取页面或盒子向左卷去的宽度

获取一张网页可视区的高度：document.body.clientHeight
获取一张网页真实的高度：document.body.scrollHeight
获取一张网页卷去的高度：document.body.scrollTop

事件模型

事件简介

js 中的时间类型主要包括以下几点：

• 鼠标点击
• 鼠标悬停
• 鼠标挪开
• 键盘敲击
• 表单的提交
• 滚动

事件三要素：

• 事件源：在哪个元素上发生的事件，具体发生了什么
• 事件：点击，悬停，键盘敲击
• 监听器：当事件发生时，做了什么，在js中，通常用一个函数来表示

注意：

• 事件源一般指的是一个元素（宿主对象）。
• 在事件里，一般的形式 是 onclick onmouserover 其中真正的事件是 click mouserover on其实只是一个修饰，表示要添加事件的意思。
• 监听器是一个匿名函数，但是这个函数不需要去调用，会有js引擎去调用，但是调用是有条件的，必须要触发添加好的事件，才会去调用这个函数。

事件绑定

事件绑定就是对事件源进行事件的绑定，主要有以下几种方式：

• HTML事件处理程序
• DOM 0级事件处理程序
• DOM 2级事件处理程序

HTML事件处理程序

直接把事件添加到HTML代码中

<div id="box" onclick="add()">hello ange</div>

DOM0 级事件处理程序

这种方式就是给节点对象添加方法

var oAll = document.getElementById('all');
oAll.onclick = function(){
	alert(1);
}

DOM2 级事件处理程序

通过 addEventListener 进行添加事件：

oAll.addEventListener('click',function(){
	alert(1);
}

注意：

• 事件类型不需要加on，而且事件类型是字符串
• 监听器执行的顺序，取决于添加事件的顺序

通过 removeEventListener 进行移除事件：

错误方法：

    let box = document.querySelector('.box')
    box.addEventListener('click', function () {
        alert(999);
    }, false)
    box.removeEventListener('click', function () {
        alert(999)
    }, false)
    //这两个函数虽然长得一样，但它们不是同一个函数
    //所以这种办法是不能删除该绑定事件的

正确方法：

    let box = document.querySelector('.box')
    function fn(){alert('666')}
    box.addEventListener('click',fn)
    box.removeEventListener('click',fn)
	//这种方法可行，而且点击事件一次也不会发生

    let box = document.querySelector('.box')
    box.addEventListener('click', function fn() {
        alert('666');
        this.removeEventListener('click', fn)
    })
    //这种方法会执行一次绑定事件，然后进行解绑

事件流及事件传播

在页面中，如果对某一个元素发生了事件，那么这个元素的所有祖先级都会触发相同的事件。
事件传递：某个事件会从当前点击的这个元素和它的最祖先的元素（document）之间进行传递。

传递是顺序的，顺序有两种：
1.从内往外传，叫冒泡
2.从外往内传，叫捕获

DOM0级添加的方式都是冒泡的
DOM2级的方式，主要看第三个参数，false表示的是冒泡，true表示的捕获

    let box = document.querySelector('.box')
    let box1 = document.querySelector('.box1')
    box.addEventListener('click',function(){
        alert('999')
    },false)
    box1.addEventListener('click',function(){
        alert('666')
    },false)

事件类型

在DOM中主要包括以下事件类型：

定时器

定时器的函数有两组，一共四个：

• setTimeout( ) 和 clearTimeout( )
• setInterval( ) 和 clearInterval( )
  这四个函数都是属于window对象的，Window是可以省略的。
  而且时间都是以毫秒为单位。

setTimeout（）
setTimeout(要执行的任务，时间) 挂在window对象上的，表示的含义是，多长时间后，执行一个任务，仅仅执行一次。

setInterval(function(){
    console.log('1s以后'); //执行的认为
},1000)	//多久后执行，1000毫秒等于1秒

clearTimeout( )
clearTimeout( 延时器编号)用于清除定时器，和setTimeout（）是对应的。

var timer = setTimeout(function(){
    console.log('1s之后');
},1000)
clearTimeout(timer) //清除定时器

注意：timer所返回的是延时器序号。
setInterval( )
setInterval(任务，时间) 定时器，接受两个参数，一个是任务，一个是时间，每隔一定的事件就会执行任务。多次执行（一直执行）,时间也是数值类型的，以毫秒为单位的.

var num = 0;
setInterval(function(){
	num++;
	console.log(num);
},2000);

clearInterval( )
clearInterval(定时器编号)； 清除定时器

clearInterval(timer);