搜索页面文档特定节点的三个方法

最新推荐文章于 2021-06-03 02:35:08 发布

xiaochouyu0703

最新推荐文章于 2021-06-03 02:35:08 发布

阅读量153

点赞数

分类专栏： js-Dom 文章标签： document getelementbyid

本文链接：https://blog.csdn.net/xiaochouyu0703/article/details/84173431

版权

js-Dom 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Document接口提供了如下三个方法：

getElementById()：根据id值返回某个标记对应的DOM节点，不存在返回null。
getElementsByTagName()：返回页面所有相同名称的标记对应的DOM对象，返回值为一个集合，不存在返回一个length为0的空集。
getElementsByName()：返回具有相同name属性值的标记对应的节点。

	<div>1</div>
	<div>2</div>
	<div>3</div>
 <script type="text/javascript">
	var d =document.getElementsByTagName("div");
	alert(d.length);  //3
	document.body.removeChild(d[2]);
	var d1 =document.getElementsByTagName("div");
	alert(d.length);   //2
	alert(d1.length);  //2 
	//d和d2都指向同一组DOM元素的集合
 </script>

Element接口也定义了getElementByTagName()方法，不过仅在当前节点包含的子节点中搜索，而不是在整个页面文档中搜索。

<script type="text/javascript">
	var d =document.getElementsByTagName("div");
	alert(d.length);  //0
</script>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
 </body>

要注意：页面上频繁使用getElementById()和getElementByTagName()事实上并不会降低页面效率，因为大多数浏览器都针对DOM进行了查询优化，预先准备了id和TagName的索引。不过这样一来，appendChild、removeChild和insertBefore以及对id的赋值操作反而会影响性能。