如何获取页面元素对应JavaScript对象

最新推荐文章于 2023-08-09 20:15:20 发布

AnFooo

最新推荐文章于 2023-08-09 20:15:20 发布

阅读量529

点赞数 1

分类专栏： Java Web

本文链接：https://blog.csdn.net/DangerousMc/article/details/102955171

版权

Java Web 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

一.前言

在HTML 文档中，所有内容都是节点：

1.整个文档是一个文档节点；

2.每个 HTML 元素是元素节点；

3.HTML 元素内的文本是文本节点；

4.每个 HTML 属性是属性节点；

5.注释是注释节点；

而获取文档中这些节点，也就是页面元素对应的JavaScript对象，也叫DOM对象，就需要使用document对象。

四种获取方式

1.通过标签的id获取该标签的DOM对象

2.通过该标签的标签名获取DOM对象数组

3.通过该标签的name名获取该标签的DOM对象数组

4.通过该标签的class类名获取改标签的DOM对象数组

二.四种获取方式

1.通过标签的id获取该标签的DOM对象

用document对象调用getElementById()方法，传入要获取的id名即可，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id="text">百度</span>
		
		<script>
			var element = document.getElementById("text");
			console.log(element);
		</script>
	</body>
</html>

2.通过该标签的标签名获取DOM对象数组

第二种方式是通过目标标签的标签名，用document对象调用getElementsByTagName()方法即可获取文档中所有该名的标签的DOM对象组成的数组，以下是代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<br /><br /><br id="space"/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		
		<script>
			var elements = document.getElementsByTagName("br");
			console.log(elements.length);
			console.log(elements[2]);
		</script>
	</body>
</html>

3.通过该标签的name名获取该标签的DOM对象数组

第三种方式是通过目标标签的name名获取，获取到的也是该名的所有标签的DOM对象组成的数组，代码示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="1"/>篮球
		<input type="checkbox" name="hobby" value="2"/>足球
		<input type="checkbox" name="hobby" value="3"/>乒乓球
		
		<script>
			var elements = document.getElementsByName("hobby");
			console.log(elements.length);
			console.log(elements[2]);
		</script>
	</body>
</html>

4.通过该标签的class类名获取改标签的DOM对象数组

最后一种是通过类名获取文档中该类标签的所有DOM对象数组，以下是代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com" class="text">百度一下</a>
		<br class="text" />
		<span class="text">DOM对象</span>
		
		<script>
			var elements = document.getElementsByClassName("text");
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

AnFooo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何获取页面元素对应JavaScript对象

一.前言在HTML 文档中，所有内容都是节点：1.整个文档是一个文档节点；2.每个 HTML 元素是元素节点；3.HTML 元素内的文本是文本节点；4.每个 HTML 属性是属性节点；5.注释是注释节点；而获取文档中这些节点，也就是页面元素对应的JavaScript对象，也叫DOM对象，就需要使用document对象。二.四种获取方式1.通过标签的id获取该标签...
复制链接

扫一扫