Javascript 基础教程...LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

Javascript 基础教程之如何获取html 元素

通过ID 获取html 元素

    document.getElementById()

实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>getElementById</title>	
</head>
<body>
	<h2><a href="www.php.cn">Javascript DOM</a></h2>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById('sp');
		document.write(sum);
	</script>
</body>
</html>

大家注意下，如果我们把脚本语句放在head 标签内，那么我们将输出null 

那么下面我们将看一个innerHTML 获取html元素的内容

下面我们写一个实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById("sp");
		alert(sum.innerHTML);
	</script>
</body>
</html>

这样我们本身会输出一个php中文网，然后执行js代码，然后弹出php中文网

我们同样可以给sum 重新赋值，代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById("sp");
		sum.innerHTML="玩转javascript";
		alert(sum.innerHTML);
	</script>
</body>
</html>

小伙伴们打开firebug调试页面，可以按快捷键F12

5.png


通过标签名查找 HTML 元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementsByTagName("p");
		document.write(sum);
	</script>
</body>
</html>

返回的是一个数组集合,看如下代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

	<script type="text/javascript">
		var sum=document.getElementsByTagName("li");
		//alert(sum);  //返回一个数组集合
		//alert(sum.length);//返回数组数量
		//alert(sum[0]);  //返回HTMLLIElement  li的节点对象
		//alert(sum.item(0)); //同上，意义一样
		//alert(sum[0].tagName);  //返回第一个标签的名字
		alert(sum[0].innerHTML);  //显示第一个标签的内容
	</script>
</body>
</html>

下面我们来看以下，如何获取body节点对象，但是html中我们只有你一对body，并没有第二对body

代码如下所示

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum=document.getElementsByTagName("body")[0];
		alert(sum);
	</script>
</body>
</html>

getElementsByName

获取相同名称的元素,返回一个对象数组

如下代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByName("test")[0];
		alert(sum);
	</script>
</body>
</html>

注意IE  火狐 和谷歌浏览器的区别  火狐和谷歌都是支持的，name属性在ie 浏览器中，本身就不是div 的属性，所以ie 就忽略掉了，一般name 我们应用于表单会比较多

getElementsByClassName

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test" class="dv">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByClassName("dv");
		alert(sum);
	</script>
</body>
</html>

返回一个对象，下面我们来看一段代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test" class="dv">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByClassName("dv")[0];
		alert(sum);
	</script>
</body>
</html>
nächsten Abschnitt
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>getElementById</title> </head> <body> <h2><a href="www.php.cn">Javascript DOM</a></h2> <p id="sp">php中文网</p> <script type="text/javascript"> var sum = document.getElementById('sp'); document.write(sum); </script> </body> </html>
einreichenCode zurücksetzen
KapitelKursunterlagen