常用的4种获取元素方法的区别, getElementById, ..ClassName, ..TagName, .Name

最新推荐文章于 2025-03-27 20:58:18 发布

DavidWongSssss

最新推荐文章于 2025-03-27 20:58:18 发布

阅读量6.4k

点赞数 2

分类专栏： js 文章标签： js获取元素 dom 元素集合

本文链接：https://blog.csdn.net/Park_Geun_hye/article/details/79335887

版权

js 专栏收录该内容

6 篇文章

订阅专栏

原生JS常用的4种获取元素方法分别是：

getElementById( )

返回的是一个dom对象（第一个输出）

而getElementsByClassName( )、getElementsByTagName( )、getElementsByName( )

返回的是元素集合（第二、三、四个输出）

那么，这返回的两种东西有什么区别呢？

## dom对象可以通过dom属性里的获取子节点属性，来操作其子元素（其他元素节点也一样），参照图三

## 元素集合是不可以操作节点的，因为返回来的不是dom对象，而是一个HTMLCollection对象，是一个包含着dom的对象，集合可以通过索引index来获取集合中的某一元素进行操作，如：

图一

到这里，有人可能会觉得奇怪不是说好的元素集合不能操作子节点吗？而且为什么还要在获取元素那里加个 "[0]" 这玩意呢？

这又涉及到了HTMLCollection对象转dom对象的知识了，看下面的例子：

图二

获取的这两个东西都是同个元素，不同的是一个为HC(简写)对象，一个是dom对象，鹅HC转DOM就是在后面加个 "[×]"

那dom对象转HC对象呢？

其实上面也说了dom属性获取节点元素，返回的就是一个元素集合，参照图五

ps : ××.children跟××.children[0]是不一样的，前者是dom对象，后者是集合

那元素集合是真的不能操作元素节点吗？？我们先看下面一个例子：

图三

这里说的是gnclass.children[0]有问题，undefined，就是没定义获取不到

这个报错可能有点不明了，可以用第一张图的代码稍微修改一下，来看一看结果是什么

图四

第一个输出结果其实就是DOM转HC

其他输出都是undefined，就证明完全获取不到，根本没有这个东西

从上面可以得出一个结论：

元素集合不可以操作dom节点

所以有几点是需要注意一下的（纯属本人心得..）：

1.dom对象只要用了dom属性里操作节点的属性，返回的对象就会是集合对象(HTMLCollection)，而不是dom对象

2.集合对象加了索引，返回的就是dom对象

下面是源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.cred{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="getByClass" name="cdiv" id="getById">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div name="cdiv">
			<ul class="secUl">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	var lis = document.getElementsByClassName("secUl")[0].children;
	lis[2].classList.add("cred");

//	var ulHTMLCollection = document.getElementsByClassName("secUl");
//	console.log(ulHTMLCollection);
//	var ulDOM = document.getElementsByClassName("secUl")[0];
//	console.log(ulDOM);

//	var gbid = document.getElementById("getById");
//	gbid.children[0].children[1].classList.add("cred");
//	/获取gbid的第一个子元素的第二个子元素并为其添加cred类 （-_-注释不高亮，原谅我只为截个图）/
//	var gbclass = document.getElementsByClassName("getByClass");
//	gbclass.children[0].children[1].classList.add("cred");
//	/同样的写法，但是却报错了/
	
//	var gbid = document.querySelector("#getById");
//	var gbclass = document.querySelector(".getByClass");
//	var tag = document.getElementsByTagName("div").children;
//	var cname = document.getElementsByName("cdiv").children;
//	console.log(gbid);
//	console.log(gbclass);
//	console.log(tag);
//	console.log(cname);

</script>