JavaScript DOM

DOM 

实例：

1、点击页面‘+1’按钮后，使页面上显示的数字加1

<body>
    <div>
        <div id="num">1</div>
        <input type="button" value="+1" onclick="add();"/> <!--点击button后，执行onclick后面的函数-->
    </div>
    <script type="text/javascript">
        function add(){     //定义add()函数
            var nid = document.getElementById('num'); //获取id为num
            var text = nid.innerText; //获取标签的文本值
            text = parseInt(text);  //字符串转换成整型
            text +=1;
            nid.innerText=text;  //更改num的值
        }
    </script>
</body>

 

innerTEXT与innerHTML：

innerTEXT获取的是两个标签之间的纯text文本，不包含这其中的html标签

innerHTML获取的是两个标签之间的所有的内容，包括text和html标签

对于用户输入或选择的值，获取其中的值时使用value。

2、获取input 输入值

    <div>
        <input type="text" id="in1"/>
        <input type="button" value="getvalue" onclick="getvalue();"/>
    </div>

    <script type="text/javascript">
        function getvalue(){
            var obj = document.getElementById('in1');
            alert(obj.value);
        }
    </script>

3、搜索框实例

    <div>
        <input type="text" id="in2" value="input your search:" onfocus="Focus();" onblur="Blur();"/>
    </div>

    <script type="text/javascript">
        function Focus(){
            var nid = document.getElementById('in2');
            var value = nid.value;
            if(value == 'input your search:'){
                nid.value = '';
            }
        }
        function Blur(){
            var nid = document.getElementById('in2');
            var value = nid.value;
            if(value.trim()== ''){         //.trim()去空格
                nid.value = 'input your search:'
            }
        }

    </script>

4、JS提交表单

    <div>
        <form id="form1" action="https://www.sogou.com/web" method="get">
            <input name="query" type="text"/>
            <div onclick="Submit();">提交</div>
        </form>
    </div>

   <script type="text/javascript"> 
        function Submit(){
            document.getElementById('form1').submit();
        }
    </script>

加入判断，表格内容为空时，禁止提交

<body>
    <form action="http://www.sogou.com/web" method="get">
        <input name="query" type="text"/>
        <input type="submit" onclick=" return sub();" value="submit"/>
    </form>
    <script>
        function sub(){
            var q = document.getElementsByName('query')[0];
            if(q.value.trim()){
                return true;
            }else {
                alert('wrong');
                return false;
            }
        }
    </script>
</body

5、跑马灯 计时器:setInterval()

    <script>
        setInterval('run()',1000);  //定时器，每1000毫秒执行一次run()函数
        function run(){
            var text = document.title; //获取title值，html中只有一个title，可以直接获取
            var FisrtChar = text.charAt(0); //获取title值的第一个字符
            var subText = texbText + FisrtChar;//拼接成新的title
            document.title = newTitle;//赋值
        }
    </script>

停止定时器 clearInterval()

<body>
    <input type="submit" value="STOP" onclick="stopinterval();"/>
    <script>

        obj = setInterval('run()',1000);  //定时器，每1000毫秒执行一次run()函数
        function run(){
            var text = document.title; //获取title值，html中只有一个title，可以直接获取
            var FisrtChar = text.charAt(0); //获取title值的第一个字符
            var subText = text.substring(1,text.length);//获取title值第二个到最后的字符
            var newTitle = subText + FisrtChar;//拼接成新的title
            document.title = newTitle;//赋值
        }

        function stopinterval(){
            clearInterval(obj);
        }

    </script>

只执行一次定时器

setTimeout('run()',1000);

 

posted @ 2016-05-25 17:55  ahaii  阅读(276)  评论(0)    收藏  举报