JavaScript-05

来源：互联网发布：js对象属性的访问方法编辑：程序博客网时间：2024/06/05 17:46

dom的使用

介绍：

document object modeldom的对象  和bom  对象类似，会在页面打开时，由浏览器创建          dom对象的获得                    window.document          document 的操作         等同于   xml 对象的操作

得到对象的几种方法

var div1 = document.getElementById("one");        var div2 = document.getElementsByTagName("div")[0];        var div3 = document.getElementsByClassName("two")[0];        var div4 = document.getElementsByName("three")[0];

两种点击方式

第一种

<input type="button" value="点我"  onclick="alert('试试看了');"/>

第二种

<body>    <div id="one" class="two" name="three">啦啦啦啦</div>    </body>    <script type="text/javascript">    var one =document.getElementById("one");    one.onclick = function(){        alert("这也可以");    }    </script>

通过document方法得到对象后的使用

焦点

var one =document.getElementById("one");    one.onblur=function(){        alert("失去焦点!");    }    one.onfocus=function(){        alert("得到焦点!");    }

内容改变

var two = document.getElementById("two")    two.onchange = function() {        alert("内容改变");    }

按键的捕获

var two = document.getElementById("two")    two.onchange = function() {        alert("内容改变");    }

页面加载完成调用方法的使用

<script type="text/javascript">    //alert('haha');    </script>    <body onload="alert('haha')">    <input id="one" class="two" />    </body>

js是脚本语言，按照代码 顺序执行--------有先后顺序之分

关于鼠标及按键的一些方法

/*  onmousedown 鼠标按钮被按下。 4 1 9 Yes      onmouseup 鼠标按键被松开。     onmouseout 鼠标从某元素移开。 4 1 9 Yes      onmouseover 鼠标移到某元素之上。 3 1 9 Yes      onmousemove 鼠标被移动。 3 1 9 Yes      */    var one = document.getElementById("one");    one.onmousedown = function(event) {        alert("加加看"+event.button);    }     one.onmouseout = function(event) {        alert("onmouseout");    }     /* one.onmouseover = function(event) {        alert("onmouseover");    }  */

表单提交前的验证

<body>        <form action="#" id="one">            用户：<input type="text" /><br>             <input type="submit" value="提交"/>        </form>    </body>    <script type="text/javascript">        var one = document.getElementById("one");        one.onsubmit = function(event){            //此处可以校验，正确提交，错误不提交            alert("提交了");            // 阻止默认事件的发生            event.preventDefault();        }    </script>

内外点击事件之屏蔽外事件

这里写图片描述

<body>    <div id="one">        <div id="two"></div>    </div>    </body>    <script type="text/javascript">        //alert('haha');        var one = document.getElementById("one");        var two = document.getElementById("two");        one.onclick = function(event) {            alert("外部被点击了");        }        two.onclick = function(event) {            alert("内部被点击了");            event.stopPropagation();        }    </script>

0 0