如何获取HTML元素对应JavaScript对象

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

Wwwwww~

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

阅读量598

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/bravery__/article/details/107411217

版权

Document对象：Document对象表示整个HTML文档，该对象是Window对象的一部分，可通过window.document属性获取该对象。
使用Document对象中的方法获取JavaScript对象

一、getElementById()

作用：返回对拥有指定 id 的第一个对象的引用。

<body>
		<div id="c">
			<span>ffffff</span>
		</div>
		console.log(document.getElementById("c"));
</body>

二、getElementsByName()

作用：返回带有指定名称的对象集合。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" name="hobby" />篮球
		<input type="checkbox" name="hobby" />足球
		<input type="checkbox" name="hobby" />乒乓球
		<input type="checkbox" name="hobby" />羽毛球
		
		<script>
			var elements = document.getElementsByName("hobby");
			for (var i=0;i<elements.length;i++) {
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

三、getElementsByTagName()

作用：返回带有指定标签名的对象集合。

<body>
			<b>aaaaaaaa</b><b>aaaaaaaa</b>
			var elements = document.getElementsByTagName("b");
			for (var i = 0; i < elements.length; i++) {
				console.log(elements[i]);
			}
</body>

四、getElementsByClassName

作用：返回带有指定类名的对象集合

<body>
			<p class="z">tttt</p><p class="z">tttt</p>
			<div class="z">
				<span>郑州大学</span><b>河南工业大学</b>
			</div>
			var elements = document.getElementsByClassName("z");
			console.log(document.getElementsByClassName("z")[0]);
			for (var i = 0; i < elements.length; i++) {
				console.log(elements[i]);
			}
</body>

Wwwwww~

关注

0
点赞
踩
0

收藏

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

Document对象：Document对象表示整个HTML文档，该对象是Window对象的一部分，可通过window.document属性获取该对象。使用Document对象中的方法获取JavaScript对象一、getElementById()作用：返回对拥有指定 id 的第一个对象的引用。<body> <div id="c"> <span>ffffff</span> </div> console.log(documen
复制链接

扫一扫