DOM Document Object Model 文档对象模型  整合js和html css.控制html文档行为.
DOM就是把页面当中所有内容全部封装成对象.
HTML文档中万物皆对象.

1.对象的分类
    Document ***
    Element  ***
    Attribute
    Text
    Common
以上5类对象 具有一些共同特征 抽象出了一个父类
    Node
        自身属性
            nodeName
            nodeValue
            nodeType   Document ==> 9   Element ==> 1
        导航属性
            parentNode
2.页面中获得Element对象的方式
    Document
        getElementById();
        getELementsByTagName();
        getElementsByClassName();
        getElementsByName();
    Element（局部中获得Element的方式）
        getELementsByTagName();
        getElementsByClassName();
3.事件
    给Element对象附加一些事件属性.属性的类型是Function类型.这些Function属性在什么时候被运行呢?
只看属性的名称.
属性名称:
    onclick ==> 单击时触发
    ondblclick ==> 双击时触发
    onblur ==>  失去焦点时触发
    onfocus ==> 得到焦点时触发
    onchange ==> 用于表单元素, 当元素被修改时触发
    onkeydown ==> 当键盘按键被按下时
    onmousemove ==> 当鼠标移动时触发
    onmousedown ==> 当鼠标按键按下时触发
    onmouseover ==> 当鼠标指向时触发
    onmouseout ==> 当鼠标移出时触发
    onsubmit ==> 当表单提交时触发
    onload  ==>  只给body标签使用.当页面加载完成后 执行.

两种添加事件的方式：

<body>

    <input type="button" value="点我" onclick="alert('aaa');" id="abc" />

<script type="text/javascript">

//第一种为元素附加事件属性的方式

//就是在标签上写上属性名称和 对应执行的代码 例如: onclick="alert('aaa');"

//如上代码就是在为input对象附加 一个onclick的Function属性.

//alert('aaa'); 就是 Function的方法体.

//证明如下

var input = document.getElementById("abc");

            alert(input.onclick);

</script>

</body>
<body>

    <input type="button" value="点我" id="abc" />

<script type="text/javascript">

//第二种为元素附加事件属性的方式

var input = document.getElementById("abc");

input.onclick = function(){

    alert('bbb');

}

</script>

</body>

3.事件详情的获得:
        我们获得事件详情要找到侦探来知道(事件Event);
        如何来获得Event对象呢?
        Event对象是在事件发生时被创建, 并传递给我们的事件Function中.所以我们直接使用即可.

使用示例：

<body>

    <input type="text" id="abc"  />

<script type="text/javascript">

//onkeydown 当键盘某个键按下时触发  应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

//问题1? 如何获得用户按下的是哪个键呢? 找侦探问.

//问题2? 如何获得侦探? 侦探在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.

var input = document.getElementById("abc");

input.onkeydown = function (event,abc){

    //拿到侦探之后 如何获得 事件详情(哪个键被按下呢)

    //alert(event.keyCode);

    //经过观察 回车按键对应的 keyCode是 13

    if(event.keyCode == 13){

        alert("表单提交啦!");

    }

}

</script>

</body>

4.Event对象
        属性:
            keyCode
            button
            clientX(了解) 返回当事件被触发时，鼠标指针的水平坐标。
            clientY(了解) 返回当事件被触发时，鼠标指针的垂直坐标。
        方法:
            preventDefault() ==> 阻止默认关联事件的发生.  
            stopPropergation ==> 组织事件的向下传播.
关于页面对象的增删该查
    相关方法:
        Document
            creatElement
        Element
            方法
            appendChild
            removeChild
            replaceChild
            cloneNode
            setAttribute(key,value)
            属性
            innerHTML 修改标签体.(支持直接书写html代码)
DHTML的概念 Dynamic HTML 动态网页技术
    就是整合4门技术 ==>  DOM HTML CSS JavaScript
    用通俗的话说: DHTML就是 将我们的之前学的DOM对象进行增强.
    什么是增强?  对对象来讲,增强无非就是 增加新的属性获得方法.
5.增删改查

<script type="text/javascript">

//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到 传智首页.

    function addNode(){

        //1.获得 第一个div

        var div = document.getElementById("div_1");

        //2.创建a标签  createElement==>创建一个a标签   <a></a>

        var eleA =  document.createElement("a");

        //3.为a标签添加属性 <a href="http://www.itcast.cn"></a>

        eleA.setAttribute("href", "http://www.itcast.cn");

        //4.为a标签添加内容 <a href="http://www.itcast.cn">传智</a>

        eleA.innerHTML = "传智";

        //5.将a标签添加到div中

        div.appendChild(eleA);

    }

    //点击后 删除div区域2

    function deleteNode(){

        //1 获得要删除的div区域

            var div = document.getElementById("div_2");

        //2.获得父亲

            var parent = div.parentNode;

        //3 由父亲操刀

            parent.removeChild(div);

    }

    //点击后 替换div区域3 为一个美女

    function updateNode(){

        //1 获得要替换的div区域3

        var div = document.getElementById("div_3");

        //2创建img标签对象 <img />

        var img = document.createElement("img");

        //3添加属性 <img src="001.jpg" />

        img.setAttribute("src", "001.JPG");

        //4.获得父节点

        var parent = div.parentNode;

        //5.替换

        parent.replaceChild(img, div);

    }

    //点击后 将div区域4 克隆一份 添加到页面底部

    function copyNode(){

        //1.获取要克隆的div

        var div = document.getElementById("div_4");

        //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己

        var div_copy = div.cloneNode(true);

        //3.获得父亲

        var parent = div.parentNode;

        //4.添加

        parent.appendChild(div_copy);

    }

</script>

6.增加表格数据

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>添加用户</title>

    </head>

    <body>

        <center>

            <br><br>

            添加用户:<br><br>

            姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp;

            email: <input type="text" name="email" id="email" />&nbsp;&nbsp;

            电话: <input type="text" name="tel" id="tel" /><br><br>

            <button id="addUser">提交</button>

            <br><br>

            <hr>

            <br><br>

            <table id="usertable" border="1" cellpadding="5" cellspacing=0>

                <tbody>

                    <tr>

                        <th>姓名</th>

                        <th>email</th>

                        <th>电话</th>

                        <th>&nbsp;</th>

                    </tr>

                    <tr>

                        <td>Tom</td>

                        <td>tom@tom.com</td>

                        <td>5000</td>

                        <td><a href="javascript:void(0)" onclick="del(this)" >Delete</a></td>

                    </tr>

                    <tr>

                        <td>Jerry</td>

                        <td>jerry@sohu.com</td>

                        <td>8000</td>

                        <td><a href="javascript:void(0)" onclick="del(this)" >Delete</a></td>

                    </tr>

                </tbody>

            </table>

        </center>

    </body>

    <script language="JavaScript">

    /**

    <a href="javascript:void(fun1())" >haha</a>

        function fun1(){

            alert('haha');

            return "haha";

        }

    */

        /* document.getElementById("addUser").onclick=function(){

            // value属性属于 DHTML的范畴. Dynamic HTML ==> 动态网页  ==> DOM JS CSS HTML ==> DHTML实际上就是对DOM对象的增强.

            // DHTML为我们的DOM对象 附加了很多 便利 属性和方法.能简化我们的开发工作.

                //1.获得表单中 名字 邮箱 电话信息

                var name = document.getElementById("name").value;

                var email = document.getElementById("email").value;

                var tel = document.getElementById("tel").value;

                //2.组装tr

                var tr = document.createElement("tr");

                //3.组装td

                var nameTd = document.createElement("td");

                nameTd.innerHTML = name;

                var emailTd = document.createElement("td");

                emailTd.innerHTML = email;

                var telTd = document.createElement("td");

                telTd.innerHTML = tel;

                //4.将td添加到tr中

                tr.appendChild(nameTd);

                tr.appendChild(emailTd);

                tr.appendChild(telTd);

                //5.将tr添加到table中

                document.getElementById("usertable").appendChild(tr);

        } */

        document.getElementById("addUser").onclick=function(){

            // value属性属于 DHTML的范畴. Dynamic HTML ==> 动态网页  ==> DOM JS CSS HTML ==> DHTML实际上就是对DOM对象的增强.

            // DHTML为我们的DOM对象 附加了很多 便利 属性和方法.能简化我们的开发工作.

                //1.获得表单中 名字 邮箱 电话信息

                var name = document.getElementById("name").value;

                var email = document.getElementById("email").value;

                var tel = document.getElementById("tel").value;

                //2组装tr

                var tr = document.createElement("tr");

                tr.innerHTML="<td>"+name+"</td><td>"+email+"</td><td>"+tel+"</td><td><a href='javascript:void(0)' onclick='del(this)' >Delete</a></td>";

                //3将tr添加到table中

                document.getElementById("usertable").appendChild(tr);

        }

        //小知识点: 协议名:协议内容

            // 将a标签自身功能阉割.

            //    <a href="javascript:void(0)" onclick="del(this)" >Delete</a>

        //小知识点: this 指向 方法的调用者,在当前例子中.this指向了a标签

                function del(obj){

                obj.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);

        }

    </script>

</html>

JavaScripts学习日记——DOM的更多相关文章

  1. JavaScripts学习日记——DOM SAX JAXP DEMO4J XPath

    今日关键词: XML解析器 DOM SAX JAXP DEMO4J XPath XML解析器 1.解析器概述 什么是解析器 XML是保存数据的文件,XML中保存的数据也需要被程序读取然后使用.那么程序 ...

  2. JavaScripts学习日记——BOM

    IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执 ...

  3. JavaScripts学习日记——ECMAscript

    1.Function对象 Function是一个很特殊的对象,特殊在该对象就像java中的方法一样,可以运行,可以传参数. 三种定义function对象的方法: 1.function fun1(a,b ...

  4. JavaScripts学习日记——XML DTD Schema

    今日关键词: XML DTD Schema 1.XML 1 XML的概述 1.1 什么是XML XML全称为Extensible Markup Language,意思是可扩展的标记语言.XML语法上和 ...

  5. Linux学习日记-使用EF6 Code First(四)

    一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是  请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...

  6. android学习日记05--Activity间的跳转Intent实现

    Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...

  7. android学习日记03--常用控件Dialog

    常用控件 9.Dialog 我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框 对话框,要创建对话框之前首先要创建Bui ...

  8. android学习日记03--常用控件checkbox/radiobutton

    常用控件3.checkbox 复选框,确定是否勾选,点击一下勾选,点击第二下取消,当有一系列备选项时适合用checkbox控件,方便用户提交数据. 贴上例子Activity的java代码 packag ...

  9. android学习日记03--常用控件button/imagebutton

    常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...

随机推荐

  1. 产品经理（PM）常用原型图设计工具

    本文转贴自:http://www.zhangping.name/2010/08/28/pm-wireframes-design-tools/ ,尽管都是一些商业软件,但对设计的确非常有帮助. 天天和产 ...

  2. 运维监控利器smokeping 500报错处理

    检查apache日志发现有以下错误: No such file or directory: exec of '/usr/local/smokeping/htdocs/smokeping.cgi' fa ...

  3. 解决Cacti监控图像断断续续问题

    最近cacti的图像全都是断断续续.新加的设备,图像也是这样,查看cacti 的log发现大量下面类似的错误信息:04/12/2011 03:54:37 PM - SPINE: Poller[0] H ...

  4. 数据库SQLite在Qt5+VS2012使用规则总结---中文乱码

    VS2012默认格式为 "GB2312-80",而有时我们用到字符串需要显示中文时,就会出现乱码.下面仅就Qt5和VS2012中使用数据库SQLite时,做一个简单的备忘录 #in ...

  5. hdu 1241

    1.题目大意:给定一个图,上边有*和@两种标记,其中@表示石油,好多@连在一起可以看成一个大的石油区,问在这个区域中有多少个石油区 #include<iostream> using nam ...

  6. Oracle数据库之事务

    Oracle数据库之事务 1. 什么是事务 在数据库中事务是工作的逻辑单元,一个事务是由一个或多个完成一组的相关行为的SQL语句组成,通过事务机制确保这一组SQL语句所作的操作要么都成功执行,完成整个 ...

  7. 百度touch的手势框架，touch.js

    今天,随便搜搜看到了一个新的手势库,也许能让我为现在使用者的hammer.js的手势库带来的烦恼而消除. 它是百度团队开发的,现在由百度云Clouda进行维护. 官网   http://touch.c ...

  8. javascript 不用ajax 用 iframe 子域名下做到ajax post数据

    最近在一个项目中遇到了ajax跨域的问题,情况如下.有三个域名分别是 a.xx.com b.xx.com c.xx.com 这三个域名都会用用ajax post方式相互读取数据.文笔不好, 不写了妈蛋 ...

  9. 复制、移动和删除：cp, rm, mv

    要复制文件,请使用cp(copy)命令.不过,cp命令的用途很多.除了单纯的复制之外,还可以建立连接文件(就是快捷方式),比较两个文件的新旧而予以更新,以及复制整个目录等等.至于移动目录与文件,则使用 ...

  10. web安全：HTTPS

    E1:搭建zoobar网站开启apache服务和mysql服务service apache2 startservice mysql start 建立数据库和表mysql->create data ...