JavaScript学习笔记之DOM篇，带你全面了解什么是DOM

DOM在前面的JavaScript学习笔记（一）–JS基础里简单提到过，它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型，是JavaScript的重要组成部分，现在带大家详细了解一下什么是DOM。

基本概念

DOM的全称是Document Object Model，即文档对象模型，是一套对文档的内容进行抽象和概念化的方法，它允许脚本控制Web页面、窗口和文档。

DOM不是JavaScript语言的一部分，而是内置在浏览器中的一个应用程序接口。如果没有DOM，JavaScript将是另外一种脚本语言；而有了DOM，它将成为制作动态页面的强有力工具。当然，我们可以简单的理解为一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。

DOM是一组用来描述脚本怎样与结构化文档进行交互和访问的web标准。他的功能是把浏览器支持的文档（包括HTML、XML、XHTML）当作一个对象来解析。DOM实际上是一个操作文档里面所包含内容的一个编程的API，允许开发人员从文档中读取、搜索、修改、增加和删除数据。DOM与平台和语言无关，只要是支持DOM的平台和编程语言，都可以用来编写文档。

DOM定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样式以及行为。每一个网页元素（一个HTML标签）都对应着一个对象。我们可以把DOM认为是页面上数据和结构的一个树形表示，树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。

节点（node）

节点这个词是一个网络用语，代表了网络中的一个连接点，一个网络就是由一些节点构成的集合。在现实世界中，一切事物都由原子构成，原子就是现实世界的节点。原子还可以进一步分解为更细小的亚原子微粒，这些亚原子微粒同样也是节点。

在DOM中，文档是由节点构成的集合，HTML文档中所有内容都被视为节点，DOM被视为节点树的HTML。通过以下代码来认识一下节点的类型。

<!--头部-->
<div title="a gentle reminder">hello world</div>

文档节点（document）：当前html文档。
注释节点（comment）：< !–头部–>
元素节点（Element）：< div>< /div>
属性节点（attribute）：title=“a gentle reminder”
文本节点（text）：hello world

节点信息相关属性	层次结构相关属性	方法
nodeType	childNodes	appendChild(child)
nodeName	firstChild	insertBefore(new,ref)
nodeValue	lastChild	removeChild(child)
	nextSibling	replaceChild(new,old)
	parentNode	cloneNode([boolean]) 参数为true时，表示除了克隆当前对象，还克隆子元素
	parentElement
	ownerDocument

需要注意的是，nodeType 属性返回节点的类型，用数字来表示。如果是元素节点，返回 1；如果是属性节点, 返回 2；如果是文本节点，返回 3；如果是注释节点，返回 8。该属性是只读的。

基本的DOM方法

document.getElementById()： 返回对拥有指定 ID 的第一个对象的引用。
document.getElementsByName() ： 返回带有指定名称的对象的集合。
document.getElementsByTagName() ： 返回带有指定标签名的对象的集合。
document.getElementsByClassName()： 返回带有指定类名的对象的集合。
document.querySelector() ： 返回匹配指定 CSS 选择器的一个对象的引用。
document.querySelectorAll() ： 返回匹配指定 CSS 选择器的的对象的集合。
document.body： 提供对 < body> 元素的直接访问。
document.forms： 返回对文档中所有 Form 对象引用。
表单名.控件名.value： 获取表单控件的值。
document.title： 返回当前文档的标题。
createElement()： 创建一个节点。
innerText： 向当前元素内部添加文本节点。
innerHTML： 向当前元素内部添加HTML代码片段。
style： 获取或者设置样式。
getAttribute(key)： 返回指定属性名的属性值。
getAttributeNames()： 返回指定对象的属性名。
setAttribute(key,val)： 添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>添加</button><button>导入</button><button>批量删除</button><a href="" id="btn_export">导出</a><div id="content"></div><script>var btns = document.querySelectorAll("button");var $content = document.querySelector("#content");// 点击添加后，向content中添加一个h2元素btns[0].onclick = function(){var $h2 = document.createElement("h2");$h2.innerText = "这是一个新标题";$content.appendChild($h2)}// 移除$content中所有的孩子节点btns[2].onclick = function(){Array.from(document.querySelectorAll("#content > *")).forEach((item)=>{$content.removeChild(item)})}document.querySelector("#btn_export").onclick = function(event){alert(1);console.log(event);//取消事件的默认动作event.preventDefault();}</script>
</body>
</html>

DOM事件机制

javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件三要素

事件源：dom对象（元素节点）。
事件处理函数：匿名函数。（在未来的某个时刻执行，由浏览器来调用，浏览器在调用的时候会将事件对象传递给我们这个函数）。
事件对象：与特定事件相关且包含有关该事件详细信息的对象。

事件类型

onclick：用户点击时执行。
onload：用户进入时执行。
onunload。用户离开时执行。
onmouseover：鼠标移入时执行。
onmouseout：鼠标移出时执行。
onmousedown：鼠标摁下时执行。
onmouseup：鼠标松开时执行。

事件流（事件冒泡）

元素具有嵌套关系。

<style>#outer,#center,#inner {border: 1px solid #ccc;box-sizing: border-box;border-radius: 50%;}#outer {width: 500px;margin: 0 auto;height: 500px;padding: 50px;}#center , #inner{height: 100%;padding: 50px;}
</style>
<div class="outer"><div class="center"><div class="inner"></div></div>
</div>

每层元素都绑定事件处理函数。

var $outer = document.querySelector("#outer")
var $center = document.querySelector("#center")
var $inner = document.querySelector("#inner")$outer.onclick = function(event){console.log('outer',event.target);
}
$center.onclick = function(event){console.log('center',event.target);event.stopPropagation();
}
$inner.onclick = function(event){console.log('inner',event.target);event.stopPropagation();
}

操作。
比如：当我们点击inner的时候，实际上也点击center、outer。
事件捕获： outer -> center -> inner
事件冒泡： inner -> center -> outer

需要注意的是，事件处理函数的调用默认是按照事件冒泡的顺序来调用。

事件绑定

事件源 . on事件类型 = 事件处理函数(事件对象){ }

dom.onClick = function(event){addEventListener();   //事件绑定//attachEvent()       removeEventListener();  //事件移除//detachEvent();
}

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。兼容DOM的浏览器默认会将event对象传入到事件处理函数中。

dom.onclick=function(event){console.log(event);
}
dom.addEventListener("click",function(event){console.log(event);
},false);

对象属性	说明
event.target	事件的目标元素（操作的元素）
event.clientX、event.clientY	事件触发时候的坐标
event.preventDefault()	取消事件的默认行为
event.stopPropagation()	取消事件冒泡

事件代理

将事件绑定在父元素上而非子元素上。

添加业务： 点击添加按钮 -> 弹模态框 -> 输入数据 -> 保存 -> ajax -> 后台服务器 -> 关闭模态框 ->刷新页面 -> 通知保存成功。

Javascript dom与jQuery的对比

业务	javascript dom	jQuery
选择元素	querySelector()	选择器 $("")
dom操作	无法进行批量操作	可以实现批量操作
事件绑定	兼容性较差	兼容性，高效，批量 ,方法简洁
	dom.onClick = function(event){}	$(’.btn_del’).click
dom层级关系	操作繁杂	操作简练

jQuery 实际上是对于dom api封装，让用户使用dom方法变得更加简洁，下一篇文章将对jQuery展开详细说明~