根据name和标签名获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="../img/pic1.gif" alt="" name="pic">
		<img src="../img/pic2.jpg" alt="" name="pic1">
		<form action="" name="register">
			<input type="text" placeholder="用户名" />
			<input type="text" placeholder="密码不少于8位" />
			<button>提交</button>
		</form>
		<p><a href="http://www.php.cn" name="php">php中文网</a></p>
	</body>
	
	<script>
		//以文档对象的方式来访问这些特定的元素集合
		//document.images   获取所有的<img>元素，返回是一个数组
		document.images[0].style.width = '500px';   //标签的数字索引
		document.images['pic1'].style.width = '800px';   //name属性
		//如果将images看成对象，name就可以看成属性
		document.images.pic.style.width = '250px';   //name作为images对象的元素属性
		
		//forms属性   获取页面中所有<form>
		document.forms[0].style.background = 'pink';
		document.forms['register'].style.background = 'yellow'
		document.forms.register.style.background = 'red'
		document.forms.item(0).style.background = 'gray'   //元素的集合item方法
		
		//links属性   获取页面中所有<a>
		document.links[0].style.background = 'pink';
		document.links['php'].style.background = 'yellow';
		document.links.php.style.background = 'red';
		document.links.item(0).style.background = 'gray';
		
		//body属性   获取页面中<body>
		document.body.style.background = 'yellow';
		
		//head属性   获取页面中<head>
		var style = document.createElement('style');
		document.head.appendChild(style);
		
		//documentElement  获取页面中<html>
		console.log(document.documentElement);
		
		//doctype   获取文档类型
		console.log(document.doctype);
	</script>
</html>
相关文章
