小说网站 搜小说 无限网 烟雨红尘 小说爱好者 免费小说 免费小说网站

javascript之DOM编程通过html元素的标签属性找节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"> 
/*
	通过html元素的标签属性找节点。
		document.getElementById("html元素的id") 
		document.getElementsByTagName("标签名") 
		document.getElementsByName("html元素的name")
*/
 
	function showText(){
		var inputNode = document.getElementById("userName");  //根据ID属性值找元素
		inputNode.value = "设置好了文本";
	}
	//InnerHTml是用于设置标签体的内容的。 value是用于设置标签的value属性值.
 
 
	function showImage(){
		var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。
		for(var i = 0 ; i<images.length ; i++){
			images[i].src = "33.jpg";
			images[i].width="100";
			images[i].height="100";
		}
	}
	
	
	
	 function showDiv(){
		var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签,返回的是一个数组。
		for(var i = 0 ; i<divs.length ; i++){
			divs[i].innerHTML = "哈哈".fontcolor("red");	
		}
	}
 
 
 
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>	
	<input type="text" id="userName" value="请输入用户名..." /><input type="button" onclick="showText()" value="设置文本"/>
    <hr/>
    
    <img src="" />
    <img src="" />
    <img src="" />
    <input type="button" onclick="showImage()" value="显示图片"/>
   <hr/>
    <div name="info"></div>
    <div name="info"></div>
    <div name="info"></div>
     <input type="button" onclick="showDiv()" value="设置div内容"/>
    
</body>
</html>

posted on 2016-05-24 19:05  王小航  阅读(146)  评论(0编辑  收藏  举报

导航