JavaScript中的Dom方法

JavaScript中的Dom方法总结

DOM方法作用！

1. 能改变页面中的所有 HTML 元素
2. 能改变页面中的所有 HTML 属性
3. 能改变页面中的所有 CSS 样式
4. 能删除已有的 HTML 元素和属性
5. 能添加新的 HTML 元素和属性
6. 能对页面中所有已有的 HTML 事件作出反应
7. 能在页面中创建新的 HTML 事件

1：改变页面中的HTML元素

	1：document对象；
		<1>:document.getElementById(id);//通过ID获取元素
		<2>:document.getElementsByTagName(name);//通过标签名获取元素
		<3>:document.getElementsByClassName(name);//通过类名获取元素；
		例：
			<div id="box"></div>
			<div class="box"></div>
			<div></div>
			
			<script>
					var getDomId = document.getElementById('box');
					    getDomId.innerHTML = "通过Id获取"；
					var getDomClass = document.getElementsByClassName("box")[0];
					    getDomClass.innerHTML = "通过类获取"；
					var getDomTag = document.getElementsByTagName('div')[2];
					  	getDomTag.innerHTML = "通过标签名获取"；
					 //：注意，类名跟标签名获取的时候需要有下标的；因为Id的唯一性所以Id不用下标；
			</script>
	2：属性方法；
		<1>：innerHTML;//改变元素的内容；
				句式：el.innerHTML = "new content";
				例子同上；
		<2>:attributes；//获取该元素的所有属性；
				句式：el.attributes[下标].key = new value;
				例：<input id="ipt" type="text" value="123">
				 var ipt = document.getElementById("ipt");
    				  ipt.attributes[2].value = "354";
    				  //关于attributes有四个方法，分别是setAttribute、getAttribute、removeAttribute、createAttribute；
    				  例：<input id="ipt" type="text">
						  var ipt = document.getElementById("ipt")
    					  var val = document.createAttribute("value");
    						  ipt.setAttributeNode(val);
   						      console.log(ipt)//多了一个属性value；
   						      //setAttribute、getAttribute、removeAttribute都是操作Node的；这儿不一一列举了；
   	    <3>:style;修改元素的样式的；
   	    	句式：el.style.property;
   	    	例：<div id="box">123</div>
   	    	<script>
   	    		var box = document.getElementById('box');
   	    		box.style.color = "red";
   	    	</script>

2：元素的删除添加创建与替换

	1：document.createElement(el)；//创建元素；
		  例：
		  	var div = document.createElement("div");
		  	console.log(div);//<div></div>;创建好一个div
	2：document.removeChild(el);//删除父节点的一个子节点；
		  例：
		   <div id="box">
    			<p>123</p>
		   </div>	
		   <script> 
		     var box = document.getElementById("box");
  				 box.removeChild(box.children[0]);//children获取该节点的子集合
		   </script>
	3：document.appendChild(el);//向父节点添加元素；
						//向父节点的尾部添加的；insertBefore是向父节点的开头添加的
			例：
			<div id="box">
    			<p>123</p>
		   </div>	
		   <script> 
		     var box = document.getElementById("box");
		     var div = document.createElement("div");
		     	 div.innerHTML = "356";
  				 box.appendChild(div);
  			 var H1 = document.createElement("h1");	 
  			 	H1.innerHTML = "之前"；
  			 	box.iinsertBefore(H1,box.children[0]);
		   </script>
	4：document.replaceChild(el);//替换元素；
	       例：
	       		<div id="box">
    				<p>123</p>
   					<b>qweq</b>
				</div>
	           <script>
 				  var box = document.getElementById("box");
  				  var mark = document.createElement('mark');
           		      mark.innerHTML = "123423423"
         			  box.replaceChild(mark,box.children[0])；
			   </script>