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

来源：互联网发布：winrar软件官方下载编辑：程序博客网时间：2024/06/05 22:43
<!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>
1 0