JavaScript获取DOM对象常用方法getElementById() 通过元素的ID属性获取DOM对象，获取的是一

获取DOM对象的常用方法有如下几种：

getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。

getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是一组DOM对象。

getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。

getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<title></title>
	</head>
	<body>
		<p id="one">这是一个p标签</p>
		<p class="first">这是一个p标签</p>
		<p class="first" id="two">这是一个p标签</p>
		<p name="username">这是一个p标签</p>
		<p name="username">这是一个p标签</p>
		<script>
		    let oneObj = document.getElementById('one'); // 通过Id获取
		    oneObj.style.color = 'red';     //只有第一个p标签字体变红色
			
			let twoObj = document.getElementById('two'); // 通过Id获取
			twoObj.style.color = 'blue';     //id为two的p标签字体变蓝色
			twoObj.style.background = 'gray';     //id为two的p标签背景颜色变为灰色
		
		    let pArr = document.getElementsByTagName('p'); // 通过元素的标签名获取
		    console.log("p标签的个数："+pArr.length);       //获取所有p标签对象，是数组，长度为5
		
		    let firstArr = document.getElementsByClassName('first');  // 通过class获取
		    console.log("class为first的对象个数："+firstArr.length);   //获取所有class为first的对象，是数组，长度为2
		
		    let userArr = document.getElementsByName('user');
		    console.log("name属性为user的对象个数："+userArr.length);    //获取所有name属性为user的对象，是数组，长度为0
			
			let userArr1 = document.getElementsByName('username');
			console.log("name属性为username的对象个数："+userArr1.length);    //获取所有name属性为username的对象，是数组，长度为2
		</script>
	</body>
</html>

讲解都写到了注释里↑

效果截图：
在这里插入图片描述

写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]
在这里插入图片描述

加油！

共同努力！

Keafmd