javascript之DOM编程通过html元素的标签属性找节点
2016-05-24 19:05
453 查看
<!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>
相关文章推荐
- javascript之DOM编程通过html元素的标签属性找节点
- Jstorm 集群搭建过程及一键安装部署脚本
- Backbonejs之model
- javascript之DOM文档对象模型编程的引入
- javascript之DOM文档对象模型编程的引入
- [RxJS] Marble diagrams in ASCII form
- 身份证校验的几种js方法
- json解析方法之gson解析,简单粗暴。
- js计算年龄
- js调色板
- JavaScript通过HTML的class来获取HTML元素的方法总结
- js自动选择表单
- jsp自定义标签实现分页
- js自动获得焦点
- Gson解析Json
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat使用详解
- JSOI2016酱油记
- js快速排序
- javascript 代理模式
- js实现对json数据的序列化(兼容ie6以上浏览器)