zoukankan      html  css  js  c++  java
  • 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>
    

  • 相关阅读:
    TCP性能调优
    Qt 实现应用程序单实例运行
    table多选
    多选删除最佳处理
    获取路由或路径
    当前页面打开新页面
    vue版本更新index.html缓存
    vue项目js和css文件名避免浏览器缓存再vue.config.js中配置
    vue动态表格
    IE网页被缓存,get接口缓存
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299767.html
Copyright © 2011-2022 走看看