前端---DOM

一、介绍：

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);" 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>