js數組 DOM - JavaShuo

JS數組javascript

數組對象的做用是：使用單獨的變量名來存儲一系列的值。
數組的建立方式：
一、數組直接量（字面量）形式建立數組；
二、經過構造函數Array()建立數組；css

注意：若是你須要在數組內指定數值或者邏輯值，那麼變量類型應該是數值變量或者布爾變量，而不是字符變量。html

對象沒有length屬性java

三、訪問數組node

經過指定數組名以及索引號碼，你能夠訪問某個特定的元素。web

四、修改已有數組中的值數組

如需修改已有數組中的值，只要向指定下標號添加一個新值便可。app

DOMdom

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>我是標題</title>
</head>
<body>
<!--  -->
<div id="box" class="div" style="width: 30px;height: 50px;" name="nana">我是一個文本節點<!--我是註釋節點--><span name="nana">我是一個span標籤</span></div>
<script type="text/javascript">
	//元素節點、文本節點、屬性節點、註釋節點

	// 	nodeName	nodeValue	nodeType -->瞭解
	// 元素節點  標籤名		null		 1
	// 屬性節點  屬性名		屬性值		 2
	// 文本節點  #text		文本值	     3
	// 註釋節點#comment	註釋內容		 8
	

	//獲取節點全部的子節點  節點.childNodes
	//獲取節點全部屬性節點  節點.attributes

	//1. 元素節點  4種方式獲取
	var oDiv = document.getElementById("box");
	var oDiv = document.getElementsByClassName("div")[0];
	var oDiv = document.getElementsByTagName("div")[0];
	//var oDiv = document.getElementsByName("nana")[1];
	//console.log( oDiv.innerHTML );

	//獲取節點全部的子節點
	console.log( oDiv.childNodes );
	var oDivChilds = oDiv.childNodes;
//	//2.文本節點
	console.log( oDivChilds[0].nodeName,oDivChilds[0].nodeValue,oDivChilds[0].nodeType );
//	//3.註釋節點
//	console.log( oDivChilds[1].nodeName,oDivChilds[1].nodeValue,oDivChilds[1].nodeType );
//
//	//4.獲取元素節點的屬性節點
	console.log( oDiv.attributes );
//	var oDivAttris = oDiv.attributes;
//	console.log( oDivAttris[0].nodeName,oDivAttris[0].nodeValue,oDivAttris[0].nodeType );






</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="new_file.js"></script>
</head>
<body>
	<input type="radio" name="" /><input type="text" name="" /><div id="box">
	<span>我是span1</span>
	<span>我是span2</span></div><input type="text" name="" />
	<script type="text/javascript">
		
// 怎麼獲取前面全部的兄弟元素？？？？？？


		var oDiv = $("box");
		// 1.獲取全部的子節點 childNodes
		console.log( oDiv.innerText );
		// 2.獲取第一個子節點 firstChild
		console.log( oDiv.firstChild );
		// 3.獲取最後一個子節點 lastChild
		console.log( oDiv.lastChild );
		// 4.獲取父節點  parentNode
		console.log( oDiv.parentNode );
	
		////////////////兄弟關係/////////////////
		// 5.獲取前一個兄弟節點  previousSibling
		console.log( oDiv.previousSibling );
		// 6.獲取下一個兄弟節點  nextSibling
		console.log( oDiv.nextSibling );
	
		///////////////////根節點/////////////////
		console.log( oDiv.ownerDocument );
		
		
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title></title>
	<style type="text/css">
		html,body{
			height: 100%;
		}
		.box{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			position: absolute;
			animation: move 5s ease-out forwards infinite;
			/*animation: 動畫名 播放事件 播放速度 反向播放 重複次數;*/
		}
		@-webkit-keyframes move{
			50%{left:800px;top:500px;opacity: 0;}
			100%{left:0px;top:100px;opacity: 1;}
		} 
		@-moz-keyframes move{
			50%{left:600px;top:500px;opacity: 0;}
			100%{left:0px;top:100px;opacity: 1;}
		} 
		@keyframes move{
			80%{left:400px;top:500px;opacity: 0;}
			50%{left:0px;top:100px;opacity: 1;}
		} 
	</style>
</head>
<body>
<button onclick="createDiv()">建立div</button>
<script type="text/javascript" src="new_file.js"></script>
<script type="text/javascript">
	//document.createElement("div");
	function createDiv(){
		var oDiv = document.createElement("div");
		//oDiv = $("div");
		//console.log(oDiv)
		//設置div的樣式
		// 方法一：用js設置樣式
//		oDiv.style.width = "200px";
//		oDiv.style.height = "200px";
//		oDiv.style.backgroundColor = randomColor();
//		oDiv.style.float = "left";
//		// 方法二：用css設置樣式
		oDiv.className = "box";
		oDiv.style.backgroundColor = randomColor();
		oDiv.style.left =  ( Math.random()*($w()-40) )+"px";
		oDiv.style.top = ( Math.random()*($h() -40) )+100+"px";
	
		// 父節點.appendChild(子節點) 將子節點添加到父節點孩子列表的末尾
		document.body.appendChild(oDiv);
	}
</script>
</body>
</html>

//獲取滾動高度
function $top(){
	return document.documentElement.scrollTop||document.body.scrollTop;
}
//獲取可視窗口的寬
function $w(){
	return document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth;
}

//獲取可視窗口的高
function $h(){
	return document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
}

//根據id獲取元素節點
function $(idName){
	return document.getElementById(idName);
}

//根據標籤名獲取元素節點
function $tag(tag){
	var tagInput=document.getElementsByTagName(tag);
	return tagInput;
}

// //根據class值獲取元素節點
// function $classValue(tag){
// 	var clvInput=document.getElementsByTagName(clv);
// 	return clvInput;
// }

//隨機顏色
function randomColor(choose){
	//#ffffff
	if(1){
		var str="0123456789abcdefABCDEF";
		var bgc="#";
		for(var i=0; i<6; i++){
			var index=parseInt(Math.random()*str.length);
			bgc+=str[index];
		}
		return bgc;
	}

	//rgb
	if(2){
		var r=parseInt(Math.random()*256);
		var g=parseInt(Math.random()*256);
		var b=parseInt(Math.random()*256);

		var rgb1="rgb("+r+","+b+","+b+")";
		return rgb1;
	}
}

//獲取內部外部樣式表中的屬性的屬性值
function getStyle(obj,name){
	//IE專用 obj.currentStyle!=null
	if(obj.currentStyle){
		return obj.currenStyle(name);  //IE專用
	}else{
		return window.getComputedStyle(obj,null)[name];
	}
}