DOM查找元素方法及用法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		/*
			1.根据ID查找元素
				document.getElementById(id)     	类型node    				找不到null
			2.根据标签名查找元素
				document.getElemenstByTagName		类型HTMLCollection		找不到[]
				注意：该方法既可以被document对象调用，又可以被节点对象调用的方法
			3.根据类名查找元素
				document.getElementsByClassName  	类型HTMLCollection		找不到[]
			4.根据名称查找元素
				document.getElementsByName       	类型HTMLCollection		找不到[]

		*/
	</script>
</head>
<body>
	<div>
		<p>你好</p>
		<div></div>
	</div>

	<div class="one"></div>
	<input type="radio" name="sex">男
	<input type="radio" name="sex">
	<script type="text/javascript">
		var ds=document.getElementsByTagName('div');
		// console.log(ds.length);
		// ds[1].innerHTML='第二个';

		//不能使用for in
		// for(var i in ds){
		// 	console.log(i);
		// }

		// for(var i=0;i<ds.length;i++){
		// 	console.log(i);
		// }


		var ds1=document.getElementsByClassName('one');
		console.log(ds1,ds1.length);
		ds1[0].innerHTML='哈哈哈哈';

		var ips=document.getElementsByName('sex');
		console.log(ips);
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		/*
			根据指定选择器查找页面元素
				选择器：CSS选择器   #box  .one  p
			querySelector   		节点对象
				注意：若不是ID选择器，只取第一个

			querySelectorAll		NodeList

		*/
	</script>
</head>
<body>
	<div id="box">哈哈</div>
	<div class="one">呵呵</div>
	<div class="one">嘿嘿</div>

	<div id="box1">
		<p>哈哈哈</p>
		<div>多久啊ｌｆｄｊａｌ</div>
	</div>

	<script type="text/javascript">
		var o=document.querySelector('#box');//根据ID
		console.log(o);

		var o1=document.querySelector('.one');//一个
		console.log(o1);

		var os=document.querySelectorAll('#box');

		console.log(os);


		var os1=document.querySelectorAll('.one');

		console.log(os1);


		var os2=document.querySelectorAll('div');
		console.log(os2);

		var oo=document.querySelector('#box1 div');
		console.log(oo);

		var oo1=document.querySelectorAll('#box1 div');
		console.log(oo1); 
	</script>
</body>
</html>

DOM查找元素方法及用法

猜你喜欢