常用DOM操作

创建属性节点

• document.createAttribute(attributename)
  .attributename：必需，要创建属性节点的名称。

   <style>
         .attrs{
				color: red;
			}
	</style>		
<script> 
   window.onload=function（）{
                   //获取li集合
				var lis=document.getElementsByTagName('li');
				//创建class属性节点
				var attrs=document.createAttribute('class');
				//为属性节点赋值
				attrs.value='attrs';
				//为第二个Li添加一个class属性
				lis[1].setAttributeNode(attrs);<script>
				}
</script>

document.createElement() 方法可以创建一个元素对象

var p=document.createElement('div');
		     p.style.width='50px';
		     p.style.height='50px';
		     p.style.backgroundColor='darkred';
			var ull=document.getElementsByTagName('ul');
			ull.appendChild(p);

创建文档节点*

let obox = document.getElementById("box");
				
				//.document.createElement("p")创建一个p元素。
			  let p = document.createElement("p");
			  
			  p.document.createTextNode("softwhy.com")创建文本节点，并设置其文本内容为"softwhy.com"。
			  let textNode = document.createTextNode("softwhy.com");
			  
			  //.然后通过p.appendChild(textNode)方法将文本节点追加到p元素中
			  p.appendChild(textNode);
			
			  p.style.backgroundColor = "red";
			  p.style.width = "100px";
			  p.style.height = "100px";
			 // .最后再将p节点追加到div中。
			  obox.appendChild(p);

克隆一个节点cloneNode() 方法
Node.cloneNode(deep)）.Node：将要被克隆的节点
deep： 可选，布尔值，默认值为 false，规定是否进行深度克隆，如果参数为 true，将克隆 Node 节点以及它的后代节点
，如果参数为 false，只克隆 Node 节点本身。
案例中的文字就没有进行克隆

<div>你好啊</div>
  window.onload=function(){	
				var div1=document.getElementsByTagName('div')[0];
				var btn=document.getElementById('bt');
				btn.onclick=function(){
					var clonenode=div1.cloneNode(true);
					document.body.appendChild(clonenode);
				}
				}

removechild删除子节点

js:
    let btn1=document.getElementById('btn')
			  btn1.onclick=function(){
			  let obox=document.getElementById("box");
			  let lis=obox.getElementsByTagName("li");
			  obox.removeChild(lis[1]);
			    }
html:
			 <input type="button" value="abyixi" id="btn">
			<ul id="box">
			  <li>蚂蚁部落一</li>
			  <li>蚂蚁部落二</li>
			  <li>蚂蚁部落三</li>
			  <li>蚂蚁部落四</li>
			</ul>

remove方法可以删除节点自身。

window,onload=function(){
			var divs=document.getElementsByTagName('div');
			var btn1=document.getElementById('btn');
			btn1.onclick=function(){
				divs[0].remove();
			}
			}

replaceChild方法可以使用一个节点替换指定子节点

               nodeObject.replaceChild(new_node,old_node)
               （1）.nodeObject：父节点。
               （2）.new_node：必需，用以替换的节点。
               （3）.old_node：必需，将要被替换的子节点。

var btn2=document.getElementById('btn2');
           var box=document.getElementById('box');
           var lis=document.getElementsByTagName('li');
           
           var lis=box.children;
           
             var newnode=document.createElement('li');
           
           newnode.innerHTML='第五名';
            btn2.onclick=function(){
              box.replaceChild(newnode,lis[0]);}
 html:
	<button id="btn2">替换子元素</button>
	<ul id="box">
			<li>第一名</li>
			<li>第二名</li>
			<li>第三名</li>
		</ul>

show()

			（1）.IE浏览器不支持此方法。
			
			（2）.edge浏览器不支持此方法。
			
			（3）.谷歌浏览器支持此方法。
			
			（4）.opera浏览器不支持此方法。
			
			（5）.火狐浏览器不支持此方法。
			
			（6）.safria浏览器支持此方法。
			此方法可以显示Dialog对话框窗口

<script>
              window.onload=function(){
				var bt=document.getElementById('bt');
				var dialog=document.getElementById('navdialog')
				bt.onclick=function(){
					dialog.show();
				}	
</srcipt>

<input type="button" id="bt" value="查看效果" />
		<dialog id="navdialog">
			<p>孙雪莹</p>
		</dialog>

为toggle方法规定第二个参数，此参数规定方法是执行删除操作还是添加操作。

					（1）.true，执行添加操作。
					
					（2）.false，执行删除操作

j 讲解：点击按钮之后，可以切换样式类"a"添加或者删除，由于div元素已经具有样式类"a"
//那么首次的点击按钮可以删除样式类"a"
//当第二个点击按钮的时候，再添加此样式类"a"，以此类推。

        <style>
			.a{width: 150px;height: 60px;}
			.b{text-align: center;line-height: 60px;}
			.c{background-color: #1E90FF;color: #CCCCCC;}
		</style>
		
		<script>
		window.onload=function(){
			var div=document.getElementById('ant');
				var btt=document.getElementById('btt');
				btt.onclick=function(){
					div.classList.toggle('a');
					}
			}		
		</script>

blur	指定元素失去焦点时触发此事件，通常应用于表单元素
change	具有改变的意思，change事件会在元素数据发生变化的时候触发。
dblclick	件当连续快速双击元素对象时会触发此事件
focus	当指定元素对象获取焦点时，就会触发此事件
keydown	当一个按键被按下时此事件会被触发
keyup	事件当按键被松开时触发此事件
mousemove	事件鼠标指针在元素上移动时，触发此事件
mouseenter	当鼠标指针进入指定元素时触发mouseenter事件。
mouseleave	事件当鼠标指针离开指定元素的时候触发，与mouseenter事件对应
mouseout	事件 当鼠标指针离开指定元素时触发
mouseover	事件当鼠标移入指定元素或者其子元素时候触发mouseover事件。此事件与mouseenter事件比较类似，
mouseup	事件当鼠标按键被松开时会触发此事件。关于事件处理函数注册
mousedown	事件当鼠标按键被按下时就会触发此事件
resize	事件当调整浏览器窗口大小时会触发此事件
submit	表单中提交按钮被点击会触发submit事件
select	事件此事件会在input单行文本域或者多行文本域内文本被选中时触发。
scroll	事件当拖动滚动条时就会触发scroll事件

previousSibling 属性可以获取指定节点紧邻的前一个节点，只读属性。

如果不具有对应的节点，此属性返回 null

返回的节点具有如下特点：

（1）.必须是兄弟节点。

（2）.必须是紧邻的节点。

（3）.必须是上一个节点

previousElementSibling 属性可以获取当前节点紧邻的上一个同级元素节点，只读属性。

为了便于记忆和理解，previousElementSibling 可以分解成三个单词：

（1）.previous：前一个。

（2）.element：元素。

（3）.sibling：兄弟。

nextSibling和nextElementSibling与上面相反