首页 / JAVASCRIPT / js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例）

js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2613字，纯文字阅读大概需要4分钟。

内容图文

js如何获取dom元素？本篇文章就给大家介绍js通过dom查找并获取元素对象的方法，让大家了解js中的dom是什么、如何通过dom来查找并获取元素的。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们来简单了解一下js中dom是什么？

dom：HTML DOM ，文档对象模型（Document Object Model）的简称，当网页被加载时，浏览器就会创建页面的文档对象模型。

通常，通过 JavaScript，我们需要操作 HTML元素。为了做到这件事情，就必须首先查找并获取到该元素。下面我们来介绍一下在JavaScript中中通过dom查找并获取元素对象的三种常见方法：

1、通过 id 查找并获取到元素：getElementById()

getElementById() 方法：通过ID获得节点元素，如果页面上含有多个相同id的节点对象，那么只返回第一个节点对象。

语法：

document.getElementById("元素的id");

代码示例：点击id="box"盒子就会出现弹窗，显示id="box"盒子里的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="box" onclick="getValue()">我是测试代码</div>
		<script>
		function getValue(){
		  var x=document.getElementById("box")
		  alert(x.innerHTML)
		 }
		</script>
	</body>
</html>

效果图：

js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例） - 文章图片

注意：getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

2、通过标签名查找并获取到元素：getElementsByTagName()

getElementsByTagName()方法：是通过元素的标签名来查找并获取一组元素对象（有多少就获取多少），其返回的是带有指定标签名的对象集合。

语法：

document.getElementsByClassName("元素的标签名");

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello World!</p>

<div id="main">
     <p>The DOM is very useful.</p>
     <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>

</body>
</html>

效果图：

js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例） - 文章图片

3、通过class（类）查找并获取到元素：getElementsByClassName()

getElementsByClassName()方法：是通过指定的class（类）属性值来查找并获取元素的，其返回的是带有指定类名的元素集合，可以说它是一个对象的集合。

语法：

document.getElementsByClassName("元素的class");

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="main">
			<p class="a">我是测试代码1</p>
			<p class="a">我是测试代码2</p>
		</div>
		<script>
			var x = document.getElementById("main");
			var y = x.getElementsByClassName("a");
			document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
		</script>
	</body>
</html>

效果图：

js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例） - 文章图片

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程！

相关推荐：

php公益培训视频教程

JavaScript图文教程

JavaScript在线手册

以上就是js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例）全部内容，希望文章能够帮你解决js如何获取dom元素？js通过dom查找和获取元素对象的方法（代码示例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/284476.html

来源：【匿名】