<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <a href="#">标题1</a> <a href="#">标题2</a> <a href="#">标题3</a> <input type="button" onClick="writeUrl()" value="设置a标的地址"/> </body> <script type="text/javascript"> /* DOM(Document Object Model) 文档对象模型 一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的 对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到 对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。 var allNodes = document.all; //获取html文件中的所有标签节点 。 for(var i = 0; i<allNodes.length ; i++){ alert(allNodes[i].nodeName); //标签的名字 nodeName; } */ function writeUrl(){ var links = document.links; // 获取文档中含有href的属性的标签。 for(var i = 0; i<links.length ; i++){ links[i].href = "http://www.baidu.com"; } } </script> </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 = "/user.png"; 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>
根据属性找标签demo
<!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"> function checkAll(allNode){ //找到所有的的选项 var items = document.getElementsByName("item"); //找到全选按钮的对象 //var allNode = document.getElementsByName("all")[0]; for(var i = 0 ; i<items.length ; i++){ items[i].checked = allNode.checked; } } function getSum(){ var items = document.getElementsByName("item"); var sum = 0; for(var i = 0 ; i<items.length ; i++){ if(items[i].checked){ sum += parseInt(items[i].value); } } var spanNode = document.getElementById("sumid"); spanNode.innerHTML = (" ¥"+sum).fontcolor("green"); } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div>商品列表</div> <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /> <input type="checkbox" name="item" value="1800" />笔记本电脑1800元<br /> <input type="checkbox" name="item" value="300" />笔记本电脑300元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /> <input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br /> <input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span> </body> </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"> /* 创建字节入插入节点、设置节点的属性。 document.createElement("标签名") 创建新元素节点 elt.setAttribute("属性名", "属性值") 设置属性 elt.appendChild(e) 添加元素到elt中最后的位置 */ var num = 1; function add(){ var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。 //setAttribute:设置节点的属性 inputNode.setAttribute("type","button"); inputNode.setAttribute("value","按钮"+num); num++; var bodyNode = document.getElementsByTagName("body")[0]; bodyNode.appendChild(inputNode); //appendChild 添加子节点。 } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <input type="button" onclick="add()" value="添加"/> </body> </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"> /* 插入目标元素的位置 elt.insertBefore(newNode, oldNode); 添加到elt中，child之前。 注意： elt必须是oldNode的直接父节点。 elt.removeChild(child) 删除指定的子节点 注意： elt必须是child的直接父节点。 */ function addFile(){ //先要创建一个tr对象 var trNode = document.createElement("tr"); //创建td对象 var tdNode1 = document.createElement("td"); var tdNode2 = document.createElement("td"); // tdNode1.innerHTML ="<input type='file'/>"; tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>"; //把td的节点添加到tr节点上 trNode.appendChild(tdNode1); trNode.appendChild(tdNode2); var tbodyNode = document.getElementsByTagName("tbody")[0]; var lastRow = document.getElementById("lastRow"); tbodyNode.insertBefore(trNode,lastRow); } //删除附件 function delFile(aNode){ var trNode = aNode.parentNode.parentNode; var tbodyNode = document.getElementsByTagName("tbody")[0]; tbodyNode.removeChild(trNode); } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <table> <tr> <td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td> </tr> <tr id="lastRow"> <td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td> </tr> </table> </body> </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"> function showCity(){ //维护一个二维数组存储省份对应的城市 var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]]; //获取省份对应的节点 var provinceNode = document.getElementById("province"); //获取省份选中的选项 var selectIndex = provinceNode.selectedIndex; //获取对应的城市 var cityDatas = citys[selectIndex]; //找到city节点 var cityNode = document.getElementById("city"); /* //先清空city框所有option var children = cityNode.childNodes; for(var i = 0; i<children.length ; ){ cityNode.removeChild(children[i]); } */ //设置options的个数。 cityNode.options.length = 1 ; //遍历对应的所有城市然后创建对应的option添加到city上。 for(var index = 0; index<cityDatas.length ; index++){ var option = document.createElement("option"); option.innerHTML = cityDatas[index]; cityNode.appendChild(option); } } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> 省份<select id="province" onchange="showCity()"> <option>省份</option> <option>广东</option> <option>湖南</option> <option>广西</option> </select> 城市<select id="city"><option>城市</option></select> </body> </html>