DOM获取元素的方法

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用Css选择器来选择元素</title> </head> <body> <ul id="ul">

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用Css选择器来选择元素</title>
</head>
<body>
	<ul id="ul">
		<li class="red">列表项1</li>
		<li>列表项2</li>
		<li class="green">列表项3</li>
		<li class="green">列表项4</li>
		<li class="coral large">列表项5</li>
	</ul>

	<script type="text/javascript">
		// 选择页面元素最简单的方式就是用css选择器:.red ->>class='red';
		// 标签选择器
		let lists = document.querySelectorAll('li');
		// console.log(lists)
		lists[0].style.background = 'coral';
		lists.item(1).style.background = 'skyblue';

		// 该方法也可以在元素上调用
		let ul = document.querySelector('#ul');// 返回满足条件的第一个
		// console.log(ul)
		// 获取当前ul下的class为green的元素
		let li = ul.querySelectorAll('.green');
		// console.log(li)
		for(let i=0;i<li.length;i++){
			li[i].style.background = 'green'
		}

		// 获取DOM元素的方法有以下集种
		// 1、 通过ID 选择  document.getElementById('id');// 获取唯一id的元素
		// 2、 通过标签选择  document.getElementsByTagName('ul')[0];// 标签选择器  返回集合
		// 3、 通过name属性获取  docuemnt.getElementsByName('name')[0];// 返回集合
		// 4、 通过Class选择     document.getElementsByClassName('name')[0];// 返回集合
		// 5、 通过css选择器获取  document.querySelectorAll('li');// 获取所有li的元素 返回集合
		//    获取单个: document.querySelector();// 返回单个元数据，等价于  document.querySelectorAll('li')[0];

		// 其中操作属性可以使用数组方式：
		// li[0].style.background = 'red';
		// li.item(0).style.background = 'red';
		// li.red.style.background = 'green';
		// li['red'].style.backgrond = 'skyblue'

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

Correcting teacher：天蓬老师Correction time：2019-03-28 09:49:09
Teacher's summary：获取元素的方式很多, 有的返回的是一个类数组, 有的返回的是一个集合, 要注意

DOM获取元素的方法

Popular Entries