常见的Dom操作

1.什么是DOM？

DOM又称文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。

2.什么是DOM树？

DOM树有两种，分别为节点树和元素树。

节点树：把文档中所有的内容都看成树上的节点；

元素树：仅把文档中的所有标签看成树上的节点。

3.DOM常用操作

1.查找节点

document.getElementById('id属性值');	返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');	返回拥有指定class的对象集合
document/element.getElementsByTagName('标签名');	返回拥有指定标签名的对象集合
document.getElementsByName('name属性值');	返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器');	仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');	返回所有匹配的元素
document.documentElement	获取页面中的HTML标签
document.body	获取页面中的BODY标签
document.all['']	获取页面中的所有元素节点的对象集合型

2.新建节点

document.createElement('元素名');	创建新的元素节点
document.createAttribute('属性名');	创建新的属性节点
document.createTextNode('文本内容');	创建新的文本节点
document.createComment('注释节点');	创建新的注释节点
document.createDocumentFragment( );	创建文档片段节点

3.添加新节点注（添加新节点和新建节点不同，新建的节点如果不添加到DOM中，是不会有任何效果的）

parent.appendChild( element/txt/comment/fragment );	向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );	向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName );	给元素增加属性节点
element.setAttribute( attributeName, attributeValue );	给元素增加指定属性，并设定属性值

4.删除节点

parentNode.removeChild( existingChild );	删除已有的子节点，返回值为删除节点
element.removeAttribute('属性名');	删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode );	删除指定属性，返回值为删除的属性

5.修改节点

parentNode.replaceChild( newChild, existingChild );	用新节点替换父节点中已有的子节点
element.setAttributeNode( attributeName );	若原元素已有该节点，此操作能达到修改该属性值的目的
element.setAttribute( attributeName, attributeValue );	若原元素已有该节点，此操作能达到修改该属性值的目的

不多说了，直接上代码

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>
  <h2>创建文本节点</h2>
  <button onclick="addText()">创建文本节点</button>
  <p></p>
  <script>
     function addText(){
	      //创建文本节点
	      var a=document.createTextNode('this is a 文本');	//创建文本节点	 
	      document.getElementsByTagName('p')[0].appendChild(a);//添加文本节点
		  document.getElementsByTagName('button')[0].innerHTML='你看我变了没？';//新增文本内容
		  var b=document.createAttribute('id');   //创建一个属性节点         也可以在创建时给他赋值
		  b.value='123';                  //给这个属性节点赋值
		  document.getElementsByTagName('p')[0].setAttributeNode(b);   //给p元素设置新的属性
		  document.getElementsByTagName('button')[0].setAttribute('id','buttonId');   //给button元素设置id属性	  
		  //创建新元素
		  var c=document.createElement('div');         //创建一个新元素div
		  var cul=document.createElement('ul');             //创建一个新元素 ul
		  var culli=document.createElement('li');             //创建一个新元素  li
		  culli.innerHTML='6';                                   //  新增文本内容
		  c.appendChild(cul).appendChild(culli);              //添加子节点
		  document.body.appendChild(c);                 //往body中添加子节点
		  
		  //等同于：
                  //var d="<ul><li>6</li>";        //字符串
                  //c.append(d);		            //jquery  append方法 
		  //document.body.appendChild(c); 
		   
	 }
  </script>
 </body>
 </html>