javascript之DOM文档对象模型编程的引入

最新推荐文章于 2025-05-13 11:32:30 发布

转载最新推荐文章于 2025-05-13 11:32:30 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanghang/p/6299768.html

本文通过一个简单的实例介绍如何使用JavaScript操作DOM。演示了如何通过document.all获取页面中的所有元素，并通过遍历修改页面中带有href属性的链接指向同一目标网址。

/*
  DOM(Document Object Model) 文档对象模型
	
	一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的
	对象进行描述，我们在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到
	对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。  	
 
	var allNodes = document.all;   //获取html文件中的所有标签节点 。
	for(var i = 0; i<allNodes.length ; i++){
		alert(allNodes[i].nodeName);	 //标签的名字  nodeName;
	}
 
*/

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
</head>
<body>
	<a href="#">标题1</a>
    <a href="#">标题2</a>
    <a href="#">标题3</a>
    <input type="button" onClick="writeUrl()" value="设置a标的地址"/>
</body>
<script type="text/javascript"> 

 
	function writeUrl(){//点击后，herf就变成了指向百度网址。
		var links = document.links; // 获取文档中含有href的属性的标签。
		for(var i = 0; i<links.length ; i++){
			links[i].href = "http://www.baidu.com";
			
		}
		
	}
</script>
</html>

转载于:https://www.cnblogs.com/wanghang/p/6299768.html