JS之DOM
1、DOM(Document Object Model) 文档对象模型
一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的
对象进行描述，在浏览器上看到的信息只不过就是这些html对象的属性信息而已。只要能找到
对应的对象操作对象的属性，则就可以改变浏览器当前显示的内容。
在浏览器解析hTML文件的时候，是把每个标签解析为一个对象，根据节点组织成节点树。
树型结构：
2、获取集合属性
在获取了对应的标签对象之后，就要查找相应的标签对象的在DHTML中的属性
举例：
<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"> 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.itcast.cn"; } } </script> </html>
3、获取单或多个对象
通过html元素的标签属性找节点。
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")（name可以重复）
<!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 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"; //没有px(默认） 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、实现复选框的级联操作
<!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"); //找到全选按钮的对象，不用this时 //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 /> <!--参数定位this，代表all这个标签--> <input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span> </body> </html>
