前端---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>

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

Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
前端dom元素的操作优化建议
参考自:http://blog.csdn.net/xuexiaodong009/article/details/51810252 其实在web开发中,单纯因为js导致性能问题的很少,主要都是因为DOM ...
python学习之路前端-Dom
Dom简介文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为 ...
web前端 DOM 详解
先来点概念文档对象模型(DOM)是一个独立于语言的,使用 XML 和 HTML 文档操作的应用程序接口(API). 在浏览器中,主要与 HTML 文档打交道,在网页应用中检索 XML 文档也很常见. ...
前端——DOM
什么是DOM? DOM是W3C(万维网联盟)的标准,是Document Object Model(文档对象模型)的缩写,它定义了访问HTML和XML文档的标准: “W3C文档对象模型(DOM)是中立于 ...
前端 Dom 直接选择器
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
前端DOM知识点
DOM即文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.DOM把网页和脚本 ...
前端dom操作竟然使得http请求的时间延长了
最近在项目中遇到了一个奇怪的问题:在google浏览器的调试窗口network下看到一个请求的时间一直是2s多,但是当我把这个请求单独拿出来执行的时候发现根本用不了2s,100多毫秒就完成了.最后再不 ...
关于前端Dom的总结
简介 DOM (Document Object Model) 文档对象模型 DOM思想使用节点树(node tree)的概念来描述一个HTML页面,页面中的每一个元素.属性.文本都被认为是节点.此外, ...

随机推荐

Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...
[Linux] - CentOS 安装nginx
linux版本:CentOS 6.0+ 安装nginx方法: 1.下载nginx rpm包命令: wget http://nginx.org/packages/centos/6/noarch/RPMS ...
[PHP] - Laravel 5 的 Hello Wold
吐槽一段整了半天,Laravel下载麻烦得可以去死.先要安装composer,而composer又被共墙了,之后又要安装git,安装完git还要注册git,等等.... 最终放弃这种玩法,太恶心了. ...
Mac iTerm with Powerline
1. 下载iTerm 地址: http://www.iterm2.com/ 完全可以取代Mac自带的终端了. 2. 之前我装过oh-my-zsh git clone git://github.com/ ...
dispatch_set_target_queue 说明
参照:http://blog.csdn.net/growinggiant/article/details/41077221 http://codingobjc.com/blog/2013/05/07/ ...
Serif和Sans-serif字体的区别
在西方国家罗马字母阵营中,字体分为两大种类:Sans Serif和Serif,打字机体虽然也属于Sans Serif,但由于是等宽字体,所以另外独立出Monospace这一种类,例如在Web中,表示代 ...
Java 技术文章摘录
sokcet 编程实例 android bundle类 Android -- Looper.prepare()和Looper.loop() —深入版 Java NIO系列教程 XML操作 Androi ...
创建javascript对象的几种方式
ECMAScript提供的对象有:String.Date.Array.Boolean.Math.Number.RegExp.Global 程序中需要用到很多自定义的js对象 1.直接创建 var ob ...
SSH配置免密码登陆
1.使用SSH-keygen,然后一路回车使之生成id_rsa何id_rsa.pub文件,id_rsa.pub为公匙文件. 2.使用命令:cat ~/.ssh/id_rsa.pub >> ...
NOIP201307货车运输
2016.1.28 试题描述 A 国有n座城市,编号从1到n,城市之间有m条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有q辆货车在运输货物,司机们想知道每辆车在不超过车辆限重的情况下,最多 ...

前端---DOM

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

随机推荐

热门专题