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

最新推荐文章于 2023-02-14 21:27:24 发布

杨道龙

最新推荐文章于 2023-02-14 21:27:24 发布

阅读量557

点赞数 1

分类专栏： javascript 文章标签： javascript javascript笔记 web前端 dom html

本文链接：https://blog.csdn.net/qq_32059827/article/details/51492742

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!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" οnclick="showText()" value="设置文本"/>
    <hr/>
    
    <img src="" />
    <img src="" />
    <img src="" />
    <input type="button" οnclick="showImage()" value="显示图片"/>
   <hr/>
    <div name="info"></div>
    <div name="info"></div>
    <div name="info"></div>
     <input type="button" οnclick="showDiv()" value="设置div内容"/>
    
</body>
</html>