js dom操做選擇器，dom操做複習

時間 2019-11-17
原文原文鏈接
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div{padding:20px;}
		@-webkit-keyframes start1 {
			0%,30% {opacity: 0;-webkit-transform: translate(0,8px);}
			60% {opacity: 1;-webkit-transform: translate(0,0);}
			100% {opacity: 0;-webkit-transform: translate(0,-10px);}
		}
	</style>
</head>
<body style="overflow:hidden;">
	<div>
		<p>11111</p>
		<p id='n'>2222222</p>
		<p>3333333</p>
	</div>
	<form id="f">
		<input name="aaa" type="radio" value="111">111
		<input name="aaa" type="radio" value="222">222
		<input name="aaa" type="radio" value="333">333
		<div>
			不是直接子元素 
			<p>不是直接子元素</p>
		</div>
	</form>
	<div id="father">
		<p>第一個元素是我嗎？？？</p>
		<p>第一個元素是我嗎？？？</p>
		<p>最後一個元素是我嗎？？？</p>
	</div>
	<script>

		/* 值得注意的是nodelist並非一個真正意義上的數組，他是一個類數組對象
		 類數組對象和數組相似，但實際上他依然是一個對象，能夠經過(typeof nodelist !="object" && nodelist.constructor == Array)來判斷。
		 只是把平時咱們習慣用的鍵改爲數組命名，並添加一個length屬性，以下所示：
		 {
			"1":123,
			"2":234,
			length:2
		 }
		 */

		// 根據id獲取node，這個在ie7下會獲取到name等於n的元素能夠經過getAttributeNode('id').value進行判斷
		var oid = document.getElementById('n');
		console.log("id獲取",oid)

		// 根據tagname獲取nodes獲得的是一個nodelist
		var nodes = document.getElementsByTagName('p');
		console.log("根據tagname獲取",nodes)

		// getElementByName 根據name屬性選擇，返回nodelist
		var nodes1 = document.getElementsByName('aaa');
		console.log("根據name屬性選擇，返回nodelist:",nodes1);

		// 根據css選擇器獲取nodes獲得的是一個node   ie8+
		var dom = document.querySelector("body [name='aaa']");
		console.log("querySelector選擇：",dom)

		// 根據css選擇器獲取nodes獲得的是一個nodelist ie8+
        var doms = document.querySelectorAll("input");  
        console.log("querySelectorAll選擇：",doms) 

        // 獲取子節點獲得的子節點包含空文本節點，須要經過判斷nodeType進行過濾 或者用elements
        var childNodes = document.getElementsByTagName('body')[0].childNodes;
        console.log("獲取的子節點：",childNodes);

        // 獲取全部子元素 不包含文本節點
		var childNodes2 = document.getElementById("f").elements;
		console.log("elements獲取的子節點：",childNodes2);

        // 返回首個非文本節點子節點（注意換行回做爲一個空白textNode）
        function getFirstChild(node){
        	var first = node.firstChild;
        	console.log(first)
        	while(first.nodeType!=1){
        		first = first.nextSibling;
        	}
        	return first;
        }
        var ofirst = getFirstChild(document.getElementById('father'));
        console.log("獲取第一個子元素：",ofirst); 

        // 返回末尾非文本節點子節點（注意換行回做爲一個空白textNode）
        function getLastChild(node){
        	var last = node.lastChild;
        	console.log(last)
        	while(last.nodeType!=1){
        		last = last.previousSibling;
        	}
        	return last;
        }
        var olast = getLastChild(document.getElementById('father'));
        console.log("獲取最後一個子元素：",olast); 
        
		// 獲取前一個元素
		function getPreviousNode(node){
			while(node.previousSibling.nodeType != 1){
				node = node.previousSibling;
			}
			return node.previousSibling;
		}
		var oN = document.getElementById('n');
		console.log(getPreviousNode(oN))
		console.log(document.getElementById("f").elements[0].value)
		console.log(document.getElementById("f").elements[2].value)

		// 獲取後一個元素
		function getNextNode(node){
			while(node.nextSibling.nodeType != 1){
				node = node.nextSibling;
			}
			return node.nextSibling;
		}

		// 建立元素追加到父元素裏
		var newList = document.createElement('ul');
			for(var i=0;i<5;i++){
				var txt = document.createTextNode(i+'建立元素追加到父元素裏');
				var list = document.createElement('li');
				list.appendChild(txt);
				newList.appendChild(list);
			}
			
		document.getElementById("father").appendChild(newList);


	</script>
</body>
</html>
未完待續。。。css