JavaScripts学习日记——DOM

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScripts学习日记——DOM相关的知识,希望对你有一定的参考价值。

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>[email protected]</td>
                        <td>5000</td>
                        <td><a href="javascript:void(0)" onclick="del(this)" >Delete</a></td>
                    </tr>
                    <tr>
                        <td>Jerry</td>
                        <td>[email protected]</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的主要内容,如果未能解决你的问题,请参考以下文章

JavaScripts学习日记——ECMAscript

JavaScripts学习日记——XML DTD Schema

Vue学习日记——Vue核心思想

DOM探索之基础详解——学习笔记

代码片段使用复杂的 JavaScript 在 UIWebView 中插入 HTML?

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段