Javascript DOM7

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript DOM  07</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
		div {
			border: #00ccff 1px solid;
			width: 200px;
			padding: 30px;
			margin: 10px;
		}
		
		#div_1 {
			background-color: #00ccff;
		}
		
		#div_2 {
			background-color: #FFccff;
		}
		
		#div_3 {
			background-color: #cc00ff;
		}
		
		#div_4 {
			background-color: #00FF00;
		}
	</style>
  </head>
  
  <body>
		
		<script type="text/javascript">
		//       。
		//  ： div_1           。 
		function crtAndAdd() {
			/*
			 * 1，        。
			 * 2，  div_1  。
			 * 3，        div_1   。
			 */

			//1，     。  document  createTextNode  。 
			var oTextNode = document.createTextNode("         ");

			//2，  div_1  。
			var oDivNode = document.getElementById("div_1");

			//3，        div_1   。
			oDivNode.appendChild(oTextNode);
		}
		
		//  ： div_1            。
		function crtAndAdd2() {
			//1，         。
			var oButNode = document.createElement("input");
			oButNode.type = "button";
			oButNode.value = "     ";

			//2，  div_1  。
			var oDivNode = document.getElementById("div_1");

			//3，        div_1   。
			oDivNode.appendChild(oButNode);
		}
		
		//             。
		function crtAndAdd3(){
			/*
			 *                  。innerHTML.
			 *         html  。
			 */
			 
			//1，  div_1  。
			var oDivNode = document.getElementById("div_1");

			//oDivNode.innerHTML = "<input type='button' value='    '/>";
			oDivNode.innerHTML = "<a href='http://www.163.com'>     </a>";
		}
		
		//   div_2    。 
		function delNode() {
			//1,  div_2  。
			var oDivNode = document.getElementById("div_2");
			//    removeChild  。      。
			//2,  div_2    ，        removeChild， div_2  。
			oDivNode.parentNode.removeChild(oDivNode);
		}
		
		function delNode2() {
			//1,  div_2  。
			var oDivNode = document.getElementById("div_2");
			//2,  div   remvoeNode    。
			oDivNode.removeNode(false);//IE  
		}
		
		//     
		function delNode3() {
			//1,  div_2  。
			var oDivNode = document.getElementById("div_2");
			oDivNode.innerHTML = "";
		}
		
		//  ： div_3    div_1  。
		function updateNode() {
			/*
			 *   div-3 div-1.
			 *   replaceNode    。
			 */
			var oDivNode_1 = document.getElementById("div_1");
			var oDivNode_3 = document.getElementById("div_3");
			oDivNode_1.replaceNode(oDivNode_3);//IE  
		}
		
		function updateNode2() {
			/*
			 *   div-3 div-1.
			 *   replaceNode    。
			 */
			var oDivNode_1 = document.getElementById("div_1");
			var oDivNode_3 = document.getElementById("div_3");
			//     replaceChild  。
			oDivNode_1.parentNode.replaceChild(oDivNode_3, oDivNode_1);
		}

		//  ：   div_3  div-1，   div-3  。
		//     div_3    
		function cloneDemo() {
			var oDivNode_1 = document.getElementById("div_1");
			var oDivNode_3 = document.getElementById("div_3");
			var oCopyDiv_3 = oDivNode_3.cloneNode(true);
			//    replaceChild  。
			oDivNode_1.parentNode.replaceChild(oCopyDiv_3, oDivNode_1);
		}
		//firstNode = childNodes[0];
		//lastNode = childNodes[childeNodes.length-1];
		</script>
		<input type="button" value="       " onclick="crtAndAdd()"/>
		<input type="button" value="       2" onclick="crtAndAdd2()"/>
		<input type="button" value="       3" onclick="crtAndAdd3()"/>
		<input type="button" value="    " onclick="delNode()"/>
		<input type="button" value="    2" onclick="delNode2()"/>
		<input type="button" value="    3" onclick="delNode3()"/>
		<input type="button" value="    " onclick="updateNode()"/>
		<input type="button" value="    2" onclick="updateNode2()"/>
		<input type="button" value="    " onclick="cloneDemo()"/>
		<input type="button" value="    2" onclick="cloneDemo2()"/>
		<hr>
		<div id="div_1">
			
		</div>
		
		<div id="div_2">
			    ，day day up！
		</div>
		
		<div id="div_3">
			div      
		</div>
		
		<div id="div_4">
			       
		</div>
  </body>
</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Javascript DOM7

좋은 웹페이지 즐겨찾기