一，什么是dom

DOM（文档对象模型）是针对 HTML和 XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM 脱胎于Netscape及微软公司创始的 DHTML（动态 HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

二，DOM0

JavaScript在早期版本中提供了查询和操作Web文档的内容API（如：图像和表单），在JavaScript中定义了定义了'images'、'forms'等，因此我们可以像下这样访问第一张图片或名为“user”的表单：

document.images[0]
document.forms['user']

还有我们所熟知的onclick事件，也是与DOM0级的事件。

<div id="container" onclick="log1()">点我</div>
<script>	
	function log1() {
		console.log('log1......');
	}
	// 移除事件
	container.onclick = null
</script>

三，DOM1

大家熟知的Node，document, document.createElement都是在DOM1级别定义的。

四，DOM2

我们熟知的·addEventListner, document.body.style， getElementById这些都是DOM2级别的东西。

至于dom3和dom4，平时开发很少用到。

五，节点类型

DOM节点共有12种类型，不过常见的只有3种（其他的不用管）。

• （1）元素节点

• （2）属性节点

• （3）文本节点

六，节点操作

1，获取元素

获取元素，准确来说，就是获取“元素节点（注意不是属性节点或文本节点）”。对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了，才能对其进行相应的操作。

只不过css选择器是CSS的操作方式，而JavaScript却有着属于自己的另一套方法。在JavaScript中，我们可以通过以下6种方式来获取指定元素。

（1）getElementById()

<div id="div1">JavaScript</div>
var oDiv = document.getElementById("div1");

（2）getElementsByTagName()

<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");
oLi[2].style.color = "red";

（3）getElementsByClassName()

<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li class="select">JavaScript</li>
    <li class="select">jQuery</li>
    <li class="select">Vue.js</li>
</ul>
var oLi =document.getElementsByClassName("select");
oLi[0].style.color = "red";

（4）querySelector()和querySelectorAll()

JavaScript新增了querySelector()和querySelectorAll()两个方法，使得我们可以使用CSS选择器的语法来获取所需要的元素。

document.querySelector("#main")
document.querySelector("#list li:nth-child(1)")
document.querySelectorAll("#list li")
document.querySelectorAll("input:checkbox")

（5）getElementsByName()

对于表单元素来说，它有一个一般元素都没有的name属性。如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现。

 <label><input type="radio" name="status" value="本科" />本科</label>
 var oInput =document.getElementsByName("status");
oInput[0].checked = true;

（6）document.title和document.body

由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门为我们提供了两个非常方便的方法：document.title和document.body。

document.title = "测试文本？";
document.body.innerHTML = "<strong style='color:red'>测试。</strong>";

2，创建新的元素节点

使用createElement()来创建一个元素节点

使用createTextNode()来创建一个文本节点

然后可以将元素节点与文本节点“组装”成为文档片段（此时的文档片段是无根浮萍，因为还没插入到dom中）。

var e1 = document.createElement("元素名");      //创建元素节点
var txt = document.createTextNode("文本内容");   //创建文本节点
e1.appendChild(txt);  

在创建元素节点的时候，还可以为其添加属性：

var oImg = document.createElement("img");
oImg.className = "pic";
oImg.src = "img/test.png";
oImg.style.border = "1px solid #000000";
document.body.appendChild(oImg);

3，插入元素节点

（1），appendChild()

A表示父元素，B表示动态创建好的新元素。将B插入到父元素A的内部子元素的 末尾

A.appendChild(B);

（2）、insertBefore()

A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素。

A.insertBefore(B,ref);

4，删除元素节点

A.removeChild(B);

A表示父元素，B表示父元素内部的某个子元素。用这个方法可以删除父元素下的某个子元素。

var oUl = document.getElementById("list");
//删除最后一个子元素
oUl.removeChild(oUl.lastElementChild);  

5，复制元素

el.cloneNode(boolean)

如果需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。需要注意克隆出来的依旧是无根浮萍的文档片段。需要插入html中才算数。

6，替换元素

A.replaceChild(new,old);

A表示父元素，new表示新子元素，old表示旧子元素。

7，查找父元素

el.parentNode

8，查找子元素

（1）childNodes、firstChild、lastChild
（2）children、firstElementChild、lastElementChild

值得注意的是第一行childNodes获取的是所有的子节点。这个子节点是包括元素节点以及文本节点（换行符也算一个文本节点）的。

而第二行children获取的是所有的元素节点，不包括文本节点。

9，查找兄弟元素

（1）previousSibling、nextSibling
（2）previousElementSibling、nextElementSibling

和之前一样，previousSibling和nextSibling查找出来的可能是文本节点（一般是空白节点），因此如果你希望只操作元素节点，可以使用previousElementSibling和nextElementSibling。

七，dom元素节点的属性操作

在JavaScript中，有两种操作HTML元素属性的方式：一种是使用“对象属性”；另外一种是使用“对象方法”。

（1），对象属性操作

获取元素节点的某个属性值

el.attr

使用el.attr这种方式，不仅可以用来获取静态HTML元素的属性值，还可以用来获取动态创建的DOM元素中的属性值。

设置元素节点的某个属性值

el.attr = "value";

如修改样式：

el.style.border = "1px solid #000000";

（2），对象方法操作

获取元素节点的某个属性值

el.getAttribute("attr")

值得注意的是，当是自定义属性，也就是这个属性是用户自己定义的而不是元素自带的。此时我们使用obj.attr（也就是对象属性方式）是无法实现的，只能用getAttribute("attr")（也就是对象方法方式）来实现。

设置元素节点的某个属性值

el.setAttribute("attr","值")

移除元素节点的某个属性值

el.removeAttribute("attr")

判断元素是否具有某个属性值

el.hasAttribute("attr")

八，元素节点的样式操作

（1），获取CSS属性值

getComputedStyle(el).attr

另外，值得注意的是，el.style.att也能获取css的属性值。但是，obj.style.attr只可以获取元素style属性中设置的CSS属性（即行内样式），对于内部样式或者外部样式，它是没办法获取的。

而getComputedStyle(el).attr则是都可以获取到。

（2），设置CSS属性值

el.style.attr = "值";

值得注意的是，这个设置的是行内样式。

（3），cssText一次性设置CSS属性值

el.style.cssText = "值";

例如：

oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";