DOM的getElementById()、getElementsByName()、getElementsByTagName()方法

最新推荐文章于 2024-09-25 15:23:45 发布

千g

最新推荐文章于 2024-09-25 15:23:45 发布

阅读量968

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/n950814abc/article/details/78529022

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、getElementById()方法：

接受一个参数，获取元素的ID。如果找到相应的元素则返回该元素的HTMLDivElement对

象，如果不存在，则返回null。

可以访问document中的某一特定元素。是通过id来获取元素的，所以只能访问设置了id

的元素。

	<html >
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
			<title>DOM基础</title>
			<script type="text/javascript" src="demo.js"></script>
		</head>
	
		<body>
			
			<div id='box' title="标题" class="pos" style="color:red;">测试DIV</div>
	
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
	
	
		</body>
	
	</html>

	window.οnlοad=function(){  //等待html加载完毕再加载onload事件里的js
		if(document.getElementById){
			var x=document.getElementById('box');
			//alert(x.tagName);  //获取这个元素节点的标签名
			//alert(x.innerHTML);  //获取这个元素节点的文本(包含html标签)，纯文本不能包含标签
			//alert(x.title);  //获取title属性的值
			//alert(x.id);  //获取这个元素节点id属性的值，注意不是属性节点
			//alert(x.style);  //获取style的属性对象
			//alert(x.style.color);  //获取style属性对象中color属性的值
			//alert(x.class);  //貌似是保留字
			//alert(x.className);  //获取Class属性的值
			
			
		}else{
			alert('您的浏览器不兼容，请更换~');
		}
	}

2、getElementsByTagName()：

是通过TagName（标签名）来获取元素的，一个document中会有相同的标签，所以这个方

法会获得一个数组。

window.οnlοad=function(){
	//var body=document.getElementsByTagName("body")[0];  //获取body节点
	//alert(body);	
	
	//var li=document.getElementsByTagName("li");  //参数传递一个标签名即可
	//alert(li);  //返回一个数组集合，HTMLCollection
	//alert(li.length);  //返回数组li的数量
	//alert(li[0]);  //HTMLElement，li的结点对象
	//alert(li.item(0)); //同上
	//alert(li[0].tagName);  //li 
	//alert(li[0].innerHTML);  //1
}

3、getElementsByName()方法：

返回带指定名称的对象的集合是通过Name属性来获取元素的，返回值有很多，document

中每一个元素的id是唯一的，但是name是可以重复的

总结：

访问某一特定的元素尽量用getElementById()，访问标签用getElementsByTagName()，

IE不支持getElementsByName()，所以尽量少用这个方法。