DOM详解（前端必备）

我们常常在面试的时候会被问到什么是DOM，接下来我会和大家一起共同探讨什么是DOM

DOM

文档对象模型（Document Object Model），用于操作“页面上元素”的API，比如让盒子移动，改变盒子样式颜色等

**

节点

构成HTML的基本单位，网页上的每一部分都是一个节点，比如html标签，文本，属性等
常见节点主要分为四类
文档节点：整个HTML文档就是一个文档节点
元素节点：HTML标签（如div，img等）
属性节点：元素属性（如src，class，id等）
文本节点：HTML中的文本内容

重点：DOM是由节点构成，所有节点都是对象

DOM节点的操作例子：

创建节点

<script type="text/javascript">
    var a1 = document.createElement("div");   //创建一个li标签
    var a2 = document.createElement("abcd");   //创建一个不存在的标签

    console.log(a1);
    console.log(a2);

    console.log(typeof a1);
    console.log(typeof a2);
</script>

插入节点

	父节点.appendChild(新的子节点);	 //父节点的最后插入一个新的子节点
	父节点.insertBefore(新的子节点,作为参考的子节点)	//在参考节点前插入一个新的节点

删除节点

	父节点.removeChild(子节点);	 //可以删除父节点中指定的子节点
	node.parentNode.removeChild(node); 	//可以通过这样删除本身节点

复制节点

	要复制的节点.cloneNode();	//这里只复制节点本身，不复制子节点
	要复制的节点.cloneNode(true);	//带true复制节点本身包括子节点

元素节点的获取有三种方式

var div1 = document.getElementById("box1");	//获取一个元素节点
var attribute = div1.getAttributeNode("id");	获取box1的属性节点
var arr1 =  document.getElementsByTagName("div");	//通过标签名获取元素节点数组
var arr2 = document.getElementsByClassName("xixi")	//通过类名获取元素节点数组

nodeType属性

• nodeType == 1 表示的是元素节点（标签） 。记住：在这里，元素就是标签。

• nodeType == 2 表示是属性节点。

• nodeType == 3 是文本节点。