【JavaScript】第五节 JavaScript如何获取HTML元素

最新推荐文章于 2023-12-25 22:47:01 发布

景谦Nice

最新推荐文章于 2023-12-25 22:47:01 发布

阅读量76

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_43705275/article/details/103262636

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    document.getElementById()，例：<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="a" href="http://www.baidu.com">百度一下，你就知道</a>
		<p>床前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
		<script type="text/javascript">
			var element = document.getElementById("a");
			console.log(element);		
		</script>
	</body>
</html>
 结果为：
 
document.getElementsByName()，例：<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="a" href="http://www.baidu.com">百度一下，你就知道</a>
		<p>床前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
		<form>
			<input type="radio" name="gender" value="male" />男
			<input type="radio" name="gender" value="female" />女
		</form>
		<script type="text/javascript">
			var elements = document.getElementsByName("gender");
			for (var i = 0; i < elements.length; i ++) {
				console.log(elements[i]);
			}	
		</script>
	</body>
</html>
 结果如下：
 
document.getElementsByTagName()，例：<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="a" href="http://www.baidu.com">百度一下，你就知道</a>
		<p>床前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
		<form>
			<input type="radio" name="gender" value="male" />男
			<input type="radio" name="gender" value="female" />女
		</form>
		<script type="text/javascript">
			var elements = document.getElementsByTagName("p");
			for (var i = 0; i < elements.length; i ++) {
				console.log(elements[i]);
			}	
		</script>
	</body>
</html>
 结果如下：
 
document.getElementsByClassName()，例：<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="a" href="http://www.baidu.com">百度一下，你就知道</a>
		<p class = 'p'>床前明月光</p>
		<p class = 'p'>疑是地上霜</p>
		<p class = 'p'>举头望明月</p>
		<p class = 'p'>低头思故乡</p>
		<form>
			<input type="radio" name="gender" value="male" />男
			<input type="radio" name="gender" value="female" />女
		</form>
		<script type="text/javascript">
			var elements = document.getElementsByClassName("p");
			for (var i = 0; i < elements.length; i ++) {
				console.log(elements[i]);
			}	
		</script>
	</body>
</html>
 结果为：
 

                