一、介绍：

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>

前端---DOM的更多相关文章

  1. Python之Web前端Dom, jQuery

    Python之Web前端: Dom   jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...

  2. 前端dom元素的操作优化建议

    参考自:http://blog.csdn.net/xuexiaodong009/article/details/51810252 其实在web开发中,单纯因为js导致性能问题的很少,主要都是因为DOM ...

  3. python学习之路前端-Dom

    Dom简介    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为 ...

  4. web前端 DOM 详解

    先来点概念 文档对象模型(DOM)是一个独立于语言的,使用 XML 和 HTML 文档操作的应用程序接口(API). 在浏览器中,主要与 HTML 文档打交道,在网页应用中检索 XML 文档也很常见. ...

  5. 前端——DOM

    什么是DOM? DOM是W3C(万维网联盟)的标准,是Document Object Model(文档对象模型)的缩写,它定义了访问HTML和XML文档的标准: “W3C文档对象模型(DOM)是中立于 ...

  6. 前端 Dom 直接选择器

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  7. 前端DOM知识点

    DOM即文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.DOM把网页和脚本 ...

  8. 前端dom操作竟然使得http请求的时间延长了

    最近在项目中遇到了一个奇怪的问题:在google浏览器的调试窗口network下看到一个请求的时间一直是2s多,但是当我把这个请求单独拿出来执行的时候发现根本用不了2s,100多毫秒就完成了.最后再不 ...

  9. 关于前端Dom的总结

    简介 DOM (Document Object Model) 文档对象模型 DOM思想使用节点树(node tree)的概念来描述一个HTML页面,页面中的每一个元素.属性.文本都被认为是节点.此外, ...

随机推荐

  1. return Acad::ErrorStatus::eOk引发error C2220: warning treated as error - no 'object' file generated

    必须先Acad::ErrorStatus es; 然后return es. 补充: 如果把cpp中#include "*.h"和#include"stdafx.h&quo ...

  2. DELPHI 各版本下载

    各版本中国下载地址: http://pan.baidu.com/s/1eQ1QGy2 http://pan.baidu.com/s/1qWK3mw8 (有新版本发布时,会同步最新官网地址) ───── ...

  3. [zz]利用碎片时间健身

    利用碎片时间健身(上) http://v.163.com/zixun/V96957QH6/VBSQ4D861.html#from=zixunplay_recommended 利用碎片时间健身(下) h ...

  4. php 函数汇总

    extract 从数组中将变量导入到当前的符号表 $arr['age'] = 30; $arr['name'] = 'bluesky'; $arr['sex'] = 'male'; var_dump( ...

  5. flash flex 程序出现错误 Error #2032

    解决思路参考: http://www.cnblogs.com/enjoyprogram/archive/2012/06/21/2557615.html 有可能是这种情况: 状况:在安装flshbuil ...

  6. Spark Job的提交与task本地化分析（源码阅读八）

    我们又都知道,Spark中任务的处理也要考虑数据的本地性(locality),Spark目前支持PROCESS_LOCAL(本地进程).NODE_LOCAL(本地节点).NODE_PREF.RACK_ ...

  7. java安全沙箱（二）之.class文件检验器

    java是一种类型安全的语言,它有四类称为安全沙箱机制的安全机制来保证语言的安全性,这四类安全沙箱分别是: 类加载体系 .class文件检验器 内置于Java虚拟机(及语言)的安全特性 安全管理器及J ...

  8. .NET4.5 异步编程 async和await

    msdn介绍:https://msdn.microsoft.com/zh-cn/library/hh191443.aspx 其实很简单,标记了async的方法为异步方法,从方法的左大括号开始同步执行, ...

  9. windows WSABUF 结构在IOCP 中应用时两个成员变量的意义

    WSABUF 结构的原型如下: typedef struct __WSABUF { u_long len; char FAR *buf; } WSABUF, *LPWSABUF; 该结构在IOCP 中 ...

  10. ASCIITable: 演示 Arduino 串口输出的进阶功能

    原文地址 - https://www.arduino.cc/en/Tutorial/ASCIITable ASCII字符表 本例展示了高级的串口打印功能,通过本功能可以在Arduino软件(IDE)的 ...