Web前端之DOM

什么是DOM

DOM，Document object model文档对象模型。HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 将 HTML 文档表达为树结构，html文件中每个标签都是一个节点node

对象是一种独立的数据集合，有对应的属性和方法。
而js中对象分类三种：

• 用户定义对象
• 内建对象： Array Date Math
• 宿主对象： 由浏览器提供的

DOM中的节点分类

• 元素节点 element node
• 文本节点 text node
• 属性节点 attribute node

获取元素节点对象

getElementById() 获取单个对象

		<ul id='foodList'>
			<li class="item">milk</li>
			<li class="item">fruit</li>
			<li>meat</li>
	    </ul>
		var eleNode=document.getElementById('foodList');
		console.log(eleNode); //获取ul中所有内容
		console.log(typeof eleNode); //object

getElementsByTagName() 获取出来的是一个节点对象集合，有点像数组但是不是数组

		var alist=document.getElementsByTagName('li');
		console.log(alist);  //HTMLCollection(3) [li.item, li.item, li]		

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

		var aitem=document.getElementsByClassName('item');
		console.log(aitem); //HTMLCollection(2) [li.item, li.item]

getAttribute()获取属性值 。 有一个必须的参数，这个节点对象的名字。

		<p title="选出你要吃的东西">我们这啥都有</p>
	
		var oP=document.getElementsByTagName('p')[0];
		var title=oP.getAttribute('title');
		var className=oP.getAttribute('class');
		console.log(title);//打印出title的内容:选出你要吃的东西
		console.log(className);//p里面没有class：null

setAttribute()设置属性值。

oP.setAttribute('id','box');//在p标签加上一个id=box

querySelector()方法返回文档中匹配指定 CSS 选择器的一个元素

document.querySelector("#aa");

节点属性

nodeName节点名称

nodeName属性：

nodeName属性:节点的名称,是只读
1、 元素节点的nodeName与标签名相同
2、 属性节点的nodeName与属性的名称相同
3、文本节点的nodeName永远是#text
4、 文档节点的nodeName永远是#document
5、 注释节点的nodeName永远是#comment

nodeValue节点的值

nodeValue属性:节点的值
1.元素节点的nodeValue是undefined 或null
2.文本节点的nodeValue是文本自身
3.属性节点的nodeValue是属性的值

nodeType节点类型

nodeType属性:节点的类型,是只读的。
以下常用的几种节点类型:
元素类型              节点类型
元素                           1
属性                           2
文本                           3
注释                           8
文档                           9
示例：

	<div id="father"><p>ppt</p><p>yaner</p></div>
	<div class="uncle"><p>lulu</p><p>lalla</p></div><div id="box" title="我是文本">这是一个文本<!-- 这是注释 --></div>

		//1.元素节点
		var aDiv=document.getElementById('box');
		console.log(aDiv.nodeName+'*'+aDiv.nodeValue+'*'+aDiv.nodeType);//DIV*null*1

		//2.获取属性节点
		var gAttr=aDiv.attributes[0];
		console.log(gAttr.nodeName+'*'+gAttr.nodeValue+'*'+gAttr.nodeType);//id*box*2

		//3.获取文本节点
		var gText=aDiv.childNodes[0];
		console.log(gText.nodeName+'*'+gText.nodeValue+'*'+gText.nodeType);//#text*这是一个文本*3

		//4.获取注释节点
		var gComment=aDiv.childNodes[1];
		console.log(gComment.nodeName+'*'+gComment.nodeValue+'*'+gComment.nodeType);//#comment* 这是注释 *8

		//5.验证文档节点类型
		console.log(document.nodeType);//9

节点对象常用属性

获取子节点childNodes
获取第一个子节点firstChild
获取最后一个子节点lastChild
获取父节点parentNode
获取上一个兄弟节点nextSibling
获取下一个兄弟节点previousSibling
示例：

//如果换行会被读取为#text
console.log(aFather.childNodes);//获取子节点
console.log(aFather.childNodes[0]);//获取第一个子节点
console.log(aFather.firstChild);//获取第一个子节点
console.log(aFather.childNodes[aFather.childNodes.length-1]);获取最后一个子节点
console.log(aFather.lastChild);//获取最后一个子节点
console.log(aFather.parentNode);//获取父节点整个body
console.log(aFather.parentNode.parentNode);//获取父亲的父亲节点

	console.log(aFather.nextSibling);//获取下一个兄弟
	console.log(aFather.previousSibling);//获取上一个兄弟

动态地操作节点

1.创建节点createElement()
2.插入节点appendChild()
在参考节点前面插入insertBefore ( newNode, node)
3.删除节点removeChild()
4.替换节点replaceChild()
5.创建文本节点createTextNode()
innerHTML可以在newNode节点中添加文本、标签等等
示例：

	<div id="box">
		<p id="active">i ppt</p>	
	</div>
	<script type="text/javascript">
		//获取节点元素
		var gDiv=document.getElementById('box');
		var gP=document.getElementById('active');

		//创建新节点
		var newNode=document.createElement('span');
		var newNode2=document.createElement('p');
		var newNode3=document.createElement('a');

		//设置节点属性
		newNode.setAttribute('class','new1');
		newNode3.setAttribute('href','https://blog.csdn.net');
		//插入节点位置
		gDiv.appendChild(newNode);
		//第一个参数是新插入的节点，第二个节点是参考节点
		gDiv.insertBefore(newNode2,gP);
		//设置节点文本内容
		// var cText=document.createTextNode('hi，我是刚来的');
		// newNode.appendChild(cText);
		newNode.innerHTML='<a href="#">baidu you konw</a>';
		newNode2.innerHTML='<a href="#">lallaxixi,一个新的</a>';
		newNode3.innerHTML='我是为了被换掉而存在的';

		//innerHTML可以在newNode节点中添加文本、标签等等，
		newNode=null;//释放对象
		//删除节点
		gDiv.removeChild(gP);//从一个节点中删除它的孩子节点
		//替换节点
		gDiv.replaceChild(newNode3,gP);//第一个参数是你要替换成哪个节点对象，第二个参数是你要替换掉哪个节点对象

设置样式

事件