一、介绍：
http://www.cnblogs.com/wupeiqi/articles/5643298.html
什么是DOM？
DOM字面意思是文档对象模型，DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型，DOM是浏览器提供的API接口，是用来给JavaScript操作document对象的
二、DOM的功能可以分为两部分：(注意DOM中的所有方法，首字母都是小写，后面每个单词开头都是大写)
1，找到一个标签，包括直接查找和间接查找
直接查找：
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
间接查找：
parentNode // 父节点
childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
2，找到标签后，对其进行操作，包括修改值、修改class、修改样式、修改属性
修改值：innerText、outerText、innerHTML、outerHTML、value
修改class：className
classList.remove(cls) //去掉class
classList.add(cls) //添加class
修改样式：tag=document.getElementById(‘i1’) ;
tag.style.color=’red’;
tag.style.fontSize=’40px’; //在标签style属性中，应该写作font-size ，但是在DOM中写作fontSize
tag.style.backGroundColor=’red’;
修改属性：tag=document.getElementById(‘i1’) ;
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
removeAttribute(key) //删除标签属性
三、事件
某个标签可以绑定事件。
书写方式如下，和标签属性类似，只不过事件的值是一个javascript函数，
可以这样理解，style属性用于直接添加css样式，class属性引入了style标签中的css样式，事件则引入了javascript
<iuput type=”submit” onclick=”check()”/>
下面是常见事件：
示例1：搜索框
<body> <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" /> <!--onfocus属性表示当该标签获取焦点时的动作，onblur属性表示当该标签失去焦点时的动作--> <script> function Focus(){ var tag=document.getElementById('i1'); //通过id获取标签 if(tag.value=="请输入关键字"){ //对标签值进行判断 tag.value=""; //清空值 } } function Blur(){ var tag=document.getElementById('i1'); //通过id获取标签 var val=tag.value; //获取标签值 if(val.trim().length==0){ //如果去掉空格后长度为0 tag.value="请输入关键字"; //给标签值赋值 } } </script></body>
示例2：模态对话框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .shade{ /*遮罩层*/ position: fixed; top: 0; left:0; bottom:0; right:0; background-color: red; opacity: 0.6; z-index: 100; } .model{ /*模态框*/ width: 200px; height: 200px; position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; background-color: white; z-index: 101; } </style></head><body> <div style="background-color: #dddddd;height: 2000px;"> <input type="button" value="按钮" onclick="ShowModel();"/> <!--点击时执行ShowModel函数--> </div> <div id="i1" class="shade hide"></div> <!--默认是隐藏的--> <div id="i2" class="model hide"> <!--默认是隐藏的--> <a href="javascript:void(0);" rel="external nofollow" onclick="HideModel();">取消</a> <!--点击时执行HideModel函数--> </div> <script> function ShowModel(){ var tag1=document.getElementById("i1"); //获取标签 var tag2=document.getElementById("i2"); tag1.classList.remove("hide"); //去掉hide类型 tag2.classList.remove("hide"); } function HideModel(){ var tag1=document.getElementById("i1"); //获取标签 var tag2=document.getElementById("i2"); tag1.classList.add("hide"); //添加hide类型 tag2.classList.add("hide"); } </script></body></html>
示例3：全选反选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancleAll();"/> <input type="button" value="反选" onclick="ReverseAll();"/> <table border="1"> <thead> <tr> <th>序号</th> <th>用户</th> <th>年龄</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>11</td> <td>11</td> </tr> <tr> <td><input type="checkbox" /></td> <td>22</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>33</td> <td>33</td> </tr> </tbody> </table> <script> function CheckAll(){ var tb=document.getElementById('tb'); //获取到tbody标签 var trs=tb.children; //获取到tr标签数组 for(i=0;i<trs.length;i++){ //循环每个tr标签 var current_trs=trs[i]; var ck=current_trs.firstElementChild.firstElementChild; //获取td标签中的input标签 ck.checked=true; //选中// ck.setAttribute("checked",'checked') } } function CancleAll(){ var tb=document.getElementById('tb'); var trs=tb.children; for(i=0;i<trs.length;i++){ var current_trs=trs[i]; var ck=current_trs.firstElementChild.firstElementChild; ck.checked=false; //取消选中// ck.removeAttribute('checked'); } } function ReverseAll(){ var tb=document.getElementById('tb'); var trs=tb.children; for(i=0;i<trs.length;i++){ var current_trs=trs[i]; var ck=current_trs.firstElementChild.firstElementChild; if(ck.checked){ ck.checked=false; //如果是选中的取消// ck.removeAttribute('checked'); } else{ ck.checked=true; //如果未选中则选中// ck.setAttribute('checked','checked'); } } } </script></body></html>
