Js 基础操作DOM方法草稿

/***********************************index.html*****************************************/
<!doctype html>
<html>
      <head>
	       <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
           <script src="3.js"></script>
		   <title>js---DOM</title>
		   <style>

		        .bb{
				   width:200px;
				   height:200px;
				   background:red;
				}
				.cc{
				   width:200px;
				   height:200px;
				   background:green;
				}
		   </style>
	  </head>
	  <body>
	      <div id="box"><span>盒子</span>模型</div>
	  </body>
</html>


/**********************************js操作********************************************/

window.onload = function(){
	//想要操作盒子box 必须先找到box
	//通过id查找 
	var box = document.getElementById("box");
	//打印所有的子节点 
	//document.write(box.childNodes);       //object NodeList
	//document.write(box.childNodes.length);  //<span>模型</span><div>盒子</div>
	//模型
    //alert(box.childNodes[0].nodeName);	     //大儿子 span
	//alert(box.childNodes[1].nodeName);       //二儿子 #text 文本的 
	//alert(box.childNodes[1].nodeType);       //span   #text  3 
	//alert(box.childNodes[1].nodeValue);       //模型  
    //alert(box.childNodes[0].childNodes[0].nodeValue); 
    //获取大儿子(第一个儿子节点childNodes[0])
    //alert(box.firstChild.nodeName);	
	//获取最后一个子节点 
	alert(box.lastChild.nodeName);
}

/***********************************index.html*******************************************/

<!doctype html>
<html>
      <head>
	       <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
           <script src="1.js"></script>
		   <title>js---DOM</title>
		   <style>

		        .bb{
				   width:200px;
				   height:200px;
				   background:red;
				}
				.cc{
				   width:200px;
				   height:200px;
				   background:green;
				}
		   </style>
	  </head>
	  <body>
	      <div id="box" aaa="bbb" title="盒子" name="dd" class="bb" style="width:100px;height:100px; background:#ccc;">盒子模型</div>
	  </body>
</html>


/***********************************js操作返回***************************************/

window.onload = function(){
	//想要操作盒子box 必须先找到box
	//通过id查找 
	//var box = document.getElementById("box");
	
	//获取id属性 
	//alert(box.id);
	
	//获取title属性 
	//alert(box.title);
	
	//获取name
	//alert(box.name); //undefined
	
	//获取class
	//alert(box.className); //undefined
	//box.className = "cc";
	
	//获取style
	//alert(box.style);  //返回是 object CSSStyleDeclaration  item() 方法返回 CSS 样式中指定索引位置的属性名，索引值从 0 开始。
	//获取宽度 
	//alert(box.style.width);
	//获取背景色 
	//alert(box.style.backgroundColor);  //rgb(204, 204, 204)
	
	//获取aaa属性的值(不合法)
	alert(box.aaa);  //null
}

不太懂自己翻翻看看许多时候吧js 当成PHP去写也是一件很头疼的事哎！

Js 基础操作DOM方法草稿

猜你喜欢