js dom操作选择器,dom操作复习

 

<!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>

  

未完待续。。。

posted @ 2018-03-27 19:57  幽竹小妖  阅读(173)  评论(0编辑  收藏  举报